Data Grid

Allows users to interact with data in a tabular format.

Use the Data Grid Row and Data Grid Cell sub-components inside of Data Grid's default slot to construct the tabular data like you would using tr and td tags inside of a table element.

A grid header can be provided by setting:

• row-type attribute on Data Grid Row to header or sticky-header (for a header that stick to the top while the body is scrollable)
• cell-type on Data Grid Cells to columnheader

Use the grid-template-columns attribute to set the width of the grid columns.

Values match the CSS grid-template-columns property.

Use the fixed-columns attribute to set the number of the fixed grid columns. These columns will remain fixed to the left edge of the grid when scrolling horizontally.

Use the selection-mode attribute to specify the how cells or rows can be selected.

• none (default) - cells or row can not be selected
• single-cell - one cell can be selected
• multi-cell - multiple cells can be selected by holding the SHIFT key
• single-row - one row can be selected
• multi-row - multiple rows can be selected by holding the SHIFT key

Use the aria-selected attribute to indicate that the selected state of the row or cell.

Use the sort-direction attribute on a columnheader cell to indicate the sortable state of a header cell. This will add the right chevron(s) according to the state.

• ascending - Items are sorted in ascending order by this column. Will show one chevron pointing up.
• descending - Items are sorted in descending order by this column. Will show one chevron pointing down.
• none - There is no defined sort applied to the column. Will show indeterminate state with the two chevrons.
• other - A sorting algorithm other than ascending or descending has been applied. Will show no hint.