Installation

npm i @i-cell/data-table

Requirements

The table supports Angular v13.1.3 currently.

In order to use the table, you need to install these dependencies:

| Package | Command to install | Current version | | ------------------- | ------------------------- | --------------- | | Angular material * | npm i @angular/material | 13.1.3 | | Angular CDK | npm i @angular/cdk | 13.1.3 | | ngx-translate | npm i ngx-translate | 14.0.0 | | ngx-webstorage | npm i ngx-webstorage | 9.0.0 |

*if you need to add Angular Material to an existing project, make sure to load the required material palettes in your styles.scss for the Material theme as well. For example:

@import '~@angular/material/theming';

@include mat-core();
$candy-app-primary: mat-palette($mat-deep-purple);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);

$candy-app-theme: mat-light-theme(
    $candy-app-primary,
    $candy-app-accent,
    $candy-app-warn
);

@include angular-material-theme($candy-app-theme);

Usage

Configuration

The table uses materialdesignicons svg icon, you will need to download the latest mdi.svg from here. Place the downloaded svg inside the assets/ folder of your application.

If you structure your assets/ folder in a specific way, you have the option to set the path of the svg, while you import the module.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DataTableModule } from '@icell/widget-data-table';
import { MatTableModule } from '@angular/material/table';
import { TranslateModule } from '@ngx-translate/core';
import { NgxWebstorageModule } from 'ngx-webstorage';
...

const pathToSvg: string = 'assets/path-to-svg/mdi.svg';

@NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule
    DataTableModule.forRoot(pathToSvg),
    MatTableModule,
    TranslateModule.forRoot(),
    NgxWebstorageModule.forRoot(),
    ...
  ],
  ...
})
export class Module {
  ...
}

General

Column settings

The template field can have the following values:

• 'labelTemplate'

• 'labelBoldTemplate'

• 'numericTemplate'

• 'iconTemplate'

• 'componentTemplate'

some.ts.

...
this.columnSettings: DataTableColumnDefinition[] = [
  {
    field: 'atomicNumber',
    label: 'position',
    sortable: true,
    hideable: true,
    visible: true,
    columnClass: 'table__atomic-numbers_bold',
  },
  {
    field: 'type',
    label: 'Item type',
    valueFormatter: (type) => ('ITEM_TYPES.' + type)
    sortable: true,
    hideable: true,
    visible: true,
  },
  {
    label: 'name',
    sortable: true,
    template: 'labelBoldTemplate',
    hideable: true,
    visible: true,
    identifier: true,
  },
  {
    label: 'weight',
    valueGetter: (item) => (item.type === 'NET' ? item.netWeight : item.grossWeight)
    template: 'numericTemplate',
    sortable: true,
    hideable: true,
    visible: true,
  },
  {
    field: 'symbol',
    label: 'symbol',
    sortable: true,
    hideable: true,
    visible: true,
  },
  {
    field: 'actions',
    label: 'actions',
    sortable: false,
    hideable: false,
    visible: true,
    stickyEnd: true,
    template: 'componentTemplate',
    component: RowActionComponent,
    componentOptions: {
      inputs: {
        // In RowActionComponent: `@Input() icon: string;`
        icon: 'details'
      },
      outputs: {
        // In RowActionComponent: `@Output() clicked = new EventEmitter<RowDataType>();`
        clicked: (rowData: RowDataType) => {
          // Do something
        }
      }
    }
  },
];
...

Table settings

