SelectableTableDirectives

This library was generated with Angular CLI version 10.1.6.

Description

Angular directives for develop a selectable table.

Instalation

Use the package manager npm to install ad-selectable-table-directives.

npm install ad-selectable-table-directives

Demo

SelectableTableDirectivesDemo

Usage

Module

import SelectableTableModule from 'node-modules/ad-selectable-table-directives';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    SelectableTableModule.forRoot([{
      TABLE_ID: "table1",
      CELL_SELECTED_CLASSES: ['selected'],
      CELL_SELECTABLE_CLASSES: ['selectable'],
      ROWCELL_SELECTABLE_CLASSES: ['rowSelectable'],
      ROWCELL_SELECTED_CLASSES: ['rowSelected'],
      ROWCELL_PARCIAL_SELECTED_CLASSES: ['rowParcialSelected'],
      COLUMNCELL_SELECTABLE_CLASSES: ['columnSelectable'],
      COLUMNCELL_SELECTED_CLASSES: ['columnSelected'],
      COLUMNCELL_PARCIAL_SELECTED_CLASSES: ['columnParcialSelected'],
    },
    {
      TABLE_ID: "",
      CELL_SELECTED_CLASSES: ['selected'],
      CELL_SELECTABLE_CLASSES: ['selectable'],
      ROWCELL_SELECTABLE_CLASSES: ['rowSelectable'],
      ROWCELL_SELECTED_CLASSES: ['rowSelected'],
      ROWCELL_PARCIAL_SELECTED_CLASSES: ['rowParcialSelected'],
      COLUMNCELL_SELECTABLE_CLASSES: ['columnSelectable'],
      COLUMNCELL_SELECTED_CLASSES: ['columnSelected'],
      COLUMNCELL_PARCIAL_SELECTED_CLASSES: ['columnParcialSelected'],
    }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

NOTE The config are optional, and you can set a default config via {TABLE_ID:""} or {TABLE_ID:"default"}
REMEMBER Add classes in configuration to styles.scss or corresponding component styles.

any.component.html

<table SelectableTable  class="table">
  <thead>
    <tr SelectableHeader>
      <th></th>
      <th SelectableColumnCell *ngFor="let col of columns" scope="col">{{col}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows" SelectableRow>
      <th scope="row" SelectableRowCell>{{row}}</th>
      <td *ngFor="let col of columns" SelectableCell >C:{{col}}R:{{row}}</td>
    </tr>

  </tbody>
</table>

any.component.ts

export class SelectableTableDemoComponent {
  title = 'SelectableTableDemo';
  columns: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  rows: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  constructor() {
  }
}

IMPORTANT This is the most basic example, if you are not added classes to tableConfig it will not show nothing.
NOTE For more info see the Documentation below or see this example on GitHub:

DEMO

Documentation

SelectableAPI

Object for interact with the table, has the next properties:

GETTERS

    CellsSelected: SelectableCell[]
    CellIdsSelected: string[]
    CellValueSelected: SelectableCellValue[] 
    RowsSelected: SelectableRowCell[] 
    PartialRowsSelected: SelectableRowCell[]
    ColumnsSelected: SelectableColumnCell[]
    PartialColumnsSelected: SelectableColumnCell[] 
    Cells: SelectableCell[] 
    Columns: SelectableColumnCell[]      
    Rows: SelectableRowCell[]

FUNCTIONS

        selectCellByCell(selectableCell: SelectableCell, dispatchEvents?: boolean){}
        selectCellByElement(htmlElement: HTMLElement, dispatchEvents?: boolean){}
        selectCellByID(id: string, dispatchEvents?: boolean){}
        selectMultipleCellByCell(selectableCells: SelectableCell[], dispatchEvents?: boolean){}
        selectMultipleCellByElement(htmlElements: HTMLElement[], dispatchEvents?: boolean){}
        selectMultipleCellByID(ids: string[], dispatchEvents?: boolean){}
        removeCellSelectedByCell(selectableCell: SelectableCell, dispatchEvents?: boolean){}
        removeCellSectedByElement(htmlElement: HTMLElement, dispatchEvents?: boolean){}
        removeCellSelectedByID(id: string, dispatchEvents?: boolean){}
        removeMultipleCellsSelectedByCell(selectableCells: SelectableCell[], dispatchEvents?: boolean){}
        removeMultipleCellsSectedByElement(htmlElements: HTMLElement[], dispatchEvents?: boolean){}
        removeMultipleCellsSelectedByID(ids: string[], dispatchEvents?: boolean){}
        selectRowByRowCell(selectableRowCell: SelectableRowCell, dispatchEvents?: boolean){}
        selectRowByElement(rowHTMLElement: HTMLElement, dispatchEvents?: boolean){}
        selectRowByIndex(rowIndex: number, dispatchEvents?: boolean){}
        selectMultipleRowsByRowCell(selectableRowCells: SelectableRowCell[], dispatchEvents?: boolean){}
        selectMultipleRowByElement(rowHTMLElements: HTMLElement[], dispatchEvents?: boolean){}
        selectMultipleRowByIndex(rowsIndex: number[], dispatchEvents?: boolean){}
        removeRowByRowCell(selectableRowCell: SelectableRowCell, dispatchEvents?: boolean){}
        removeRowByElement(rowHTMLElement: HTMLElement, dispatchEvents?: boolean){}
        removeRowByIndex(rowIndex: number, dispatchEvents?: boolean){}
        removeMultipleRowByRowCell(selectableRowCells: SelectableRowCell[], dispatchEvents?: boolean){}
        removeMultipleRowByElement(rowHTMLElements: HTMLElement[], dispatchEvents?: boolean){}
        removeMultipleRowByIndex(rowsIndex: number[], dispatchEvents?: boolean){}
        selecteColumnByColumnCell(selectableColumnCell: SelectableColumnCell, dispatchEvents?: boolean){}
        selectColumnByElement(columnHTMLElement: HTMLElement, dispatchEvents?: boolean){}
        selectColumnByIndex(columnIndex: number, dispatchEvents?: boolean){}
        selectMultipleColumnsByColumnCell(selectableColumnCells: SelectableColumnCell[], dispatchEvents?: boolean){}
        selectMultipleColumnByElement(columnHTMLElements: HTMLElement[], dispatchEvents?: boolean){}
        selectMultipleColumnByIndex(columnsIndex: number[], dispatchEvents?: boolean){}
        removeColumnByColumnCell(selectableColumnCell: SelectableColumnCell, dispatchEvents?: boolean){}
        removeColumnByElement(columnHTMLElement: HTMLElement, dispatchEvents?: boolean){}
        removeColumnByIndex(columnIndex: number, dispatchEvents?: boolean){}
        removeMultipleColumnSelectedByColumnCell(selectableColumnCells: SelectableColumnCell[], dispatchEvents?: boolean){}
        removeMultipleColumnByElement(columnHTMLElements: HTMLElement[], dispatchEvents?: boolean){}
        removeMultipleColumnByIndex(columnsIndex: number[], dispatchEvents?: boolean){}
        clearSelection(dispatchEvent?: boolean) {}

NOTE You can get access to it through the SelectableTableDirective instance or the treeReadyEvent

SelectableTableDirective
SELECTOR
```
<tr ADSelectableTabñe></tr>
```

- ##### GETTERS
  ``` typescript
  SelectedCellsObservable :Observable<SelectableCell[]>;
  SelectedRowCellsObservable :Observable<SelectableRowCell[]>;
  SelectedColumnCellsObservable :Observable<SelectableColumnCell[]>;
  SelectableTableApi :SelectableTableAPI; 
  ```
- ##### INPUTS
  ```typescript
  @Input() SelectableTableID:ID//Identifier for the table, if not provide it take the default config, otherwise take the config with the same TABLE_ID
  ```
- #### OUTPUTS
  ```typescript
  @Output() cellSelected: EventEmitter<SelectableCellValue>;
  @Output() cellRemoved: EventEmitter<SelectableCellValue>;
  @Output() rowSelected: EventEmitter<SelectableRowCell>;
  @Output() rowRemoved: EventEmitter<SelectableRowCell>;
  @Output() columnSelected: EventEmitter<SelectableColumnCell>;
  @Output() columnRemoved: EventEmitter<SelectableColumnCell>;
  @Output() selectionClear: EventEmitter<void>;
  @Output() tableReady : EventEmitter<SelectableTableAPI>;//Return the tableAPI object
  ```

SelectableCellDirective (Required)

SELECTOR
```
<tr ADSelectableCell></tr>
```

GETTERS

  CellElement:HTMLElement;
  SelectableCell:SelectableCell;

INPUTS

  value:any;//The value that can access by SelectableTableAPi.CellValueSelected in Value property

Mark the element that is a cell

SelectableRowDirective (Required)

SELECTOR
```
<tr ADSelectableRow></tr>
```

GETTERS

  RowElement: HTMLElement {
  SelectableRow:SelectableRow{
  SelectableRowCell:SelectableRowCell{
  SelectableCellsInRow: SelectableCell[]

Mark the element parent of cell elements in a row

SelectableRowCellDirective (Optional)

SELECTOR

```html
<tr ADSelectableRowCell></tr>
```

GETTERS

  RowCellElement: HTMLElement
  SelectableRowCell:SelectableRowCell
  SelectableCellsInRow: SelectableCell[]

Mark the element to select the row on click

SelectableColumnCell (Optional)

SELECTOR
```
<tr ADSelectableColumnCell></tr>
```

GETTERS

  ColumnCellElement: HTMLElement {
  SelectableColumnCell: SelectableColumnCell {
  SelectableCellsInColumn: SelectableCell[]

Mark the element to select the cells in the same index position

SelectableHeader (Optional if not SelectableColumnCells)
- SELECTOR
```
<tr ADSelectableHeader></tr>
```
- Mark the parent element of the SelectableColumnCell elements

Copyright and license

Contribute

If you want contribute for improve this project and the author, you can make donations in the next link via (paypal.me/angeldiez11)

ad-selectable-table-directives

SelectableTableDirectives

Description

Instalation

Demo

Usage

DEMO

Documentation

SelectableAPI

GETTERS

FUNCTIONS