Data VisualizationUpdatedPro· Data Visualization pack

Data Table

Enterprise data grid — virtualized, RBAC, audit, sort, filter.

Preview

Live preview

@oshon-ai/components

Data table

Group byRegion


regionNA13Σ 6502000
Acme Corp	CUST-0001	Active	$248,000	2026-05-18
Initech	CUST-0003	Paused	$96,400	2026-05-16
Hooli	CUST-0004	Active	$1,240,000	2026-05-15
Soylent Industries	CUST-0006	Churned	—	2026-05-13
Stark Industries	CUST-0008	Active	$2,180,000	2026-05-11
Wayne Enterprises	CUST-0009	Paused	$144,900	2026-05-10
Oscorp	CUST-0012	Churned	—	2026-05-07
Pied Piper	CUST-0013	Active	$64,500	2026-05-06
LexCorp	CUST-0018	Active	$815,200	2026-05-01

25 rowsARRΣ 10,065,250μ 402,610↓ 0↑ 2,180,000

Installation

Install the runtime packages:

pnpm

pnpm add @oshon-ai/components @oshon-ai/tokens @oshon-ai/primitives

Or scaffold the component source directly into your codebase (shadcn-style):

pnpm

pnpm dlx @oshon-ai/cli add datatable

Wire the tokens into your Tailwind v4 stylesheet:

css

/* app/globals.css */
@import 'tailwindcss';
@import '@oshon-ai/tokens/css';
@import '@oshon-ai/tokens/tailwind';

New here? Walk through the full setup — prereqs, theming, your first render.

Usage

Import the component and render it. Every component supports the standard tier, size, and disabled props where applicable.

tsx

'use client';
import { DataTable } from '@oshon-ai/components';

export default function Example() {
  return <DataTable />;
}

Regime card

Data table

1
Row 1
active
2
Row 2
pending
3
Row 3
active

tsx

(() => {
      type Row = { id: string; name: string; status: string };
      const columns: DataColumnDef<Row>[] = [
        { accessorKey: 'id', header: 'ID' },
        { accessorKey: 'name', header: 'Name' },
        { accessorKey: 'status', header: 'Status' },
      ];
      const data: Row[] = Array.from({ length: 3 }, (_, i) => ({
        id: String(i + 1),
        name: `Row ${i + 1}`,
        status: i % 2 === 0 ? 'active' : 'pending',
      }));
      return (
        <DataTable<Row>
          data={data}
          columns={columns}
          rowKey={(row) => row.id} densityOverrides={{ regime: 'card' }}
        />
      );
    })()

Regime standard

Data table


1	Row 1	active
2	Row 2	pending
3	Row 3	active
4	Row 4	pending
5	Row 5	active
6	Row 6	pending
7	Row 7	active
8	Row 8	pending
9	Row 9	active
10	Row 10	pending
11	Row 11	active
12	Row 12	pending
13	Row 13	active
14	Row 14	pending
15	Row 15	active
16	Row 16	pending
17	Row 17	active
18	Row 18	pending
19	Row 19	active
20	Row 20	pending
21	Row 21	active
22	Row 22	pending
23	Row 23	active
24	Row 24	pending
25	Row 25	active
26	Row 26	pending
27	Row 27	active
28	Row 28	pending
29	Row 29	active
30	Row 30	pending
31	Row 31	active
32	Row 32	pending
33	Row 33	active
34	Row 34	pending
35	Row 35	active
36	Row 36	pending
37	Row 37	active
38	Row 38	pending
39	Row 39	active
40	Row 40	pending
41	Row 41	active
42	Row 42	pending
43	Row 43	active
44	Row 44	pending
45	Row 45	active
46	Row 46	pending
47	Row 47	active
48	Row 48	pending
49	Row 49	active
50	Row 50	pending

tsx

(() => {
      type Row = { id: string; name: string; status: string };
      const columns: DataColumnDef<Row>[] = [
        { accessorKey: 'id', header: 'ID' },
        { accessorKey: 'name', header: 'Name' },
        { accessorKey: 'status', header: 'Status' },
      ];
      const data: Row[] = Array.from({ length: 50 }, (_, i) => ({
        id: String(i + 1),
        name: `Row ${i + 1}`,
        status: i % 2 === 0 ? 'active' : 'pending',
      }));
      return (
        <DataTable<Row>
          data={data}
          columns={columns}
          rowKey={(row) => row.id} densityOverrides={{ regime: 'standard' }}
        />
      );
    })()

Regime paginated

Data table


