Conditional formatting runtime toggle

Prop enableConditionalFormatting — engine behaviour, default true.

Guide

When to use it

On by default — the master switch for data-driven cell / row styling defined by conditionalFormats rules (thresholds, status colors, blanking a cell).

How it works

It gates the conditionalFormats rule array at the useBstTable choke point. Setting it false makes the rules inert without dropping them — a clean way to toggle formatting off and back on.

Gotchas

• No-op on a grid that has no conditionalFormats rules.
• Always shown in the settings sheet ("Display"); rules compose with the classNames / styles CSS slots.

Live example

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'
type Deal = { id: string; company: string; amount: number; stage: string; daysOpen: number }
const data: Deal[] = [
  { id: '1', company: 'Acme Corp', amount: 82000, stage: 'Won',        daysOpen: 12 },
  { id: '2', company: 'Globex',    amount: 14500, stage: 'Negotiation', daysOpen: 41 },
  { id: '3', company: 'Initech',   amount: 56000, stage: 'Proposal',    daysOpen: 8 },
  { id: '4', company: 'Umbrella',  amount: 4200,  stage: 'Lost',        daysOpen: 63 },
  { id: '5', company: 'Soylent',   amount: 71000, stage: 'Won',        daysOpen: 5 },
]
const columns: BstTableColumn<Deal>[] = [
  { id: 'company', accessorKey: 'company', header: 'Company' },
  { id: 'amount', accessorKey: 'amount', header: 'Amount', meta: { type: 'number', cellMeta: { currency: 'USD' } } },
  { id: 'stage', accessorKey: 'stage', header: 'Stage' },
  { id: 'daysOpen', accessorKey: 'daysOpen', header: 'Days open', meta: { type: 'number' } },
]
export default function App() {
  return (
    <BstTableMui data={data} columns={columns} getRowId={(r) => r.id} pagination={false}
      conditionalFormats={[
        { scope: 'cell', columnId: 'amount', when: { op: 'gt', value: 50000 }, style: { color: '#16a34a', fontWeight: 700 } },
        { scope: 'row', columnId: 'daysOpen', when: { op: 'gt', value: 30 }, style: { background: '#fef2f2' } },
        { scope: 'row', columnId: 'stage', when: { op: 'equals', value: 'Won' }, style: { background: '#f0fdf4' } },
      ]} />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	true
Maps to	gates conditionalFormats at the useBstTable choke point — false makes the rules inert without dropping them. In settings ("Display", always shown; no-op on grids without rules)
Status	✅ done
Since	v0.29.0
Settings sheet	Display

Conditional formatting — whether the conditionalFormats rules are applied. The rules themselves stay on conditionalFormats (presence is the developer opt-in); this flag lets the applied styling be switched off/on at runtime — e.g. from the settings sheet — without dropping the rules. Default: true.

Enable it

<BstTableMui
  data={rows}
  columns={columns}
  enableConditionalFormatting
/>

Swap BstTableMui for BstTableShadcn (and the CSS import) for the shadcn skin — same props.

Options

Option	Notes
conditionalFormats	the flag gates rules; with no rules it has nothing to apply

Behavior & interactions

• Defaults to ON — it is the runtime off-switch for rules already passed, not the opt-in.

Spec coverage

Spec codes (A1, C2, X8, …) are Bst-Table's internal requirement IDs from the capability matrix; P0–P2 mark the delivery phase. They are traceability tags, not part of the public API.

• K3 · Conditional formatting — ✅ built. v0.18.0 — rule engine + <BstConditionalFormatBuilder>