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

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

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

<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

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
  }