Data DisplayUpdatedFree

Table

Enterprise data grid — virtualized rows, sticky header, sort, filter, quick search, selection, pagination.

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 table

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 { Table } from '@oshon-ai/components';

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

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

<Table
  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