ngx-mat-dynamic-table
    TypeScript icon, indicating that this package has built-in type declarations

    11.1.0 • Public • Published

    ngx-mat-dynamic-table

    Dynamic tables built with angular material. Pull requests welcome.

    Getting Started

    A full demo can be found on the github repository.

    Install with npm:

    npm i ngx-mat-dynamic-table

    After installation include NgxMatDynamicTableModule in your module imports:

    import { NgxMatDynamicTableModule } from 'ngx-mat-dynamic-table';
    ...
    imports: [
        NgxMatDynamicTableModule
      ],
    ...

    Column types are defined as follow:

    export interface DynamicTableColumnDefinition extends DynamicTableColumn {
      columnDef: string, // The key of the data, can access nested objects
      columnTitle: string, // The title of the column
      type?: 'number' | 'date' | 'icon'; // Type of data in the field: number, date, icon
      search?: boolean; // By default a column cannot be searched, enable search on this column
      total?: boolean // calculate the total of this column, only on type number
      average?: boolean // calculate the average of this column, ony on type number
      icons?: { value: any, matIcon: string, color: string, matTooltip: string }[] // Material icons only, only on type icon
      sort?: 'asc' | 'desc'; // asc of desc, default sort, can only be applied to one column.
      dateFormat?: string; // for dates eg. 'yyyy/MM/dd, HH:mm'
      hidden?: boolean; // Hide this column, enable optionalColumns to view
      cellClassKey?: string; // Apply a class to a cell, class name must be in the data
    }

    Source data must be an observable:

    let data: Observable<User[]> = [{
          name: 'Luke',
          surname: 'Kroon',
          number: '+27827022334',
          signupDate: new Date('2019/01/22'),
          subscribed: true,
          money: {
            netWorth: 50000
          }
        }];

    In your component define the columns:

    columns: DynamicTableColumnDefinition[] = [
        {
          columnDef: 'name',
          columnTitle: 'Name',
          search: true
        }
        ...
    ]

    In the HTML add the selector:

    <ngx-mat-dynamic-table-container [tableData$]="data$" [columns]="columns" filter="true" export="true"
            (rowClicked)="rowData($event)" rowClick="true" fileName="Test" optionalColumns="true" multiple="true"
            (selectedRows)="selectedRows($event)" [pageSizeOptions]="[15, 30, 60]"></ngx-mat-dynamic-table-container>

    Inputs:

    tableData$ = Table data in observable columns = Column definitions filter = Enable the filter box on the table export = Enable export button rowClicked = Output for the click event on the row rowClick = Enable cursor to indicate table is clickable fileName = File name of the excell export optionalColumns = Enable optional columns multiple = Enable mulitple select selectedRows = Output for all selected rows

    For more examples run the demo application.

    How to run the demo application

    1. Build the library with ng build ngx-mat-dynamic-table
    2. A new dist folder will appear with the library.
    3. Run ng serve to start the demo.

    How to contribute

    1. In one terminal build the library with ng build ngx-mat-dynamic-table --watch. This command will check for any file changes in the library directory.
    2. In another terminal run ng serve to test your changes to the library.

    Install Locally to your own project

    1. Build the library with ng build ngx-mat-dynamic-table.
    2. From your own project, run npm install /path/to/library/dist.

    Install

    npm i ngx-mat-dynamic-table

    DownloadsWeekly Downloads

    6

    Version

    11.1.0

    License

    none

    Unpacked Size

    512 kB

    Total Files

    33

    Last publish

    Collaborators

    • lukekroon