DataGrid

A table component for displaying tabular data. Powered by @tanstack/react-table under the hood.

Name	Role	Status
Alice Martin	Engineer	Active
Bob Chen	Designer	Active
Carol Kim	Manager	Inactive

import { DataGrid } from '@ontoui/react';
import type { ColumnDef } from '@tanstack/react-table';

interface Person {
  name: string;
  role: string;
}

const columns: ColumnDef<Person, unknown>[] = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'role', header: 'Role' },
];

const data: Person[] = [
  { name: 'Alice', role: 'Engineer' },
  { name: 'Bob', role: 'Designer' },
];

<DataGrid data={data} columns={columns} />;

Examples

Striped

Alternates background color on odd rows for easier scanning.

Name	Role	Status
Alice Martin	Engineer	Active
Bob Chen	Designer	Active
Carol Kim	Manager	Inactive

<DataGrid data={data} columns={columns} striped />

Bordered

Adds vertical borders between columns.

Name	Role	Status
Alice Martin	Engineer	Active
Bob Chen	Designer	Active
Carol Kim	Manager	Inactive

<DataGrid data={data} columns={columns} bordered />

Loading

Shows a loading indicator while data is being fetched.

Name	Role	Status
Loading…

<DataGrid data={[]} columns={columns} loading />

Empty state

Displays a message when there is no data to show.

Name	Role	Status
No results found

<DataGrid data={[]} columns={columns} emptyText="No results found" />

API Reference

Prop	Type	Default
className?	string	—
data	TData[]	—
columns	ColumnDef<TData, unknown>[]	—
loading?	boolean	false
emptyText?	string	No data
striped?	boolean	false
bordered?	boolean	false
stickyHeader?	boolean	false
style?	CSSProperties	—
onRowClick?	(row: Row<TData>) => void	—