Overview Module Name: DatatableModule
Module Name: DatatableModule
The DataTable displays data in a tabular format and provides a full spectrum of configuration options.
Showcase
ID | FIRSTNAME | LASTNAME | CITY | TITLE | YEAR | STATUS | AVATAR |
---|---|---|---|---|---|---|---|
<tl-datatable
[data]="data"
[contextMenuItems]="contextMenu"
[allowResize]="true"
[allowFilterColumn]="true"
[mode]="'scrollable'"
[height]="357"
[recordsCount]="100"
(rowDblclick)="onRowDbClick( $event )"
(rowClick)="onRowClick( $event )"
(rowSelect)="onRowSelect( $event )"
(sortData)="onSortData($event)"
(filterData)="onFilterData($event)">
</tl-datatable>
Datatable Features
Row Models
Lets you work with a small or large mass of data.
Scrolling
Allows horizontal and vertical scrolling in both Paginator and Scrollable mode.
Column Manipulation
Column Reordering & Resizing in all modes, normal, paginator and scrollable.
Cliente or Server Processing
Row Model Allow Client or Server side Pagination, Sorting & Filtration.
Elastic Column
Intelligent Column Width Algorithms which allow you to resize the table automatically.
Perfomatic Navigation
Allows you to navigate via the Keyboard( ArrowDown, ArrownUP, Home, End, etc).
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
allowFilterColumn | boolean | false | Allows you to filter by columns. | true | false |
allowResize | boolean | false | Allows you to resize table columns. | true | false |
data | Array | null | An array of objects to display. | [.. , ..] |
data | object | null | An object with the data and total number of records. | { data:[ .. , ..], total: 1000 } |
globalFilter | any | null | Reference of an input field to use as a global filter. | any input<html> |
globalFilterOptions | object | null | Global filter settings. | mode | caseSensitive |
globalFilterOptions.caseSensitive | boolean | false | Global filter caseSensitive | false | true |
globalFilterOptions.mode | string | contains | Global filter mode | startsWith | endsWith | contains |
height | number | 300 | Height(In Pixel) of the scroll viewport. | any number |
mode | string | normal | Define how the datatable works. | normal | scrollable | paginator |
rowHeight | number | 25 | Height of each table row. | any number |
rowModel | string | inmemmory | Data is loaded and interacted in InMemory or Infinite Mode. | inmemory | infinite |
rowsClient | number | 10 | Number of records you want to view at one time. | any number |
rowsPage | number | 20 | Number of rows to display per page. | any number |
width | number | 300 | Width(In Pixel) of the scroll viewport. | any number |
Events
Name | Parameters | Description |
---|---|---|
dataChange | event.skip : First row offset event.take : Number of rows per page | Callback to invoke when paging, sorting or filtering happens in infinite mode. |
endRow | event.endRow : End line number | Callback to invoke when the scroll or selection arrives on the last line |
filterData | event.filters : Data from the filter that was created | Callback to invoke when Data from the filter that was created. |
pageChange | event.page : Current page number | Callback to invoke when pagination occurs. |
rowClick | event.row : Selected data event.index : index of Selected data | Callback to invoke when a row is clicked. |
rowDblclick | event.row : Selected data event.index : index of Selected data | Callback to invoke when a row is double clicked. |
rowSelect | event.row : Selected data event.index : index of Selected data | Callback to invoke when a row is selected. |
sortData | event.sorts : Ordering data that was created | Callback to invoke when ordering data that was created. |