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 * |
|
13.1.3 |
Angular CDK |
|
13.1.3 |
ngx-translate |
|
14.0.0 |
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);
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 {
...
}
Property | Type | Optional | Default | Description |
---|---|---|---|---|
field |
|
❌ |
Path to field that should be rendered. |
|
orderName |
|
✔️ |
Custom ordering parameter. |
|
valueFormatter |
|
✔️ |
Callback to transform the cell’s data. |
|
valueGetter |
|
✔️ |
Callback to transform the row model. |
|
label |
|
✔️ |
'' |
Column label; can be a localization key. |
hideable |
|
✔️ |
false |
Defines if the column is hideable. |
visible |
|
✔️ |
true |
Defines if the column is visible. If used with hideable, the column will be in the column menu unchecked. |
actionColumn |
|
✔️ |
Defines if the column is for actions. |
|
sortable |
|
✔️ |
true |
Defines if the column should be sortable. |
sticky |
|
✔️ |
Defines if the column should be sticky at the begining of the table. |
|
stickyEnd |
|
✔️ |
Defines if the column should be sticky at the end of the table. |
|
template |
|
✔️ |
|
Defines how the cell should be rendered. If |
component |
any |
✔️ |
Defines what component to use to render the cell. Use with |
|
componentOptions |
ComponentOptions |
✔️ |
Provide input, output bindings for the component rendered in the cell. Use with |
|
parent |
any |
✔️ |
Defines what component to use to render the cell. Use with |
|
identifier |
boolean |
✔️ |
Defines if the cell should render as header for a11y reasons. |
|
columnClasses |
boolean |
✔️ |
Defines custom |
|
cellClasses |
boolean |
✔️ |
Defines custom |
|
sortButtonAriaLabel |
string |
✔️ |
Custom aria label for sort button. |
Note
|
The
|
...
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
}
}
}
},
];
...
Attribute | Binding | Type | Optional | Default | Description |
---|---|---|---|---|---|
name |
|
|
✔️ |
|
Name of the table. |
caption |
|
|
✔️ |
|
Caption of the table. |
dataSource |
|
|
❌ |
|
DataSource. |
columnSettings |
|
|
❌ |
Column settings. |
|
detailTemplate |
|
|
✔️ |
|
Custom user defined detail view |
showDetails |
|
|
✔️ |
|
Flag indicating to render with detail rows. |
hasNoRowsToShowOverlayNoBelow |
|
|
✔️ |
|
Flag indicating to render no data row in the table or below the table. |
useSelection |
|
|
✔️ |
|
Flag to render with checkboxes for multiselect rows. |
hideSelectParameter |
|
|
✔️ |
Parameter name, a row[hideSelectParameter] value will hide / enable the select checkbox on the given row, if used with useSelection. |
|
color |
|
|
✔️ |
|
Use this palette for mat elements. |
showColumnMenu |
|
|
✔️ |
|
Flag to render column menu. |
hasSorting |
|
|
✔️ |
|
Flag to enable sorting. |
fixedHeader |
|
|
✔️ |
|
Flag to have sticky header. |
hasExtColMenu |
|
|
✔️ |
|
Flag to use external column menu. |
detailClosedIcon |
|
|
✔️ |
|
Icon to use for closed details. |
detailOpenIcon |
|
|
✔️ |
|
Icon to use for opened details. |
sortingNoSort |
|
|
✔️ |
|
Icon to use for no sort active. |
sortingAsc |
|
|
✔️ |
|
Icon to use for sort ascending. |
sortingDesc |
|
|
✔️ |
|
Icon to use for sort descending. |
rowClass |
|
|
✔️ |
|
Dynamically set per-row CSS class. |
evenRowClass |
|
|
✔️ |
Dynamically set even row CSS class. |
|
oddRowClass |
|
|
✔️ |
Dynamically set odd row CSS class. |
|
headerClass |
|
|
✔️ |
Defines the class used by |
|
detailStickyColumns |
|
|
✔️ |
If set true the detail row will reflect the same sticky column structure. |
|
rowClick |
|
|
✔️ |
Emitted row click event. |
|
cellClick |
|
|
✔️ |
Emitted cell click event. |
|
rowKeyDown |
|
|
✔️ |
Emitted row onkeydown event. |
|
columnSelectionChange |
|
|
✔️ |
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
)
<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>
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
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
};
...
this.data = new ServerSideDataSource(
this.getStaticData.bind(this),
'list',
this.paginationParams,
this.table.sort,
this.table.rowSelection,
this.paginatorIntl,
this.cdRef,
this.withDetail,
false
);
...
...
this.data = new MatTableDataSource([]);
...
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": "-"
}
...
}
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.