@notiz/ngx-tablo

JSON powered material table

Usage no npm install needed!

<script type="module">
  import notizNgxTablo from 'https://cdn.skypack.dev/@notiz/ngx-tablo';
</script>

README

ngx-tablo

npm version

Installation

npm i @notiz/ngx-tablo
<ngx-tablo
  [data]="data"
  [columns]="columnsConfig"
  [showPaging]="true"
  (rowClick)="rowClick($event)"
  (sortChange)="sortChange($event)"
  (pageChange)="pageChange($event)"
></ngx-tablo>
columnsConfig: TabloColumnConfig<PeriodicElement>[] = [
    {
      columnName: 'position',
      header: 'No.',
      cell: (element) => element.position,
      sort: true,
    },
    {
      columnName: 'name',
      header: 'Name',
      cell: (element) => element.name,
    },
    {
      columnName: 'weight',
      header: 'Weight',
      cell: (element) => element.weight,
    },
    {
      columnName: 'symbol',
      header: 'Symbol',
      cell: (element) => element.symbol,
    },
  ];

  rowClick(row: PeriodicElement) {
    console.log(row);
  }

  sortChange(sort: Sort) {
    console.log('sortChange', sort);
  }

  pageChange(page: PageEvent) {
    console.log('pageChange', page);
  }