radio
badge.

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'
const rows = [{ id:'1', item:'Q1', v:'yes' }, { id:'2', item:'Q2', v:'no' }]
const columns: BstTableColumn<any>[] = [
{ id: 'item', accessorKey: 'item', header: 'Item' },
{ id:'v', accessorKey:'v', header:'Radio', meta:{ type:'radio', options:[{ value:'yes', label:'Yes' }, { value:'no', label:'No' }] } },
]
export default function App() {
return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}
Loading live example…
Guide
When to use it
A single value from a small set where a visible radio group reads better than a dropdown.
How it works
Reads one option value and renders it as a badge (like singleSelect); editing shows a radio group.
Stored as a string (or null).
Options
cellMeta.layout—'vertical'(default) |'horizontal'.
At a glance
| Renders | badge |
| Value shape | string | null |
| Editable | ✅ radio group |
Key cellMeta | layout |
Use it
const columns: BstTableColumn<Row>[] = [
{ id: 'x', accessorKey: 'x', header: 'X', meta: { type: 'radio', /* cellMeta below */ } },
]
cellMeta options
radio
cellMeta | Type | Effect |
|---|---|---|
layout | 'vertical' | 'horizontal' | Radio arrangement. Default 'vertical'. |