Responsive column hiding

Prop enableResponsive — engine behaviour, default false.

Guide

When to use it

Narrow and mobile layouts — drop the least important columns automatically as the grid gets narrower, and bring them back as it widens.

How it works

Give columns a meta.responsivePriority; a ResizeObserver hides the lowest-priority columns when space runs out and restores them when it returns. Only columns it auto-hid are restored, so a user's manual hides are respected.

Gotchas

• No-op under fitColumns (which instead shrinks every column to fit).
• Without meta.responsivePriority on your columns there's nothing to prioritize — set it where it matters.

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 Row = { id: string; name: string; team: string; role: string; score: number }
const seed: Row[] = [
  { id: '1', name: 'Ada Lovelace', team: 'Platform', role: 'Engineer', score: 92 },
  { id: '2', name: 'Grace Hopper', team: 'Platform', role: 'Engineer', score: 95 },
  { id: '3', name: 'Alan Turing', team: 'Research', role: 'Scientist', score: 88 },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'name', accessorKey: 'name', header: 'Name', meta: { responsivePriority: 1 } },
  { id: 'score', accessorKey: 'score', header: 'Score', meta: { responsivePriority: 2 } },
  { id: 'role', accessorKey: 'role', header: 'Role', meta: { responsivePriority: 4 } },
  { id: 'team', accessorKey: 'team', header: 'Team', meta: { responsivePriority: 5 } },
]
export default function App() {
  // Narrow preview — lowest-priority columns drop out as it gets tighter.
  return <div style={{ maxWidth: 360 }}><BstTableMui data={seed} columns={columns} getRowId={(r) => r.id} enableResponsive /></div>
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	false
Maps to	ResizeObserver hides lowest-priority columns when too narrow (v9 columnVisibility), restores as it widens; only auto-hidden columns are restored; no-op under fitColumns
Status	✅ done
Since	v0.22.0
Settings sheet	Columns

Responsive column hiding — when the grid is too narrow to fit its columns, hide the lowest-priority ones (per meta.responsivePriority, higher = kept longer) until they fit; restore them as it widens. Only auto-hidden columns are restored, so it never fights a manual hide. No-op under fitColumns. Default: false.

Enable it

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

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

Options

Option	Notes
meta.responsivePriority	columns without a priority are hidden in arbitrary order

Behavior & interactions

• Conflicts with fitColumns — responsive hiding is a no-op under fitColumns.

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.

• G4 · Responsive — ✅ built. v0.22.0 — enableResponsive + meta.responsivePriority (hide low-priority when narrow)