Data Grid
5.3.1
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.
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. |
npm install @sj-ab/component-library.ui.data-grid
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.
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.
Importer av Data Grid
Repos med Data Grid
Senaste installerade version av Data Grid
Äldsta installerade version av Data Grid