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
1MoacyrSalesBostonWeb Designer2030Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png2MoacyrSalesRedmondAccountant2015Offlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png3JaissonTechnical SupportKirklandSales Manager2040Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png4JaissonDevelopment SectorKirklandTechnical Support2050Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png5SilvioDevelopment SectorLondonWeb Designer1999Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png6AnneSalesSeattleAccountant2030Offlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png7LauraFinanceNew YorkVice President, Sales1999Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png8MoacyrReceptionPhiladelphiaAccountant2005Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png9LauraDevelopment SectorBostonVice President, Sales2035Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png10JaissonAnalytic QualityLondonVice President, Sales2050Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png11SilvioFinanceBostonVice President, Sales1998Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png12NigeSalesLondonSales Representative2012Offlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png13NigeSalesTacomaTechnical Support2032Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png14JaissonReceptionRedmondAccountant1980Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png15SilvioReceptionBostonTechnical Support2030Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png16MoacyrFinanceTacomaSoftware Developer2035Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png17JaissonDevelopment SectorBostonTechnical Support2032Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png18AnneSalesLondonTechnical Support1998Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png19AdilsonSalesSeattleAccountant2000Offlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png20NigeDevelopment SectorRedmondVice President, Sales2035Offlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png21LauraTechnical SupportLondonSales Manager2012Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png22MaiconReceptionKirklandSales Representative1970Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png23WilliamReceptionLondonSoftware Developer1980Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png24JaissonTechnical SupportBostonWeb Designer2020Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png25MaiconSalesRedmondSales Representative2005Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png26AnneSalesPhiladelphiaSoftware Developer2012Awayhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png27AdilsonFinanceLondonAccountant1975Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png28LauraFinanceTacomaSales Manager2012Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png29MarcioSalesPhiladelphiaSoftware Developer2012Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png30MaiconSalesRedmondAccountant2012Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png31WilliamTechnical SupportPhiladelphiaAccountant2030Busyhttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png32JaissonAnalytic QualityTacomaWeb Designer2005Onlinehttps://cdn2.iconfinder.com/data/icons/avatar-2/512/oscar_boy-256.png

<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
NameTypeDefaultDescriptionOptions
allowFilterColumnbooleanfalseAllows you to filter by columns. true | false
allowResizebooleanfalseAllows you to resize table columns. true | false
dataArraynullAn array of objects to display. [.. , ..]
dataobjectnullAn object with the data and total number of records. { data:[ .. , ..], total: 1000 }
globalFilteranynullReference of an input field to use as a global filter. any input<html>
globalFilterOptionsobjectnullGlobal filter settings. mode | caseSensitive
globalFilterOptions.caseSensitivebooleanfalseGlobal filter caseSensitive false | true
globalFilterOptions.modestringcontainsGlobal filter mode startsWith | endsWith | contains
heightnumber300Height(In Pixel) of the scroll viewport. any number
modestringnormalDefine how the datatable works. normal | scrollable | paginator
rowHeightnumber25Height of each table row. any number
rowModelstringinmemmoryData is loaded and interacted in InMemory or Infinite Mode. inmemory | infinite
rowsClientnumber10Number of records you want to view at one time. any number
rowsPagenumber20Number of rows to display per page. any number
widthnumber300Width(In Pixel) of the scroll viewport. any number
Events
NameParametersDescription
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.