Row-number column

Prop enableRowNumbers — engine behaviour, default false.

Guide

When to use it

Give users a stable, spreadsheet-style row index that stays continuous across pages and reflects the current sort and filter.

How it works

Injects a leading, non-interactive # column, pinned to the start by default so it stays put on horizontal scroll. The number tracks the current view (sort · filter · page), not the raw data order.

Gotchas

• It's a reserved column: out of sorting, the filter row, the columns menu and export by construction — you don't configure those.
• Override the header text with rowNumberHeader.

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}
      enableRowNumbers />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	false
Maps to	custom — a leading, non-interactive # column numbering the current view (continuous across pages; reflects sort + filter). Injected as a real leaf column with an id under the reserved bst prefix, so it stays out of sorting, the filter row, the columns menu and export by construction. Pinned to the start (sticky-left) by default — useBstTable seeds columnPinning.start with the row-number id (even over a consumer initialState/gridState), so it stays the leftmost data column ahead of any user-pinned column and sticks on horizontal scroll. The number is read from the live painted row model (cached per model, O(n)). Header defaults to # (rowNumberHeader overrides). In settings ("Columns", always shown). Both skins inherit it
Status	✅ done
Since	v0.40.0
Settings sheet	Columns

Row-number column — a leading, non-interactive # column showing each row's 1-based position in the current view (continuous across pages; reflects sort + filter). It never sorts, filters, hides, resizes, reorders or pins, and stays out of the columns menu / filter row / export. Header defaults to # — override with rowNumberHeader. Default: false.

Enable it

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

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

Options

Option	Notes
rowNumberHeader	Related prop for this feature.

Behavior & interactions

• Prepends a leading, non-interactive # column numbering the current view — continuous across pages, reflecting sort + filter. It stays out of sorting, filtering, the columns menu, the filter row and export. Override the header via rowNumberHeader.