Table ADDON-TABLE
table[tuiTable]
Parent directive that sets the table up.
[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]
Optionally 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.
Only necessary when you are using structural *tuiHead directives.
th[tuiTh]
Used inside the heading to style heading cells.
[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.
[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.
Only necessary when you are using structural *tuiCell directives.
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
Textfield controls inside tuiTd are styled to fit table cells. To keep the default textfield look, use tuiTextfieldAppearance="textfield" on control element.
*tuiHead="key"
Used to define template for heading for particular key
Goes inside tr[tuiThGroup] element inside thead
*tuiCell="key"
Used to define template for cell for particular key
Goes inside tr[tuiTr] element
Taiga UI