Table ADDON-TABLE

Examples API Setup
Source code

table[tuiTable]

Parent directive that sets the table up.

Name and descriptionType
[columns]
An array of keys to set up columns order
readonly string[]
[size]
Cells size
TuiSizeS  |  TuiSizeL
[(sorter)]
Sort function (basic JavaScript array sort API)
TuiComparator<T>
[(direction)]
Direction for sorting
1  |  -1

thead[tuiThead]

Used on thead to make it sticky


tr[tuiThGroup]

Used inside thead to layout headings for the columns. You can have multiple rows and use rowSpan on th elements if you want to create some complex heading for your table.


th[tuiTh]

Used inside tr[tuiThGroup] to style heading cells.

Name and descriptionType
[resizable]
Makes this column resizable
boolean
[sorter]
Sorter function for this column
TuiComparator<T>  |  null
[sticky]
Makes heading cell horizontally sticky
boolean

tbody[tuiTbody]

Sets up a group of data. You can have multiple tbody inside your table.

Name and descriptionType
[data]
Data to display
readonly T[]
[heading]
Optional heading content for the group that makes it collapsable
PolymorpheusContent
[(open)]
Open/collapsed state of the group
boolean

tr[tuiTr]

Used inside tbody to layout cells.


td[tuiTd] or th[tuiTd]

A cell directive to be placed in tr of tbody . Use it on th if you want to make a sticky column