Data Grid

Allows users to interact with data in a tabular format.

In order for the select popup to show correctly in the grid, use the fixed-dropdown attribute on the select inside grid cells.

In order for a grid column to show as sortable, use the sort-direction attribute on the sortable column header.

Here's an example of sorting when building the grid manually:

Here's an example of sorting the data-grid when building it with rowsData:

If your cell contains a focusable child element that you would like to delegate focus to, use the cellFocusTargetCallback of the column definition to return the child element. It will now take focus instead of the cell.

If you cell contains multiple focusable elements or elements that require arrow keys to operate, combine this will cellInternalFocusQueue of the column definition. This will allow users to press Enter or F2 when the cell has focus to move focus into the cell and operate the elements as usual.

You can add and remove rows dynamically by manipulating the rowsData.

Data grid supports selecting cells and rows by setting selection-mode attribute to one of single-row, multi-row, single-cell or multi-cell. If you want to turn off selection, set it to none or remove the attribute.

Use a control / command key to select multiple rows.

Use a control / command key to select multiple rows.