qr

inline-SVG QR code (byte mode, v1–10).

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:'Docs', v:'https://bst-grid.pages.dev' }, { id:'2', item:'SKU', v:'BST-2026' }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'QR', meta:{ type:'qr' } },
]
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 scannable QR code generated from a value — a URL, SKU, or token.

How it works

Reads a string and renders a dependency-free inline-SVG QR (byte mode, versions 1–10). Editing swaps in a text input and the code re-renders live.

Options

• cellMeta.ecLevel — error-correction level 'L' | 'M' (default) | 'Q' | 'H'.
• cellMeta.size, cellMeta.margin.

At a glance

Renders	inline-SVG QR code (byte mode, v1–10)
Value shape	string
Editable	✅ input
Key cellMeta	ecLevel, size, margin

Use it

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

cellMeta options

qr

cellMeta	Type	Effect
ecLevel	'L' | 'M' | 'Q' | 'H'	Error-correction level. Default 'M'.
size	number	Rendered px. Default 88.
margin	number	Quiet-zone modules. Default 2.