kpi

value + trend delta chip + mini-spark.

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:'MRR', v:{ value:42000, delta:12 } }, { id:'2', item:'Churn', v:{ value:9800, delta:-4 } }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'KPI', meta:{ type:'kpi', cellMeta:{ deltaPercent:true } } },
]
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 headline metric with movement — MRR, churn, conversion — a value plus its trend.

How it works

Reads a number, or { value, delta?, data? }, and renders the value, a coloured delta chip, and an optional mini-sparkline. Number formatting from meta applies. Read-only.

Options

• cellMeta.deltaPercent — show the delta as a percentage.
• cellMeta.invertDelta — treat down as good (e.g. churn, cost).
• cellMeta.sparkWidth.

At a glance

Renders	value + trend delta chip + mini-spark
Value shape	number or { value, delta?, data? }
Editable	read-only
Key cellMeta	invertDelta, deltaPercent, sparkWidth

Use it

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

cellMeta options

kpi — value is number or { value, delta?, data? }; number formatting from meta applies.

cellMeta	Type	Effect
invertDelta	boolean	Treat a decrease as good (green).
deltaPercent	boolean	Render the delta as a percentage.
sparkWidth	number	Width of the optional mini-spark (from value.data).