Data Grid

5.3.13

Data Grids display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

Namn	Typ	Beskrivning
actionButtons		Action buttons for the data grid, either a static array or a function returning an array based on selected rows.
autoHeight	`boolean`	If true, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
checkboxColumnWidth	`number`	Width of the checkbox column.
checkboxes	`boolean`	If true, a checkbox column will be added to the grid.
columns *	`DataGridColumnProps[]`	Set of columns of type DataGridColumnProps<T>.
contextMenu	`DataGridRowActionMenuType`	Context menu configuration for each row, either as a static menu or a function returning a menu based on the row data.
disableSelectionOnClick	`boolean`	If true, the grid will not trigger row selection on click.
elevation	`"undefined" \| "1" \| "2"`	Elevation of the chip. Used primarily in dark mode to handle modals and layers.
fillHeight	`boolean`	If true, the grid will fill the height of the parent container.
fillHeightMinHeight	`number`	Minimum height of the grid when fillHeight is true.
fillHeightOffset	`number`	Offset of the grid when fillHeight is true.
filters	`FilterModel[]`	Filters for the data grid.
height	`string \| number`	Height of the data grid.
hoverMenuItems		Hover menu items, either a static array or a function returning items based on row data.
lang *	`string`	Language used for internal translations.
maxHeight	`string \| number`	Maximum height of the data grid.
negativeMargins	`boolean`	Negative horizontal margins.
onRowMouseOver	`(row: undefined \| T) => void`	Callback function that is triggered when a row is hovered over.
pagination	`boolean`	If true, pagination is enabled.
quickFilterExcludeHiddenColumns	`boolean`	If `false`, the quick filter will also consider cell values from hidden columns.
quickFilterValues	`unknown[]`	Values used for quick filtering the data grid.
width	`string \| number`	Width of the data grid.

Installation

npm install @sj-ab/component-library.ui.data-grid

Länkar

Best practices

MUI X-licens

För att använda vår DataGrid-komponent i en produktionsmiljö krävs en giltig kommersiell MUI X-licens (antingen Pro eller Premium). Utan en aktiv licens kommer användare att stöta på vattenstämplar och varningar i konsolen, vilket kan försämra användarupplevelsen

Tillgänglighet

Data Grid har i nuläget kända tillgänglighetsproblem för användare med hjälpmedel och måste användas med försiktighet.

Fokusmarkeringar

Komponenter och element som används i Data Grid kan vara i behov av anpassade fokusmarkeringar – läs mer här: Bra att veta om fokusmarkeringar.