Ad-selectable-table-directives NPM

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

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

```html
<tr ADSelectableTabñe></tr>
```

GETTERS

SelectedCellsObservable :Observable<SelectableCell[]>;
SelectedRowCellsObservable :Observable<SelectableRowCell[]>;
SelectedColumnCellsObservable :Observable<SelectableColumnCell[]>;
SelectableTableApi :SelectableTableAPI;

INPUTS

@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

@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)

tslib

@everything-registry/sub-chunk-1096

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

SelectableTableDirectives

Description

Instalation

Demo

Usage

DEMO

Documentation

SelectableAPI

GETTERS

FUNCTIONS

SelectableTableDirective

SELECTOR

GETTERS

INPUTS

OUTPUTS

SelectableCellDirective (Required)

SELECTOR

GETTERS

INPUTS

SelectableRowDirective (Required)

SELECTOR

GETTERS

SelectableRowCellDirective (Optional)

SELECTOR

GETTERS

SelectableColumnCell (Optional)

SELECTOR

GETTERS

SelectableHeader (Optional if not SelectableColumnCells)

SELECTOR

Copyright and license

Contribute