Type Alias DataTableProps<TData>

Type Declaration

• OptionalcolumnResizeMode?: "onChange" | "onEnd"

  How column-resize updates commit to state.

  • "onChange" (default): live-resize while the pointer moves.
  • "onEnd": commit only on release, useful for expensive cell renderers.

• columns: ColumnDef<TData, any>[]

• OptionalcolumnSizing?: ColumnSizingState

  Controlled column-sizing state.

• data: TData[]

• OptionalenableColumnResizing?: boolean

  When true, users can resize columns by dragging a handle on the right edge of each header cell. Opt-in because enabling it forces table-layout: fixed which switches column sizing from content-driven to declared-width. Per-column opt-out via ColumnDef.enableResizing = false. Default sizes come from TanStack: size: 150, minSize: 40, maxSize: 600 — override per column.

• OptionalenableExpander?: boolean

  Whether to render the built-in far-left expander column that hosts the expand/collapse chevron for rows with sub-rows. Defaults to true when getSubRows is provided. Set to false to opt out (e.g. if you place the chevron in a data cell yourself).

• OptionalestimateRowHeight?: number

  Estimated row height (px) seeding the virtualizer before measurement. Default: 48.

• Optionalexpanded?: ExpandedState

  Controlled expanded state — which group rows are open.

• OptionalgetRowCanExpand?: (row: Row<TData>) => boolean

  Overrides whether a row can expand. By default a row can expand only when it has sub-rows.

• OptionalgetRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string

  Returns a stable unique id for each row. Recommended alongside getSubRows so expand state survives data refreshes and re-orderings.

• OptionalgetSubRowCount?: (row: Row<TData>) => number

  Number of sub-rows an expanded row contributes. Pair with renderSubRowItem to expose sub-rows as individually addressable items. Required (instead of renderSubRows) for sub-rows to participate in virtualized mode, where each sub-row becomes its own virtual item. Keep cheap — runs for every expanded row.

• OptionalgetSubRows?: (originalRow: TData, index: number) => TData[] | undefined

  Returns the nested child rows for a given row. When provided, the table builds an expandable tree independent of grouping, and rows with children toggle their own expansion on click (like group headers). Keep this cheap — it runs for every row and sub-row on each render.

• Optionalgrouping?: GroupingState

  Array of column IDs to group rows by. When set, TanStack groups leaf rows and renders a group header row per unique value. Groups are collapsed by default unless expanded or initialState.expanded specifies otherwise.

• OptionalheaderWrap?: "nowrap" | "wrap"

• OptionalinitialState?: Partial<TableState>

• OptionalisRowActive?: (row: Row<TData>) => boolean

  Returns true if the row should be visually highlighted as "active" (e.g. selected in a master-detail layout).

• OptionalmanualSorting?: boolean

  When true, table does not sort data client-side; use for server-sorted data.

• OptionalonColumnSizingChange?: OnChangeFn<ColumnSizingState>

• OptionalonExpandedChange?: OnChangeFn<ExpandedState>

• OptionalonRowClick?: (row: Row<TData>) => void

  Called when a body row is clicked. Not fired for group rows, expandable rows (which toggle their own expansion instead), buttons, links, or elements with role="button".

• OptionalonSortingChange?: (updater: Updater<SortingState>) => void

• Optionaloverscan?: number

  Rows rendered beyond the visible window in each direction when virtualized. Default: 10.

• OptionalrenderGroupRow?: (args: { columnCount: number; row: Row<TData> }) => ReactNode

  Optional custom renderer for group header rows. Receives the grouped Row and a visible-column count (for colSpan). If omitted, a default header with chevron, group value, and subrow count is rendered.

• OptionalrenderSubComponent?: (args: { columnCount: number; row: Row<TData> }) => ReactNode

  Renders custom UI beneath an expanded row as a single full-width (colSpan) row — for detail panels / sub-components whose shape differs from the parent columns. Pair with getRowCanExpand to control which rows can expand. Use INSTEAD of getSubRows (which renders shared-column child rows). The chevron still renders in the far-left expander column. For tabular sub-rows that should remain real rows of this table, prefer renderSubRows; reach for renderSubComponent when the expanded content needs columns fully independent of the parent (e.g. a nested Table.Root).

• OptionalrenderSubRowItem?: (args: { columnCount: number; index: number; row: Row<TData> }) => ReactNode

  Renders a single sub-row by index (0..getSubRowCount-1) for an expanded row. Must return one Table.Row. Used in both modes; preferred over renderSubRows when present in virtualized mode (and required there for windowed sub-rows).

• OptionalrenderSubRows?: (args: { columnCount: number; row: Row<TData> }) => ReactNode

  Renders extra table rows directly beneath an expanded row, inside the same <tbody>. Must return one or more Table.Row elements (cells align to the parent column grid; use colSpan to merge columns — columnCount includes the expander column). Use for tabular sub-rows whose headers differ from the parent. Mutually exclusive with renderSubComponent.

• Optionalstate?: Partial<TableState>

• OptionalsubRowIndent?: number

  Left-padding applied to the first cell of each sub-row, multiplied by the row's depth (in Chakra spacing units). Default: 6 (≈ 1.5rem per level). Set to 0 to disable nesting indentation.

• Optionalvirtualized?: boolean

  Opt-in row virtualization. Renders the table inside a fixed-height scroll container (virtualizedMaxHeight) and only mounts the visible window of rows (plus overscan), with a sticky header and dynamic row measurement. Defaults off so existing consumers are unaffected. Expanded sub-rows are virtualized only via getSubRowCount + renderSubRowItem (or renderSubComponent); renderSubRows blocks are not windowed.

• OptionalvirtualizedMaxHeight?: number | string

  Scroll-container height when virtualized. Default: "70vh".