All components also accept native properties supported by the DOM, such asclassName and style .

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Theembedded prop adds a border around the table so it can be added as a standalone table and is not required to stretch the full width of its parent container.

Thedensity variant provides three different styles for the data table:

When a height for the data table is set, the scroll bar will appear to the right. However, by default, the column headers will move up and out of view making it difficult to understand what the data means.

This can be mitigated by using thestickyColumnHeaders prop which takes a boolean. This can be toggled within the example below.

Row headers allow headings to be added to individual rows and styles them as column headings. The column collection includes an additionalheader key which aligns with the row headers. The structure of theheader column is the same as the columns (i.e.key ,title ,dataType ).

The data array includes an additionalheader key within therowOptions which takes a string intended to be the title of the row header.

Setsortable totrue to set the sort functionality on all columns. Sorting can be set tounsorted ,ascending anddescending by pressing the sort buttons next to the column heading.

SetdisableAutoSort to enable external sorting functionality. Alternatively, setdisableAutoSort within the column object to have it apply only to certain columns that may require special custom sorting.

It is possible to change the sort options for the sort buttons. ThesortOptions prop takes an object withsortOrders anddefaultColumn .sortOrders allows the sort order to be amended as well as allowing sort types to be removed - such as changing the order todescending andunsorted , and removingascending .defaultColumn sets which column is ordered by default. This is set by putting the column key as thedefaultColumn value.

AddingexcludeColumnFromSort: true to the column object excludes that column from displaying the sort button.

Pagination allows large data sets to be split into pages in order to make the data easier to digest. SettingshowPagination totrue will add the ic-pagination component to the bottom of the table. There are several sub-components within the pagination which are set via thepaginationBarOptions prop:

There may be scenarios when pagination and data fetching is done using a backend API.

To enable this behaviour, thepagination-bar slot can be utilised to provide a customic-pagination-bar component, allowing the user to have more control over how their data is displayed and interacted with.

There may be a requirement to style a column differently to the rest of the data to add emphasis. To do this, addcolumnAlignment to the column, as demonstrated with the 'First name' column below.columnAlignment takes an object which sets thehorizontal andvertical property:

emphasis can be added to the column by settinghigh orlow .

Row overrides allow styling to be applied at a row level and is set within therowOptions object. The following row overrides options apply:

Cell overrides allow styling to be applied at a cell level. The cell which requires an override accepts an object which requiresdata and can containcellAlignment and/oremphasis :

When the table receives no data (eithernull or an empty array), it will automatically show anic-empty-state below the headers.

You can customise your own ic-empty-state component and slot it into the data table using theempty-state slot, to reflect different scenarios.

When a user wants to fetch their data asynchronously, aloading prop can be set totrue , which then renders a circular variant of the ic-loading-indicator .

The loading indicator can be customised using theloadingOptions prop:

If it needs to be determinate, usemax ,min andprogress .

If data in the table has changed, anupdating prop has been supplied to show a linearic-loading-indicator just above the data rows.

This prop is also accompanied by anupdatingOptions prop, which contains similar options toloadingOptions , minuslabel andlabelDuration .

Custom HTML elements can be slotted or passed via thedata prop to display in certain cells. When using the slotted method, the slot name follows the format of{COLUMN_TAG}-{ROW_INDEX} .

Custom icons can be added to cells, columns and headers in the data table. To add it to headers, set the icon via thecolumns prop:

To add icons to individual cells, they can be added through thedata prop, in a similar method to overriding the cell. Cell icons take priority over theonAllCells prop, meaning specific cells can be made to stand out.

Both cells and headers can also have icons slotted in. Cells use the slot format:{COLUMN_KEY}-{ROW_INDEX}-icon , and headers use the format:{COLUMN_KEY}-column-icon . Slotted icons take priority over icons inserted via thecolumns anddata props.

A data table can have its rows use custom heights, to help display more data per row. This involves using theglobalRowHeight prop, which applies this custom height to all rows.

