Column visibility

Prop enableHiding — engine behaviour, default true.

Guide

When to use it

On by default — let users show and hide columns without losing them.

How it works

Each column gets an eye / eye-off toggle in the columns menu (showColumnsMenu). Hidden columns stay listed in the menu so they can be brought back, and the same control appears in the settings sheet as "Show / hide columns".

Gotchas

• The behaviour is engine-level; the visible control needs showColumnsMenu.
• Distinct from enableResponsive, which hides columns automatically by width.

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: 'Alan Turing',    team: 'Research', role: 'Scientist', score: 88 },
  { id: '3', name: 'Grace Hopper',   team: 'Platform', role: 'Engineer', score: 95 },
  { id: '4', name: 'Katherine J.',   team: 'Research', role: 'Analyst',  score: 90 },
  { id: '5', name: 'Edsger Dijkstra',team: 'Platform', role: 'Architect',score: 84 },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'name',  accessorKey: 'name',  header: 'Name' },
  { id: 'team',  accessorKey: 'team',  header: 'Team' },
  { id: 'role',  accessorKey: 'role',  header: 'Role' },
  { id: 'score', accessorKey: 'score', header: 'Score', sortFn: 'basic' },
]

export default function App() {
  return (
    <BstTableMui data={seed} columns={columns} getRowId={(r) => r.id}
      enableColumnPinning enableColumnOrdering showColumnsMenu />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	true
Maps to	v9 enableHiding
Status	✅ done
Since	v0.40.0
Settings sheet	Columns

Column show/hide behaviour. Maps to v9 enableHiding. Default: true.

Enable it

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

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