barcode

inline-SVG Code 128.

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:'NB-1001' }, { id:'2', item:'Stratus', v:'ST-2043' }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Barcode', meta:{ type:'barcode', cellMeta:{ height:44 } } },
]
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 1-D barcode generated from a value — a SKU, batch, or asset id.

How it works

Reads a string and renders an inline-SVG Code 128 barcode. Editing swaps in a text input.

Options

• cellMeta.height — bar height in px (default 38).
• cellMeta.showText — print the value under the bars.

At a glance

Renders	inline-SVG Code 128
Value shape	string
Editable	✅ input
Key cellMeta	height, showText

Use it

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

cellMeta options

barcode

cellMeta	Type	Effect
height	number	Bar height in px. Default 38.
showText	boolean	Print the value under the bars. Default true.