Quick Start

Install the packageCopy Anchor Link

Give the grid a sized containerCopy Anchor Link

The grid measures its own viewport from its parent — give it an explicit height (or a flex/grid parent that resolves to one). An unsized container renders a collapsed, empty grid.

Render rows and columnsCopy Anchor Link

import { Grid } from '@witbybit/wit-grid-react';

const rows = [
	{ id: 'r1', name: 'Ada Lovelace', role: 'Engineer' },
	{ id: 'r2', name: 'Grace Hopper', role: 'Compiler lead' },
];

const columns = [
	{ field: 'name', header: 'Name' },
	{ field: 'role', header: 'Role' },
];

export function App() {
	return (
		<div style={{ height: 420 }}>
			<Grid rows={rows} columns={columns} getRowId={(row) => row.id} />
		</div>
	);
}

getRowId is optional but strongly recommended — without it, the grid falls back to array index as row identity, which breaks selection/expansion state across sorts, filters, and edits.

Reach for more when you need itCopy Anchor Link