Skip to main content

text

single-line text, ellipsis + title tooltip.

The text cell rendered in a Bst-Table grid

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:'Widget A', v:'In stock' }, { id:'2', item:'Widget B', v:'Backorder' }]
const columns: BstTableColumn<any>[] = [
{ id: 'item', accessorKey: 'item', header: 'Item' },
{ id:'v', accessorKey:'v', header:'Text', meta:{ type:'text' } },
]
export default function App() {
return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}
Loading live example…

Guide

When to use it

The default for any short, single-line string — names, labels, SKUs, statuses stored as free text.

How it works

Reads the raw string on one line; overflow truncates with an ellipsis and the full value shows as a hover tooltip. Editing swaps in a text input. The stored value is a plain string.

Options

  • cellMeta.required — reject an empty value on save.
  • cellMeta.pattern — validate and input-mask against a preset (email, pan, gstin, …) or a RegExp; see the ERP field formats.

At a glance

Renderssingle-line text, ellipsis + title tooltip
Value shapestring
Editable✅ input
Key cellMetarequired, pattern

Use it

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