ad-selectable-table-directives

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

Code and documentation copyright 2020 Ángel Díez. Code released under the MIT license. Docs released under Creative Commons.

Contribute

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