Data Grid

Overview

Data grids are used to organize and display data efficiently. The data grid component allows for customization with additional functionality, as needed by users.

When to use:

To organize and display data.
If your user must navigate to a specific piece of data to complete a task.
Displaying all of a user’s resources.

Demo

Select Variant

Props

Property	Description	Type	Values	Default	Required
columns	The table columns	ColumnDefinition[]	ColumnDefinition[]		✓
rowData	The data for the rows Can either be an array of data or a string pointing to an endpoint	string \| T[]	string \| T[]		✓
filter	Provide a filter for the rowData	string \| undefined	string \| undefined
filterFields	A list of fields to filter by	string[] \| undefined	string[] \| undefined
pagination	Turn on pagination for the grid	number \| true \| undefined	number \| true \| undefined	0
paginationSizeSelector	The values for the pagination size selector	true \| any[] \| number[] \| undefined	true \| any[] \| number[] \| undefined
showPaginationCounter	Shows the total count of items	boolean \| undefined	boolean \| undefined	false
itemsName	The text for the pagination counter and pagination size selector	string \| undefined	string \| undefined	"items"
paginationButtonCount	The number of page button to show	number \| undefined	number \| undefined	5
height	The height for the grid	string \| number \| false \| undefined	string \| number \| false \| undefined
columnLayout	Set the column layout mode	"fitData" \| "fitColumns" \| "fitDataFill" \| "fitDataStretch" \| "fitDataTable" \| undefined	"fitData" \| "fitColumns" \| "fitDataFill" \| "fitDataStretch" \| "fitDataTable" \| undefined	"fitDataStretch"
downloadButton	Enable the download button within the component	string \| undefined	string \| undefined
fileName	Set the file name for the download	string \| undefined	string \| undefined	"data"
antiforgeryToken	Optional anti-forgery token for secure requests	string \| undefined	string \| undefined
useRemoteFiltering	Enables remote filtering via ajax	boolean \| undefined	boolean \| undefined	false
useRemotePaging	Enables remote paging via ajax	boolean \| undefined	boolean \| undefined	false
useRemoteSorting	Enables remote sorting via ajax	boolean \| undefined	boolean \| undefined	false
enableColumnCalcs	Enables column calculations	boolean \| undefined	boolean \| undefined	false
debug	Enables verbose console logging for troubleshooting	boolean \| undefined	boolean \| undefined	false

Events

Name	Return Type
rowClick	[UIEvent, RowComponent]
downloadTriggered	void
data-loaded	[number]
data-error	[string]
count-change	[number]