Auto row height

Prop enableAutoRowHeight — engine behaviour, default false.

Guide

When to use it

Let rows grow to fit wrapped content — long text, multi-line notes — instead of clipping to a fixed height.

How it works

Dependency-free and browser-measured: body cells switch to white-space: normal (root class bst-auto-rowheight), so each row grows to its content. Scope wrapping to specific columns with meta.wrapText.

Gotchas

• A manually resized row (enableRowResize) still clips to its set height — auto-height applies to rows the user hasn't sized.
• Variable row heights make virtualization estimates less exact; test scroll feel on large sets.

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; note: string }
const rows: Row[] = [
  { id: '1', name: 'Ada Lovelace', note: 'Wrote the first algorithm intended for a machine; her notes on the Analytical Engine ran longer than the paper they annotated.' },
  { id: '2', name: 'Alan Turing', note: 'Formalised computation and helped break wartime ciphers; the halting problem he described still bites every scheduler.' },
  { id: '3', name: 'Grace Hopper', note: 'Built the first compiler and championed machine-independent languages; popularised "debugging" after a literal moth.' },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'name', accessorKey: 'name', header: 'Name' },
  { id: 'note', accessorKey: 'note', header: 'Note', meta: { type: 'longText', wrapText: true } },
]
export default function App() {
  return (
    <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id}
      enableAutoRowHeight pagination={false} showSearch={false} />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	false
Maps to	custom — browser-measured, dep-free: body cells white-space: normal so each row grows to fit wrapped content (root class bst-auto-rowheight; per-column meta.wrapText → bst-wrap). Keeps overflow:hidden, so a manually-resized row still clips to its set height. In settings ("Rows", always shown)
Status	✅ done
Since	v0.35.0
Settings sheet	Rows

Auto row height — rows grow to fit wrapped content instead of truncating each cell to one line; the browser measures the content, so no JS measurement is needed. Every body cell wraps; opt individual columns in (or out) with meta.wrapText. Composes with manual row resize (a resized row keeps its explicit height and clips the wrapped content). Default: false.

Enable it

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

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

Behavior & interactions

• Body cells wrap and each row grows to fit its content — browser-measured, no JS. Opt individual columns in/out with meta.wrapText. A manually-resized row (enableRowResize) keeps its set height and clips the wrapped content.