4.0.2 • Published 1 month ago

@i-cell/data-table v4.0.2

Weekly downloads
76
License
-
Repository
github
Last release
1 month ago

icell data
table data table npm Build

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:

PackageCommand to installCurrent version
Angular material *npm i @angular/material13.1.3
Angular CDKnpm i @angular/cdk13.1.3
ngx-translatenpm i ngx-translate14.0.0
ngx-webstoragenpm i ngx-webstorage9.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

Important

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.

Note

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

Note

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

AttributeBindingTypeOptionalDefaultDescription
name@Inputstring✔️''Name of the table.
caption@Inputstring✔️''Caption of the table.
dataSource@Inputany[] \| ServerSideDataSource \| MatTableDataSource[]DataSource.
columnSettings@InputDataTableColumnDefinition[]Column settings.
detailTemplate@InputngTemplateRef✔️#defaultTemplateCustom user defined detail view
showDetails@Inputboolean✔️falseFlag indicating to render with detail rows.
hasNoRowsToShowOverlayNoBelow@Inputboolean✔️falseFlag indicating to render no data row in the table or below the table.
useSelection@Inputboolean✔️falseFlag to render with checkboxes for multiselect rows.
hideSelectParameter@Inputstring✔️Parameter name, a row[hideSelectParameter] value will hide / enable the select checkbox on the given row, if used with useSelection.
color@InputThemePalette✔️primaryUse this palette for mat elements.
showColumnMenu@Inputboolean✔️falseFlag to render column menu.
hasSorting@Inputboolean✔️falseFlag to enable sorting.
fixedHeader@Inputboolean✔️falseFlag to have sticky header.
hasExtColMenu@Inputboolean✔️falseFlag to use external column menu.
detailClosedIcon@Inputstring✔️chevron-rightIcon to use for closed details.
detailOpenIcon@Inputstring✔️chevron-downIcon to use for opened details.
sortingNoSort@Inputstring✔️sortIcon to use for no sort active.
sortingAsc@Inputstring✔️sort-ascendingIcon to use for sort ascending.
sortingDesc@Inputstring✔️sort-descendingIcon to use for sort descending.
rowClass@Inputfunction✔️() ⇒ ''Dynamically set per-row CSS class.
evenRowClass@Inputstring✔️Dynamically set even row CSS class.
oddRowClass@Inputstring✔️Dynamically set odd row CSS class.
headerClass@Inputsrting✔️Defines the class used by thead > tr.
detailStickyColumns@Inputboolean✔️If set true the detail row will reflect the same sticky column structure.
rowClick@OutputRowClickEvent✔️Emitted row click event.
cellClick@OutputCellClickEvent✔️Emitted cell click event.
rowKeyDown@OutputRowKeyDownEvent✔️Emitted row onkeydown event.
columnSelectionChange@OutputColumnSelectionEvent✔️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.

4.0.2

1 month ago

4.0.1

1 year ago

4.0.0

2 years ago

3.0.12

2 years ago

3.0.13

2 years ago

3.0.14

2 years ago

3.0.11

2 years ago

3.0.10

2 years ago

3.0.8

2 years ago

3.0.9

2 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

2.0.40

3 years ago

2.0.39

3 years ago

2.0.38

3 years ago

2.0.37

3 years ago

2.0.35

3 years ago

2.0.34

3 years ago

2.0.33

3 years ago

1.0.30

3 years ago

2.0.32

3 years ago

2.0.31

3 years ago

2.0.30

3 years ago

2.0.28

3 years ago

2.0.29

3 years ago

2.0.26

3 years ago

2.0.27

3 years ago

2.0.24

3 years ago

2.0.25

3 years ago

2.0.22

3 years ago

2.0.23

3 years ago

2.0.15

3 years ago

2.0.13

4 years ago

2.0.14

4 years ago

2.0.11

4 years ago

2.0.19

3 years ago

2.0.17

3 years ago

2.0.20

3 years ago

2.0.21

3 years ago

2.0.10

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.3

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

1.0.29

4 years ago

2.0.0

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.5-beta.2

4 years ago

1.0.5-beta.1

4 years ago

1.0.5-beta.0

4 years ago

1.0.4-beta.0

4 years ago

1.0.3-beta.0

4 years ago

1.0.3-beta.1

4 years ago

1.0.1-beta.0

4 years ago

1.0.0

4 years ago