1	Row 1	active
2	Row 2	pending
3	Row 3	active
4	Row 4	pending
5	Row 5	active
6	Row 6	pending
7	Row 7	active
8	Row 8	pending
9	Row 9	active
10	Row 10	pending
11	Row 11	active
12	Row 12	pending
13	Row 13	active
14	Row 14	pending
15	Row 15	active
16	Row 16	pending
17	Row 17	active
18	Row 18	pending
19	Row 19	active
20	Row 20	pending
21	Row 21	active
22	Row 22	pending
23	Row 23	active
24	Row 24	pending
25	Row 25	active

tsx

(() => {
      type Row = { id: string; name: string; status: string };
      const columns: DataColumnDef<Row>[] = [
        { accessorKey: 'id', header: 'ID' },
        { accessorKey: 'name', header: 'Name' },
        { accessorKey: 'status', header: 'Status' },
      ];
      const data: Row[] = Array.from({ length: 200 }, (_, i) => ({
        id: String(i + 1),
        name: `Row ${i + 1}`,
        status: i % 2 === 0 ? 'active' : 'pending',
      }));
      return (
        <DataTable<Row>
          data={data}
          columns={columns}
          rowKey={(row) => row.id} densityOverrides={{ regime: 'paginated' }}
        />
      );
    })()

Permission denied

Data table

1
Row 1
active
2
Row 2
pending
3
Row 3
active

tsx

(() => {
      type Row = { id: string; name: string; status: string };
      const columns: DataColumnDef<Row>[] = [
        { accessorKey: 'id', header: 'ID' },
        { accessorKey: 'name', header: 'Name' },
        { accessorKey: 'status', header: 'Status' },
      ];
      const data: Row[] = Array.from({ length: 3 }, (_, i) => ({
        id: String(i + 1),
        name: `Row ${i + 1}`,
        status: i % 2 === 0 ? 'active' : 'pending',
      }));
      return (
        <DataTable<Row>
          data={data}
          columns={columns}
          rowKey={(row) => row.id} densityOverrides={{ regime: 'card' }} permissions={{ can: () => false }}
        />
      );
    })()

Empty slot

No rows to display.

tsx

(() => {
      type Row = { id: string; name: string; status: string };
      const columns: DataColumnDef<Row>[] = [
        { accessorKey: 'id', header: 'ID' },
        { accessorKey: 'name', header: 'Name' },
        { accessorKey: 'status', header: 'Status' },
      ];
      const data: Row[] = Array.from({ length: 0 }, (_, i) => ({
        id: String(i + 1),
        name: `Row ${i + 1}`,
        status: i % 2 === 0 ? 'active' : 'pending',
      }));
      return (
        <DataTable<Row>
          data={data}
          columns={columns}
          rowKey={(row) => row.id}
        />
      );
    })()

Pro · Data Visualization

Six-regime data adaptivity (50 → 1M+ rows) with built-in RBAC + audit + virtualization. The flagship commercial component.

Styling

Three layers of customization, in order of escape-hatch strength: className overrides → data-attribute targeting → CSS custom properties.

Passing Tailwind classes

Every Oshon component accepts a className prop merged AFTER the component's default classes. Use it to override spacing, color, or size without forking the component.

tsx

<DataTable
  className="ring-2 ring-offset-2 ring-blue-500"
/>

Data attributes

Oshon components expose their internal state as data-oshon-* attributes so you can target them from CSS without coupling to internal class names. The most common attributes are listed below — see the component's source for the full set.

Attribute	Values	Description
`data-oshon-size`	`xs · s · m · l · mobile`	Visual size axis. Mirrors the `size` prop.
`data-oshon-tier`	`primary · secondary · tertiary`	Visual emphasis tier (Button family). Mirrors the `tier` prop.
`data-oshon-state`	`enabled · active · error · disabled`	Component surface state. Set automatically based on props.
`data-disabled`	`true · (omitted)`	Set when `disabled` is true. Pair with `:disabled` CSS for native input components.
`data-state`	`open · closed · checked · unchecked · …`	Radix-derived state for overlay components (Dialog, Tabs, Toggle, etc.).

css

/* Target the secondary tier specifically */
[data-oshon-tier="secondary"] {
  --oshon-color-primary-700: var(--my-brand-color);
}

Interactive states

Every interactive component supports the standard CSS pseudo- classes plus Tailwind's state variants. Focus rings always use :focus-visible so keyboard users see them but mouse users don't.

:hover / hover:* — pointer hover
:focus-visible / focus-visible:* — keyboard focus
:active / active:* — pressed
:disabled / disabled:* — set via the disabled prop