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.

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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub