sparkline

inline SVG line / area / bar.

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:[3,5,4,6,7,9] }, { id:'2', item:'Stratus', v:[8,6,7,5,4,3] }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Trend', meta:{ type:'sparkline', cellMeta:{ variant:'area' } } },
]
export default function App() {
  return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}

Loading live example…

Guide

When to use it

An inline trend — a mini chart of a series in a single cell, with no charting library.

How it works

Reads a number[] (or a '1,2,3' string) and draws a dependency-free inline-SVG chart. Read-only.

Options

• cellMeta.variant — 'line' (default) | 'area' | 'bar'.
• cellMeta.color, width, height, min, max, showValue.

At a glance

Renders	inline SVG line / area / bar
Value shape	number[] (or "1,2,3")
Editable	read-only
Key cellMeta	variant, width, height, color, min, max, showValue

Use it

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

cellMeta options

sparkline — value is number[] (or a comma string).

cellMeta	Type	Effect
variant	'line' | 'area' | 'bar'	Chart style. Default 'line'.
width / height	number	SVG size in px. Default 84 × 22.
color	CSS color	Stroke/fill. Default the accent var.
min / max	number	Fix the value scale (else auto from data).
showValue	boolean	Append the last value as text.