Data Grid

<gstock-data-grid> | GstockDataGrid

API

Properties

Name	Description	Type	Default
`columns`	The columns configuration for the data grid. Each column defines how data should be displayed and behave.	`DataGridColumn[]`	`[]`
`data`	The data rows to be displayed in the grid. Each row should have an ‘id’ property and keys matching column keys.	`DataGridRow[]`	`[]`
`size`	The size variant of the data grid. Affects padding, font sizes, and overall spacing.	`'small' \| 'medium' \| 'large'`	`'medium'`
`striped`	When true, alternating rows will have a different background color for better readability.	`boolean`	`false`
`bordered`	When true, adds borders around the entire grid and between cells.	`boolean`	`false`
`hoverable`	When true, rows will highlight when hovered over with the mouse.	`boolean`	`false`
`compact`	When true, reduces padding and spacing for a more compact layout.	`boolean`	`false`
`selectable`	When true, enables row selection functionality with checkboxes.	`boolean`	`false`
`multiSelect` `multi-select`	When true and selectable is enabled, allows multiple rows to be selected simultaneously.	`boolean`	`false`
`isRowSelectable`	Optional predicate to decide whether a given row can be selected. When set, non-selectable rows are skipped by `selectAll`, ignored by the header checkbox state, and their per-row checkbox is disabled.	`(row: DataGridRow) => boolean \| undefined`	`-`
`sortable`	When true, enables column sorting functionality. Individual columns can override this with their sortable property.	`boolean`	`false`
`filterable`	When true, enables column filtering functionality. Individual columns can override this with their filterable property.	`boolean`	`false`
`resizable`	When true, enables column resizing functionality. Individual columns can override this with their resizable property.	`boolean`	`false`
`paginated`	When true, enables pagination controls and limits the number of rows displayed per page.	`boolean`	`false`
`pageSize` `page-size`	The number of rows to display per page when pagination is enabled.	`number`	`25`
`currentPage` `current-page`	The current page number (1-based) when pagination is enabled.	`number`	`1`
`totalPages` `total-pages`	The total number of pages available. - If set to 0 or not provided: Calculated automatically from data.length and pageSize (virtual pagination) - If set to a value > 0: Used for server-side pagination where data contains only current page items	`number`	`0`
`totalItems` `total-items`	The total number of items across all pages. - If set to 0 or not provided: Calculated automatically from data.length (virtual pagination) - If set to a value > 0: Used for server-side pagination where data contains only current page items	`number`	`0`
`showPageSizeSelector` `show-page-size-selector`	When true, displays a selector for changing the page size in the pagination controls.	`boolean`	`false`
`expandable`	When true, enables row expansion functionality.	`boolean`	`false`
`expandedContentRenderer`	Function to render the expanded content for a row. Receives the row data, row index, and grid columns to allow flexible rendering.	`ExpandedContentRenderer \| undefined`	`-`
`expandOnRowClick` `expand-on-row-click`	When true, allows expanding/collapsing rows by clicking anywhere on the row. When false, expansion is only triggered by clicking the specific expand button element.	`boolean`	`false`
`noHeader` `no-header`	When true, hides the header row containing column titles.	`boolean`	`false`
`loading`	When true, displays a loading state with a progress indicator and hides the data grid content.	`boolean`	`false`
`loadingMessage` `loading-message`	The message to display while the grid is in a loading state.	`-`	`-`
`emptyMessage` `empty-message`	The message to display when the grid has no data to show.	`-`	`-`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties .

Events

Name	React Event	Description	Event Detail
`gstock-data-grid-sort-change-event`	`onGstockDataGridSortChangeEvent`	Fired when the sort state changes.	-
`gstock-data-grid-filter-change-event`	`onGstockDataGridFilterChangeEvent`	Fired when the filter state changes.	-
`gstock-data-grid-selection-change-event`	`onGstockDataGridSelectionChangeEvent`	Fired when the selection state changes.	-
`gstock-data-grid-row-click-event`	`onGstockDataGridRowClickEvent`	Fired when a row is clicked.	-
`gstock-data-grid-row-expand-event`	`onGstockDataGridRowExpandEvent`	Fired when a row is expanded.	-
`gstock-data-grid-row-collapse-event`	`onGstockDataGridRowCollapseEvent`	Fired when a row is collapsed.	-
`gstock-data-grid-cell-click-event`	`onGstockDataGridCellClickEvent`	Fired when a cell is clicked.	-
`gstock-data-grid-column-resize-event`	`onGstockDataGridColumnResizeEvent`	Fired when a column is resized.	-
`gstock-page-change-event`	`onGstockPageChangeEvent`	Fired when the page changes.	-
`gstock-page-size-change-event`	`onGstockPageSizeChangeEvent`	Fired when the page size changes.	-

Learn more about events .

Slots

Name	Description
(default)	The default slot for data grid content.
`toolbar`	Toolbar content displayed above the grid.
`empty`	Content displayed when the grid is empty.
`loading`	Content displayed when the grid is loading.

Learn more about slots .

Methods

Name	Description
`deselectAll( )`	Deselects only the rows visible in the current page. Selections from other pages persist. Use clearSelection() to wipe the full selection.
`clearSelection( )`	Clears the entire selection across all pages.
`selectAllPages( ids: (string \| number)[] , dataById: Map<string \| number, DataGridRow> )`	Adds the given IDs to the selection. Intended for the “select all filtered rows” flow under server-side pagination: the consumer resolves the IDs from its backend (using the active filter) and hands them to the grid. Optional `dataById` lets the consumer also seed the cached row payload for rows that are not present in the current page, so `selectedData` reflects them.
`getHeaderCell( index: number )`	Gets a header cell element by index.
`getSelectionCheckbox( rowIndex: number )`	Gets a selection checkbox element.
`getRow( index: number )`	Gets a row element by index.
`getCell( rowIndex: number , columnIndex: number )`	Gets a cell element by row and column index.

Learn more about methods .

Custom Properties

Name	Description	Default
`--background-color`	Controls the grid background color.
`--border-color`	Controls the grid border color.
`--border-width`	Controls the grid border width.
`--cell-padding`	Controls the padding of grid cells.
`--header-background`	Controls the header background color.
`--row-height`	Controls the default row height.
`--stripe-color`	Controls the alternating row color.

Learn more about custom properties .

CSS Parts

Name	Description
`container`	The component’s container.
`toolbar`	The toolbar container.
`grid-container`	The scrollable container that wraps the grid.
`grid`	The main grid container.
`header`	The header row container.
`header-cell`	Individual header cells.
`body`	The body container.
`row`	Individual row containers.
`cell`	Individual cell containers.
`cell-content`	The inner wrapper that holds the rendered cell value.
`expanded-row`	Expanded row containers.
`expanded-cell`	The cell containing expanded content.
`pagination`	The pagination container.
`pagination-container`	The pagination wrapper container.
`pagination-loading`	The pagination loading indicator.
`selection-checkbox`	Selection checkboxes.
`sort-button`	Sort buttons in headers.
`empty-state`	The empty state container.
`loading`	The loading state container.
`resize-handle`	Column resize handles.

Learn more about CSS parts .