Data table - Headers
Headers are used to define the columns of the table.
Headers and columns
In all of the data-table components, we differentiate between headers and columns. When you use a data-table component, you provide it with headers, which is either a 1- or 2-dimensional array of items describing one or more rows of headers in the table. The columns of a data-table component are a subset of the headers, but is always a 1-dimensional array, and consists of those items that are part of the last row.
Here is a data-table that uses multiple rows of headers to make use of the colspan and rowspan features. The Properties cell is not part of the columns array, because it is not a part of the last row, while the Dessert (100g serving) cell is, because it used rowspan to span both rows.
Examples
Column slot
You can use the dynamic slots column.<key>
to customize only certain columns. <key>
corresponds to the key property in the items found in the headers prop.
There are two built-in slots for customizing both the select (column.data-table-select
) and expand (column.data-table-expand
) columns when using show-select and show-expand props respectively.
Headers slot
You can also override all the internal headers by using the headers
slot. Remember that you will have to re-implement any internal functionality like sorting.