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).

• 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.

• 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

• 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).

• 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.