For a more granular approach,variableRowHeight exists. This is passed through the data object for each row of data, as well as that row'sindex . Using these properties, you can write a custom function that will return a number for that row's height based on your criteria. Returningnull from this function means that the row will use theglobalRowHeight property value.

NOTE: If the data table uses thedensity prop, then your custom value will be scaled depending on the density, in order to keep content readable as the text size changes:

For example, ifglobalRowHeight = 100, a dense table will set the height to be 80 .

NOTE: If a cell has a description (see Description and icons within cells ), then the row height for that individual row will be increased by the description height in order to fully display it.

For example, ifglobalRowHeight = 100 and a cell has a description with a height of 20, then the row height for that cell's row will be set to 120 .

To quickly reset all row heights to the default, you can run theresetRowHeights method.

If you would rather let the row calculate its own height based on its content, either setglobalRowHeight toauto , or returnauto fromvariableRowHeight .

To add additional information about the data held in your data table, you can use thetitle-bar slot to add anic-data-table-title-bar , which will appear above the column headers.

The title bar can have a description and metadata added, to provide supporting information to display some context about the data to the user. Primary and custom action slots also exist to allow for actions to be performed that are related to the data, which can be prominently displayed.

Theic-data-table-title-bar has a built-in density selector, which allows a user to quickly change the size and padding of cells to make it more readable. This can also be hidden if preferred.

When a row is given a set height, and has content that no longer fits into the cell area, the content becomes truncated. There are two types of truncation:

These values are set using thetruncationPattern prop.

By default,globalRowHeight is set toauto . If thetruncationPattern prop is set totooltip orshow-hide whileglobalRowHeight isauto , the data will not appear truncated due to the row height being set to the height of the tallest data row.

To see the data truncated, theglobalRowHeight orvariableRowHeight needs to be explicitly set to a height which is shorter than data which has the most lines.

NOTE: truncationPattern only applies to a cell's main data value. If a cell has a description (see Description and icons within cells ) then this will not be truncated and will still be visible beyond the truncation.

Text can be set to wrap in a particular column, row or cell. Any column, row or cell that text wrap is applied to will ignore the custom height if the custom height is too small and the full content will be shown.

To set text to wrap in a column, addtextWrap: true as a key value:

To set text to wrap in a row, addrowOptions: { textWrap: true } to an object within the data array:

To set text wrap in a cell, addtextWrap to a data key within an object:

The dimensions of the data table can be set using thewidth andheight attributes. The attribute accepts dimensions inpx ,% ,rem andauto .

By default, the width is set to100% so the table spans across the viewport or parent container.

To set the column widths, thecolumnWidth property should be added to the relevant column within the column array.

The table layout attribute is vital to how the table resizing and column widths behave.

By default, the table layout is set tofixed . If no column width is set, the columns widths will be equally set within the viewport or parent container.

A table with afixed layout will force the table column widths to take precedence over the data with the table cells.

For the column widths to be dictated by the content inside, set thetableLayout prop toauto and set the tablewidth toauto .

To set the min and max width of a table cell, set thetableLayout prop toauto and set aminWidth ormaxWidth value incolumnWidth .minWidth andmaxWidth accept dimensions inpx ,% ,rem .

Descriptions and icons can be included in the cells by proving adescription field in the data. This will populate the cell with an icon (if provided) and a text string underneath the cell data. This can be applied to any cell.

You can provide adescription object with or without an icon:

If cell data is missing (represented as eithernull ,undefined or"" ) then the data table will still render an empty placeholder cell.

By settingrowSelection totrue , ic-checkbox elements will appear in the leftmost column, with one in the header. When checked, the corresponding row will be selected, with theicSelectedRowChange containing the selected row and an array of all the currently selected rows.

When checking the header checkbox, all rows will be selected, with theicSelectAllRows event being emitted with an array of all the rows. When using pagination, only the rows on the current page will be selected.

Addinghidden: true to the column object hides that column. In this example, the Quantity column is hidden.