multiSelect

chips + +N more overflow.

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:'Nimbus', v:['api','pro'] }, { id:'2', item:'Cirrus', v:['new'] }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Tags', meta:{ type:'multiSelect', options:[{ value:'api', label:'API', color:'#3b82f6' }, { value:'pro', label:'Pro', color:'#a855f7' }, { value:'new', label:'New', color:'#10b981' }] } },
]
export default function App() {
  return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}

Loading live example…

Guide

When to use it

Several values from a set — tags, labels, skills — shown as chips.

How it works

Reads a string[] and renders one chip per value; extras fold into a +N more. Editing opens a checkbox dropdown. Shares the meta.options shape with singleSelect.

Options

• cellMeta.maxChips — cap the chips shown before +N more (default 3).
• cellMeta.fitChips — width-aware: fit as many chips as the column width allows, folding the rest.

At a glance

Renders	chips + +N more overflow
Value shape	string[]
Editable	✅ checkbox dropdown
Key cellMeta	maxChips, fitChips

Use it

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

cellMeta options

multiSelect

cellMeta	Type	Effect
maxChips	number	Max chips before +N more. Default 3.
fitChips	boolean	Width-aware: show as many chips as the column width fits, fold the rest into +N more (widen → more chips). maxChips then acts as an upper cap.