Cell Types

A column's renderer + editor is chosen by meta.type. 17 built-in types ship, all dependency-free inline SVG, extensible via the cell-type registry.

Bst-Table cell types — sparkline, KPI, coloured status badges, multi-select chips and a boolean check

Try it live — edit the code and the grid updates:

Example source

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

type Product = {
  id: string; name: string; trend: number[]
  revenue: { value: number; delta: number; data: number[] }
  status: string; tags: string[]; active: boolean
}
const data: Product[] = [
  { id: '1', name: 'Nimbus',  trend: [3,5,4,6,7,6,9], revenue: { value: 42000, delta: 12, data: [30,34,38,42] }, status: 'live', tags: ['api','pro'],       active: true  },
  { id: '2', name: 'Stratus', trend: [8,7,7,5,4,4,3], revenue: { value: 18500, delta: -8, data: [24,22,20,18] }, status: 'beta', tags: ['api'],             active: true  },
  { id: '3', name: 'Cirrus',  trend: [2,3,3,4,5,7,8], revenue: { value: 63200, delta: 21, data: [40,48,55,63] }, status: 'live', tags: ['api','pro','new'], active: false },
  { id: '4', name: 'Cumulus', trend: [5,5,6,6,5,5,6], revenue: { value: 9800,  delta: 3,  data: [9,9,10,10]  },  status: 'off',  tags: ['new'],             active: false },
]
const columns: BstTableColumn<Product>[] = [
  { id: 'name', accessorKey: 'name', header: 'Product' },
  { id: 'trend', accessorKey: 'trend', header: '7-day', meta: { type: 'sparkline', cellMeta: { variant: 'area' } } },
  { id: 'revenue', accessorKey: 'revenue', header: 'Revenue', meta: { type: 'kpi', cellMeta: { currency: 'USD', deltaPercent: true } } },
  { id: 'status', accessorKey: 'status', header: 'Status', meta: { type: 'singleSelect', options: [
    { value: 'live', label: 'Live', color: '#22c55e' },
    { value: 'beta', label: 'Beta', color: '#f59e0b' },
    { value: 'off',  label: 'Offline', color: '#94a3b8' },
  ] } },
  { id: 'tags', accessorKey: 'tags', header: 'Tags', meta: { type: 'multiSelect', options: [
    { value: 'api', label: 'API', color: '#3b82f6' },
    { value: 'pro', label: 'Pro', color: '#a855f7' },
    { value: 'new', label: 'New', color: '#10b981' },
  ] } },
  { id: 'active', accessorKey: 'active', header: 'Active', meta: { type: 'boolean', align: 'center' } },
]
export default function App() {
  return <BstTableMui data={data} columns={columns} getRowId={(r) => r.id} />
}

Loading live example…

Type	Renders	Editable
`text`	single-line text, ellipsis + title tooltip	✅ input
`longText`	clamped multi-line text	✅ textarea → popup (adapters)
`number`	locale number / currency / percent	✅ number input
`dateTime`	date / time / datetime	✅ native picker
`boolean`	check ✓ / muted dash	✅ checkbox
`singleSelect`	badge (color · icon · avatar)	✅ dropdown
`multiSelect`	chips + +N more overflow	✅ checkbox dropdown
`radio`	badge	✅ radio group
`hyperlink`	anchor	✅ url input
`files`	image thumbnail / PDF thumbnail (pdfThumbnail) / icon + name · click to preview (image inline, PDF native viewer)	popup: add/remove (adapters)
`sparkline`	inline SVG line / area / bar	read-only
`kpi`	value + trend delta chip + mini-spark	read-only
`qr`	inline-SVG QR code (byte mode, v1–10)	✅ input
`barcode`	inline-SVG Code 128	✅ input
`richText`	sanitized-HTML preview or formatted	✅ toolbar → popup (adapters)
`action`	inline Edit / Save / Copy / Delete buttons	—
`actionMenu`	compact ⋯ kebab → actions popup	—

Generated from the @bloomskill/table-mcp corpus.