Getting Started

Bst-Table is a React data grid: a headless engine (@bloomskill/table-engine, built on TanStack Table v9) with swappable style skins. Pick a skin, pass data + columns, and you get sorting, search, pagination and column controls out of the box — then opt into editing, selection, clipboard, export and more with per-instance flags. Everything is MIT / Apache: no per-seat licensing, no paid tiers.

Install

Choose a skin — the engine comes with it. Both render the same data and columns, so you can switch later without touching your data code.

Material UI skin

npm install @bloomskill/table-mui @bloomskill/table-engine \
  @mui/material @mui/icons-material @emotion/react @emotion/styled \
  react react-dom

shadcn / Radix skin

npm install @bloomskill/table-shadcn @bloomskill/table-engine \
  @radix-ui/react-dropdown-menu react react-dom

Quick start

Define your columns once, then render the skin. The engine stylesheet is always required.

import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'

type Person = { id: string; name: string; role: string; age: number }

const columns: BstTableColumn<Person>[] = [
  { id: 'name', accessorKey: 'name', header: 'Name', sortFn: 'alphanumeric' },
  { id: 'role', accessorKey: 'role', header: 'Role' },
  { id: 'age',  accessorKey: 'age',  header: 'Age',  sortFn: 'basic' },
]

export function People({ rows }: { rows: Person[] }) {
  return (
    <BstTableMui
      title="People"
      data={rows}
      columns={columns}
      getRowId={(r) => r.id}
      pagination={{ pageSize: 10 }}
    />
  )
}

The shadcn skin is identical, with one extra stylesheet:

import { BstTableShadcn } from '@bloomskill/table-shadcn'
import '@bloomskill/table-engine/styles.css'
import '@bloomskill/table-shadcn/styles.css'   // shadcn skin needs both

<BstTableShadcn data={rows} columns={columns} getRowId={(r) => r.id} dark />

The shadcn skin, live — same data and columns, sorting and pagination included:

Example source

import React from 'react'
import { BstTableShadcn } from '@bloomskill/table-shadcn'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
import '@bloomskill/table-shadcn/styles.css'

type Row = { id: string; name: string; team: string; role: string; score: number }
const seed: Row[] = [
  { id: '1', name: 'Ada Lovelace',   team: 'Platform', role: 'Engineer', score: 92 },
  { id: '2', name: 'Alan Turing',    team: 'Research', role: 'Scientist', score: 88 },
  { id: '3', name: 'Grace Hopper',   team: 'Platform', role: 'Engineer', score: 95 },
  { id: '4', name: 'Katherine J.',   team: 'Research', role: 'Analyst',  score: 90 },
  { id: '5', name: 'Edsger Dijkstra',team: 'Platform', role: 'Architect',score: 84 },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'name',  accessorKey: 'name',  header: 'Name' },
  { id: 'team',  accessorKey: 'team',  header: 'Team' },
  { id: 'role',  accessorKey: 'role',  header: 'Role' },
  { id: 'score', accessorKey: 'score', header: 'Score', sortFn: 'basic' },
]
export default function App() {
  return (
    <BstTableShadcn data={seed} columns={columns} getRowId={(r) => r.id}
      pagination={{ pageSize: 5 }} />
  )
}

Loading live example…

Always pass getRowId

Selection, editing and clipboard target rows by id. Passing getRowId keeps them correct across sorting and filtering.

Choosing a skin

	@bloomskill/table-mui	@bloomskill/table-shadcn
Best when	your app is on Material UI	your app is on shadcn / Tailwind / Radix
Theming	reads your MUI ThemeProvider (light/dark)	theme="inherit" adopts your shadcn tokens; or a self-contained zinc palette
Icons	@mui/icons-material	lucide / Tabler / Phosphor / … or built-in SVGs
Extra dep	@mui/material + Emotion	@radix-ui/react-dropdown-menu (ships its own CSS — no Tailwind build needed)

Not on either? The engine is headless — useBstTable renders with your own markup.

Next steps

• Installation — exact packages, CSS imports, Next.js / Vite setup, troubleshooting.
• Recipes — complete apps: server data, save-to-API, loading / empty / error, custom cells.
• Feature Guides — every enable* / show* flag, with when-and-why prose.
• Cell Types — the 17 built-in meta.type renderers/editors.
• API Reference — every engine export with real signatures.
• Styling & Theming — themes, dark mode and CSS slots.
• AI Agents & MCP — let your coding agent write correct Bst-Table code.