@utiltools/datagrid
DataGrid Demo
A lightweight, TypeScript-first React data grid. Sorting, filtering, pagination, row selection — out of the box.Click the 🔽 funnel icon to filter: text search, number range (min/max), or date range (from/to).Includes large-dataset and editing workflow demos.
$npm install@utiltools/datagrid
Framework switcher
Basic table
Sorting on all columns. Text filters on Name, Department, Location. Number range filter on Salary (try min/max). Date range filter on Joined (try from/to). Global search across all columns.
| # | 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
…
Feature checklist
Sorting
Filtering
Selection
Pagination
Loading state
Custom renderers
Large dataset demo
Editing workflow
Grouping
Excel/PDF export
Enterprise tools
What would you like to see next?
Tell us which demo capability should be prioritized next.
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. |