@utiltools/datagrid

DataGrid Demo

A lightweight, TypeScript-first headless grid with built-in UI. Sorting, filtering, pagination, row selection — out of the box.200 rows, client-side processing.

$npm install@utiltools/datagrid

Basic table

Sorting on all columns, column-level filtering on Name, Department, Location. Global search across all columns.

Rows per page

#	Name	Department	Role	Location	Salary	Status	Joined

1	Alice Zhao	Engineering	Senior Engineer	New York	60000	Active	2018-01-01
2	Bob Martinez	Design	Designer	London	68000	Active	2018-02-01
3	Carol White	Marketing	Growth Lead	Berlin	76000	Active	2018-03-01
4	David Kim	Sales	Account Executive	Singapore	84000	Inactive	2018-04-01
5	Eva Brown	HR	Recruiter	Remote	92000	On Leave	2018-05-01
6	Frank Lee	Finance	CFO	New York	100000	Active	2018-06-01
7	Grace Wilson	Engineering	Staff Engineer	London	108000	Active	2018-07-01
8	Henry Taylor	Design	Designer	Berlin	116000	Active	2018-08-01
9	Isla Anderson	Marketing	Growth Lead	Singapore	124000	Inactive	2018-09-01
10	Jack Thomas	Sales	Account Executive	Remote	132000	On Leave	2018-10-01

Showing 1–10 of 200 rows

…

Quick API reference

Prop	Type	Default	Description
data	TRow[]	—	Array of row objects.
columns	ColumnDef<TRow>[]	—	Column definitions (key, label, sortable, filterable, render…).
rowKey	keyof TRow	index	Field used as unique row identifier.
pageSize	number	10	Initial rows per page.
pageSizeOptions	number[]	[10, 25, 50, 100]	Page size dropdown options.
selectable	boolean	false	Enable row selection checkboxes.
striped	boolean	false	Alternate row background.
searchable	boolean	true	Show global search input.
loading	boolean	false	Show skeleton loading state.
emptyMessage	string	"No data to display."	Shown when data is empty.
onSelectionChange	(keys: Set<string>) => void	—	Fired when selected rows change.