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

    1.0.13 • Public • Published

    A simple and powerful Datatable for Angular based on Angular Mat Table with some additional features

    Install

    Using npm:

    $ npm i --save extended-mat-table
    

    How to use

    Import ExtendedMatTableModule and BrowserAnimationsModule:

    import { ExtendedMatTableModule } from 'extended-mat-table';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule,ExtendedMatTableModule,BrowserAnimationsModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    Add material theme:

    Add your theme file to the styles array of your project's angular.json file

        "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "styles": [
                "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                "src/styles.scss"
              ],
              "scripts": []
              }
    
    
    <app-extended-mat-table [data]="data" [columns]="column"></app-extended-mat-table>
    

    Demo

    https://codesandbox.io/s/unruffled-glitter-z1xve

    Image of Demo


    Available Input

    Variable Description
    data table data
    columns table columns
    options see belows
    fetching see belows


    Available Options

    Variable Default Value
    buttonColor #23758e
    exportPrefix ex_
    enableButton true
    enableFilter true
    enableColumnFilter true
    hiddenColumnsIndex number[]
    allowMultiSelection false
    enableRowSelection false
    selectedRowCallback function
    returnColumnsOrderCallback function
    fetching_text fetching data ...
    lineClamp 4

    import { Options } from 'extended-mat-table';
    
    
    public options:Options = {
        hiddenColumnsIndex:[5],
        selectedRowCallback:({tableId, selected})=>{
        },
        returnColumnsOrderCallback:({tableId, displayedColumns, availableColumns})=>{
        }
      }
    
    <app-extended-mat-table [data]="data" [columns]="column" [options]="options"></app-extended-mat-table>
    

    Fetching

    fetching

    the text can be modified by options fetching_text

    this one can be used together with addRows function

    <app-extended-mat-table [data]="data" [columns]="column" [options]="options" [fetching]="true"></app-extended-mat-table>
    

    Add Rows

    You can append data to table after initial

    <app-extended-mat-table #dataTable [data]="data" [columns]="column" [options]="options"></app-extended-mat-table>
    
    import { Options, Column, ExtendedMatTable} from 'extended-mat-table';
    
    @ViewChild('dataTable') dataTable:ExtendedMatTable;
    
    this.dataTable.addRows([{}])
    
    

    Actions

    Add button in row

    Image of Demo

    <app-extended-mat-table #dataTable [data]="data" [columns]="column" [actions]="actions"></app-extended-mat-table>
    
    public actions = [
        {title:"Edit", action:(row)=>{
          console.log(row)
        }},
        {title:"Delete", action:(row)=>{
          console.log(row)
        }}
      ]
    

    Wrap Text

    Image of Wrap Text Demo

    use column wrap_text option to wrap text in a cell, specific number of lines by options lineClamp

      public column:Column[] = [
        {title:'Code',data:'Code'},
        {title:'Description',data:'Description', wrap_text:true}
      ]
    
    
    public options:Options = {
        lineClamp:4
      }
    

    Install

    npm i extended-mat-table

    DownloadsWeekly Downloads

    9

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    209 kB

    Total Files

    18

    Last publish

    Collaborators

    • kerrex