Loading / error overlays

Prop enableOverlays — engine behaviour, default true.

Guide

When to use it

On by default — show a proper loading spinner and error state over the grid instead of a blank or stale body.

How it works

While loading is true (or error is set — error wins) the grid draws an overlay. useBstDataSource / useBstInfiniteDataSource supply loading + error via tableProps, so a server-wired grid gets this for free. Replace the content with renderLoadingOverlay / renderErrorOverlay, or set overlayText.

Gotchas

• On by default — pass loading / error (directly or from a data source) for it to show anything.
• Always available in the settings sheet ("Display").

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}
      enableOverlays loading pagination={false} showSearch={false} />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	true
Maps to	custom — a formal overlay over the grid while loading is true or when error is set (error wins), instead of a blank / stale body. On by default: useBstDataSource / useBstInfiniteDataSource tableProps carry loading + error, so a server-wired grid shows them for free. Default content = spinner + "Loading…" / the error message; fully replaceable via the render props. In settings ("Display", always shown). Both skins inherit it
Status	✅ done
Since	v0.40.0
Settings sheet	Display

Loading / error overlays — render a formal overlay over the grid while loading is true or when error is set, instead of leaving the body blank or stale. On by default so a grid wired to a server DataSource (useBstDataSource, which reports loading/error) shows them for free; set false to suppress the overlays and manage those states yourself. Feed the state via loading / error; customize via overlayText, renderLoadingOverlay, renderErrorOverlay. Default: true.

Enable it

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

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

Options

Option	Notes
loading	Related prop for this feature.
error	Related prop for this feature.
overlayText	Related prop for this feature.
renderLoadingOverlay	Related prop for this feature.
renderErrorOverlay	Related prop for this feature.

Behavior & interactions

• Loading / error overlays, on by default. Feed state via loading / error (or wire useBstDataSource, whose tableProps already carry both). Customize via overlayText, renderLoadingOverlay, renderErrorOverlay. Set false to manage those states yourself.