| Attribute | Binding | Type | Optional | Default | Description | | ----------------------------- | --------- | ----------------------------------------------------- | -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | name | @Input | string | ✔️ | '' | Name of the table. | | caption | @Input | string | ✔️ | '' | Caption of the table. | | dataSource | @Input | any[] \| ServerSideDataSource \| MatTableDataSource | ❌ | [] | DataSource. | | columnSettings | @Input | DataTableColumnDefinition[] | ❌ | | Column settings. | | detailTemplate | @Input | ngTemplateRef | ✔️ | #defaultTemplate | Custom user defined detail view | | showDetails | @Input | boolean | ✔️ | false | Flag indicating to render with detail rows. | | hasNoRowsToShowOverlayNoBelow | @Input | boolean | ✔️ | false | Flag indicating to render no data row in the table or below the table. | | useSelection | @Input | boolean | ✔️ | false | Flag to render with checkboxes for multiselect rows. | | hideSelectParameter | @Input | string | ✔️ | | Parameter name, a row[hideSelectParameter] value will hide / enable the select checkbox on the given row, if used with useSelection. | | color | @Input | ThemePalette | ✔️ | primary | Use this palette for mat elements. | | showColumnMenu | @Input | boolean | ✔️ | false | Flag to render column menu. | | hasSorting | @Input | boolean | ✔️ | false | Flag to enable sorting. | | fixedHeader | @Input | boolean | ✔️ | false | Flag to have sticky header. | | hasExtColMenu | @Input | boolean | ✔️ | false | Flag to use external column menu. | | detailClosedIcon | @Input | string | ✔️ | chevron-right | Icon to use for closed details. | | detailOpenIcon | @Input | string | ✔️ | chevron-down | Icon to use for opened details. | | sortingNoSort | @Input | string | ✔️ | sort | Icon to use for no sort active. | | sortingAsc | @Input | string | ✔️ | sort-ascending | Icon to use for sort ascending. | | sortingDesc | @Input | string | ✔️ | sort-descending | Icon to use for sort descending. | | rowClass | @Input | function | ✔️ | () ⇒ '' | Dynamically set per-row CSS class. | | evenRowClass | @Input | string | ✔️ | | Dynamically set even row CSS class. | | oddRowClass | @Input | string | ✔️ | | Dynamically set odd row CSS class. | | headerClass | @Input | srting | ✔️ | | Defines the class used by thead > tr. | | detailStickyColumns | @Input | boolean | ✔️ | | If set true the detail row will reflect the same sticky column structure. | | rowClick | @Output | RowClickEvent | ✔️ | | Emitted row click event. | | cellClick | @Output | CellClickEvent | ✔️ | | Emitted cell click event. | | rowKeyDown | @Output | RowKeyDownEvent | ✔️ | | Emitted row onkeydown event. | | columnSelectionChange | @Output | ColumnSelectionEvent | ✔️ | | Emitted column selection event. |

Important: since Ivy, the order of the properties matter. Try to set up flags first, and more complex parameters later. (e.g. showDetails before dataSource)

some.html.

<ic-data-table
  [name]="'table'"
  [columnSettings]="columnSettings"
  [detailTemplate]="detailTemplate"
  [showDetails]="showDetails"
  [useSelection]="useSelection"
  [showColumnMenu]="showColumnMenu"
  [hasSorting]="hasSorting"
  [fixedHeader]="fixedHeader"
  [dataSource]="dataSource"
  (rowClick)="rowClick($event)"
  (cellClick)="cellClick($event)"
  (columnSelectionChange)="columnSelectionChange($event)"
></ic-data-table>

Table functions

You can call the following functions directly after selecting the table with @ViewChild(DataTableComponent, { static: true }):

• expandAll() : Opens up all details, if provided

• collapseAll(): Closes every opened detail view

Custom Sorting

The table contains a built-in, custom, MatSort-based sorting for client- and serverside as well. It’s plugged in onto the datasource of the table (which you can provide). If you wish to overwrite it (for instance, use your own DataSource and a query-based sorting), you can use the following code to modify or remove the default sorting mechanism:

this.yourCustomDatasource.sortData = (data: any[], sort: MatSort) => {
      console.log("sort information: ", sort);
      // implement your sort logic here
    };

DataSource configuration

some.server-side-datasource.ts.

...
this.data = new ServerSideDataSource(
  this.getStaticData.bind(this),
  'list',
  this.paginationParams,
  this.table.sort,
  this.table.rowSelection,
  this.paginatorIntl,
  this.cdRef,
  this.withDetail,
  false
);
...

some.client-side-datasource.ts.

...
this.data = new MatTableDataSource([]);
...

Localization

For translation we utilize @ngx-translate.

• ICELL_DATA_TABLE.SORT_BUTTON_LABEL used for localizing

  • uses 2 input properties:

    • id represents the columns locale_key

    • direction:

      • ICELL_DATA_TABLE.SORT_NONE used if no sort is set

      • ICELL_DATA_TABLE.SORT_ASC used if sort is ascending

      • ICELL_DATA_TABLE.SORT_DESC used if sort is descending

{
  ...
  "ICELL_DATA_TABLE": {
    "SORT_BUTTON_LABEL": "Change sorting for {{id}}, {{direction}}.",
    "SORT_NONE": "no sorting",
    "SORT_ASC": "sorting ascending",
    "SORT_DESC": "sorting descending",
    "NOROWSTOSHOW": "No data present.",
    "EMPTY_CELL": "-"
  }
  ...
}

Examples

Live StackBlitz example

StackBlitz reference implementation can be found here.

Run example project

Delete the one line (//registry.npmjs.org/:_authToken=${NPM_TOKEN}) from .npmrc file in your project, if you want to build on a local environment.

# Build and pack a local version
npm run pack
# Switch directories
cd ./examples/icell-data-table-example/
# Edit the package.json to have the proper path to the tgz
#   "@i-cell/data-table": "file:../../i-cell-data-table-<version>.tgz",
# Install dependencies
npm i
# Start up the example
npm start

If no issues emerge the application should up and running, so you can start to experiment.