Data Grid

A high-performance, fully keyboard-navigable data table with Excel-style inline editing.

Building an interactive spreadsheet is notoriously difficult. Most developers give up and install massive, 500kb third-party libraries just to get basic arrow-key navigation.

This DataGridBlock is built 100% dependency-free. It manages focus through a highly optimized internal roving coordinate state ({row, col}) rather than attaching thousands of DOM event listeners. It fully supports ArrowUp/Down/Left/Right navigation, Tab flow, Enter to edit/save, and instantly updates the underlying data array.

Click any cell and drive the grid from the keyboard: arrows to move, Tab to flow, Enter (or a double-click) to edit, Enter again to save and drop to the next row.

Data grid

Passcolumns: as { field, headerName }[] — field must match a key in your row objects exactly.
data: is the row array; the grid owns the editing state from there.
onChange: fires with the whole mutated array after a cell is saved via Enter, Tab or click-away.
color: accents the active cell's focus ring and the drag handle. Hex codes work.

Focus Ring Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Data Grid

npx shadcn@latest add @algorize-ui/data-grid

components/custom/blocks/DataGridBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Data Grid needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Read only

SetreadOnly: to lock every cell against double-click and keyboard editing, while arrow-key navigation still works.

Features

Explore the Data Grid's powerful features for displaying complex datasets, including virtualized scrolling, cell editing, and column resizing.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`DataGridBlock`	`columns`	`GridColumn[]`	Required	Defines the schema, headers, and specific behaviors of the grid columns. See the GridColumn object reference below.
`DataGridBlock`	`data`	`Record<string, any>[]`	Required	The array of row objects to display in the grid. The keys in these objects must perfectly match the `field` strings defined in your columns array.
`DataGridBlock`	`onChange`	`(newData: T[]) => void`	`undefined`	A callback fired immediately after a user successfully edits and saves a cell value (via Enter, Tab, or clicking away). Returns the newly mutated data array.
`DataGridBlock`	`color`	`"blue" \| "indigo" \| "emerald" \| "rose" \| "zinc" \| string`	`"primary"`	The accent color applied to the active cell's focus ring and the interactive drag handle. Fully supports custom hex codes.
`DataGridBlock`	`showRowNumbers`	`boolean`	`true`	If true, renders a sticky left-aligned column displaying the 1-based index of every row.
`DataGridBlock`	`readOnly`	`boolean`	`false`	If true, globally disables all double-click and keyboard editing capabilities across the entire grid, while preserving the ability to navigate via arrow keys.
`DataGridBlock`	`title`	`string`	`undefined`	An optional header title displayed above the grid (e.g. "Financial Ledger").
`DataGridBlock`	`description`	`string`	`undefined`	An optional subtitle or instructions rendered below the title.
`DataGridBlock`	`showExport`	`boolean`	`true`	Whether to render the built-in "Export CSV" button in the header.
`DataGridBlock`	`exportFileName`	`string`	`"data-grid.csv"`	Custom file name for the downloaded CSV file.
`DataGridBlock`	`onExport`	`(data: T[]) => void`	`undefined`	Optional callback triggered when the user clicks the "Export CSV" button.

GridColumn Object

Object	Property	Type	Default	Description
`GridColumn`	`field`	`string`	Required	The object key to look up in your `data` array to populate this specific column's cells.
`GridColumn`	`headerName`	`string`	Required	The human-readable title displayed inside the sticky table header for this column.
`GridColumn`	`width`	`string \| number`	`120`	The fixed and minimum width of the column. Can be a number (pixels) or a CSS string (e.g., `"250px"`).
`GridColumn`	`type`	`"text" \| "number"`	`"text"`	Determines the underlying HTML input type rendered during inline editing. Setting this to `"number"` also applies a monospaced font to the cell values for better numerical alignment.
`GridColumn`	`readOnly`	`boolean`	`false`	If true, completely locks editing capabilities for this specific column (e.g., for auto-generated IDs or timestamps), even if the global grid itself is editable.