Grid

import { Grid } from '@enmovil/ui-design-system';

A data grid for large or complex tables, with sorting, filtering, pagination and row selection. It can show a label and buttons that export the data to CSV or Excel.

Properties

Property	Type	Required	Default	Allowed values	Description
sideBar	string | boolean | string[] | SideBarDef | null	No	—	—	Shows a side panel for choosing columns and setting filters. true shows the default panels; an object or panel name configures them.
suppressContextMenu	boolean	No	—	—	Turns off the grid's right-click menu.
allowContextMenuWithControlKey	boolean	No	—	—	Shows the browser's own context menu instead of the grid's when the user right-clicks with Ctrl held.
clipboardDelimiter	string	No	—	—	Character placed between cells when copying to the clipboard. Defaults to a tab.
columnDefs	any[] | (ColDef<any, any> | ColGroupDef<any>)[] | null	No	[]	—	Array of Column / Column Group definitions.
defaultColDef	ColDef<any, any>	No	—	—	Column settings applied to every column, such as sortable, filter or resizable. Settings in columnDefs override them.
autoSizeStrategy	SizeColumnsToFitGridStrategy | SizeColumnsToFitProvidedWidthStrategy | SizeColumnsToContentStrategy | "fitGridWidth" | "fitCellContents"	No	'fitGridWidth'	—	Auto-size the columns when the grid is loaded. Can size to fit the grid width, fit a provided width, or fit the cell contents. @initial
pagination	boolean	No	—	—	Splits the rows into pages with a paging bar below the grid. Off by default.
paginationPageSize	number	No	—	—	Number of rows per page. Defaults to 100. Requires pagination.
paginationPageSizeSelector	boolean | number[]	No	—	—	Page sizes offered in the paging bar, for example [10, 20, 50, 100]. false hides the selector. Requires pagination.
animateRows	boolean	No	—	—	Animates rows as they move after sorting, filtering or grouping.
groupDisplayType	string	No	—	'singleColumn', 'multipleColumns', 'groupRows', 'custom'	How grouped rows are shown: singleColumn (one group column, the default), multipleColumns (one column per grouping level), groupRows or custom.
rowModelType	string	No	—	'infinite', 'viewport', 'clientSide', 'serverSide'	Where rows come from: clientSide (the default, from rowData), infinite (loaded in blocks from datasource as the user scrolls), serverSide or viewport.
rowData	any[] | null	No	[]	—	Set the data to be displayed as rows in the grid.
datasource	IDatasource	No	—	—	Object whose getRows(params) loads a block of rows and passes them to params.successCallback. Requires rowModelType infinite.
cacheBlockSize	number	No	—	—	Number of rows loaded per request from datasource. Defaults to 100.
rowSelection	string	No	—	'multiple', 'single'	Lets users select rows by clicking them, one at a time (single) or several (multiple).
enableRangeSelection	boolean	No	—	—	Lets users select a block of cells by dragging, for copying to the clipboard.
theme	string	No	'light'	'light', 'dark'	Colour scheme of the grid. Defaults to light; any other value gives the dark scheme.
loading	boolean	No	false	—	Shows skeleton placeholders instead of the data: six rows, every cell a skeleton. Without columnDefs it also shows five skeleton columns.
autoHeight	boolean	No	true	—	Makes the grid as tall as its rows, so it never scrolls vertically. Defaults to true; set it to false to use height.
height	string | number	No	500	—	Height of the grid, in pixels when a number or any CSS length. Defaults to 500. Requires autoHeight to be false.
enableExport	boolean	No	false	—	Shows Export CSV and Export Excel buttons above the grid, which download the grid's data.
label	string	No	—	—	Title shown above the grid, to the left of the export buttons.
size	string	No	'normal'	'small', 'normal'	Row and header density. small uses shorter rows and a smaller font; defaults to normal.

Other attributes

Grid passes 387 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onFilterChanged	((event: FilterChangedEvent<any, any>) => void)	Fires when a column filter changes.
onCellClicked	((event: CellClickedEvent<any, any>) => void)	Fires when a cell is clicked.
onCellFocused	((event: CellFocusedEvent<any, any>) => void)	Fires when keyboard or mouse focus moves to a cell.
onCellMouseOver	((event: CellMouseOverEvent<any, any>) => void)	Fires when the pointer enters a cell. Useful for hover previews.
onCellMouseOut	((event: CellMouseOutEvent<any, any>) => void)	Fires when the pointer leaves a cell.
onRowClicked	((event: RowClickedEvent<any, any>) => void)	Fires when a row is clicked. Use it to open a detail view.
onRowDoubleClicked	((event: RowDoubleClickedEvent<any, any>) => void)	Fires when a row is double-clicked.
onSelectionChanged	((event: SelectionChangedEvent<any, any>) => void)	Fires when the selected rows change. Requires rowSelection.
onSortChanged	((event: SortChangedEvent<any, any>) => void)	Fires when the sort order changes.

Children

Grid does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Grid in Storybook to try every story with the full set of controls.