singleSelect

badge (color · icon · avatar).

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:'Acme', v:'active' }, { id:'2', item:'Globex', v:'churned' }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Status', meta:{ type:'singleSelect', options:[{ value:'active', label:'Active', color:'#22c55e' }, { value:'churned', label:'Churned', color:'#ef4444' }] } },
]
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 value from a fixed set — status, priority, category, owner — shown as a coloured badge.

How it works

Reads a single option value and renders its badge (colour · icon · avatar, from meta.options). Editing opens a searchable dropdown. Stored as the option's string value (or null).

Options

• meta.options — [{ value, label, color?, icon?, avatar? }] drives both the read badge and the edit dropdown.

At a glance

Renders	badge (color · icon · avatar)
Value shape	string | null
Editable	✅ dropdown
Key cellMeta	via meta.options

Use it

const columns: BstTableColumn<Row>[] = [
  { id: 'x', accessorKey: 'x', header: 'X', meta: { type: 'singleSelect', /* cellMeta below */ } },
]