DataTableProps
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:59
Props for DataTable component.
Type Parameters
Section titled “Type Parameters”TData extends object
Row data type (must have _id field for selection)
Defaults:
isDone: trueisLoadingMore: falseenableRowSelection: falseisLoading: falsedensity: “comfortable”
Properties
Section titled “Properties”columnEntries?
Section titled “columnEntries?”
optionalcolumnEntries?:ColumnEntry<string>[]
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:193
The active view’s FULL column list — every field, exactly once, in
display order, each a ColumnEntry (possibly carrying width/
pinned/hidden overrides). undefined keeps TanStack’s own natural
(declaration) order, every column visible, nothing pinned/resized
beyond each columnDef’s own static size (an unmigrated caller keeps
today’s behavior). Replaces Step 20’s separate visibleColumns/
columnOrder props — one array drives order, visibility, pinning
(sticky left/right groups, offsets from column.getStart/.getAfter),
AND resizing (each column’s CSS width) together.
columns
Section titled “columns”columns:
ColumnDef<TData>[]
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:64
TanStack Table column definitions.
data:
TData[]
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:61
Array of data to display in table rows.
density?
Section titled “density?”
optionaldensity?:ListDensity
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:209
Row density (Decision 29), cookie-backed by the caller (Decision 42).
Default
Section titled “Default”"comfortable"emptyState?
Section titled “emptyState?”
optionalemptyState?:ReactNode
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:222
Rendered in place of the table body when data.length === 0 && isDone — one of ListViewEmptyState’s three variants, chosen by the caller (CollectionListView), since only it knows whether a search/filter is active.
enableRowSelection?
Section titled “enableRowSelection?”
optionalenableRowSelection?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:100
Enable checkbox column for row selection.
getRowProps?
Section titled “getRowProps?”
optionalgetRowProps?: (row) =>Pick<ComponentProps<"tr">,"onPointerEnter"|"onPointerLeave"|"onFocus"|"onDoubleClick">
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:128
Per-row DOM event handlers, spread onto each <TableRow>. Generic —
DataTable has no concept of peeking, prefetching, or the Inspect
peek; ListViewLayout/CollectionListViewData forward their own
onRowHoverStart/onRowHoverEnd/onRowFocus/row-double-click
handlers through it (Step 13; onDoubleClick added for the
double-click-opens-peek follow-up — see isInteractiveRowTarget
for the guard a caller’s own handler should apply first).
Parameters
Section titled “Parameters”TData
Returns
Section titled “Returns”Pick<ComponentProps<"tr">, "onPointerEnter" | "onPointerLeave" | "onFocus" | "onDoubleClick">
highlightedRowId?
Section titled “highlightedRowId?”
optionalhighlightedRowId?:string
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:146
The id of one row to visually highlight — a transparent-primary
background (bg-primary/10, opaque color-mix() equivalent on
sticky/pinned cells, same recipe as hover/selected already use),
applied via data-state="highlighted". Generic, like getRowProps
above: DataTable has no concept of WHY a row is highlighted — the
collection list view’s Inspect peek is the first caller, passing its
own peekId. Precedence (Decision, developer-approved): a row
selected for bulk actions always wins (data-state="selected"
takes priority over "highlighted" at the point this is computed —
never both at once), and highlighted always wins over hover (an
! on the highlighted rule in ui/table.tsx — hovering the
currently-peeked row must not make it look like any other row).
isDone?
Section titled “isDone?”
optionalisDone?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:72
Whether all results have been loaded.
When true, Load More button is hidden.
isLoadingMore?
Section titled “isLoadingMore?”
optionalisLoadingMore?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:84
Whether Load More query is in flight. Shows loading state on button.
isPending?
Section titled “isPending?”
optionalisPending?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:154
Whether initial data is loading. Shows loading skeleton in table body.
isRefetching?
Section titled “isRefetching?”
optionalisRefetching?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:236
true while the CURRENT page is stale (usePaginatedQuery’s own
isPlaceholderData, Decision 46) — a view/filter/sort switch keeps
showing the PREVIOUS query’s rows, dimmed (opacity-60) and marked
aria-busy="true" on <tbody>, instead of a blank/loading frame,
until the new page replaces them. Rows stay fully interactive while
this is true — Load More and row actions on the stale rows remain
valid.
onColumnEntriesChange?
Section titled “onColumnEntriesChange?”
optionalonColumnEntriesChange?: (columns) =>void
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:206
Invoked when the user RESIZES a column via its header’s own drag handle
or focused ArrowLeft/ArrowRight — the ONE way this component itself
mutates columnEntries (reorder/hide/pin all come from the columns
menu instead, ListViewColumnsAction/DataTableColumnsMenu, which calls
the SAME setter the caller passes there — Decision 48: “resizing is NOT
controlled from this menu, only from the header’s own drag handle”).
Called with the FULL next array (one entry’s width replaced), never a
partial patch. Omit to make every column’s width effectively read-only
(the resize handle still drags visually but never commits).
Parameters
Section titled “Parameters”columns
Section titled “columns”ColumnEntry<string>[]
Returns
Section titled “Returns”void
onLoadMore?
Section titled “onLoadMore?”
optionalonLoadMore?: () =>void
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:78
Callback when Load More button is clicked. Parent should fetch next page and append to data.
Returns
Section titled “Returns”void
onSelectionChange?
Section titled “onSelectionChange?”
optionalonSelectionChange?: (selectedIds) =>void
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:117
Invoked whenever the selected row ids change (a row toggled, “select all” toggled, or the
caller itself passed a new selectedIds, e.g. “Select all N loaded” or Clear). The
caller — ListViewLayout — owns what a selection means (the list.bulkActions slot’s
docs), not this generic table.
Parameters
Section titled “Parameters”selectedIds
Section titled “selectedIds”string[]
Returns
Section titled “Returns”void
onSortChange?
Section titled “onSortChange?”
optionalonSortChange?: (sort) =>void
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:171
Invoked with the next sort state when a sortable header is clicked
(undefined clears back to defaultView.sort). Only columns whose
ColumnDef.enableSorting is true render as clickable — set centrally
by getCollectionColumnDefs from each field’s admin.enableSorting.
Parameters
Section titled “Parameters”CollectionTableSort<string> | undefined
Returns
Section titled “Returns”void
pageSize?
Section titled “pageSize?”
optionalpageSize?:number
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:214
The current page size — used ONLY to label the Load More button (“Load 25 more”); the Select itself renders in ListViewToolbar (Decision 22), not here.
queryError?
Section titled “queryError?”
optionalqueryError?:ReactNode
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:225
Rendered in place of the whole scroll area (header included) when the underlying query failed — ListViewQueryError, built by the caller from useVexListQuery’s error (Step 8). Takes priority over emptyState.
selectedIds?
Section titled “selectedIds?”
optionalselectedIds?:string[]
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:109
The currently-selected row ids — a controlled component (like every other primitive in
this package): the caller owns the selection and this table only renders it and reports
changes, it never persists its own copy. Keyed by _id (getRowId), so a selection
reported against a row that later disappears from data (a delete) naturally stops being
checked rather than silently pointing at a different row by index. Defaults to [].
optionalsort?:CollectionTableSort<string>
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:163
The list’s current sort (Decision 4: one { field, order }, never
TanStack’s multi-column SortingState). undefined means no column is
actively driving the sort — every sortable header then renders unsorted.
sortDisabled?
Section titled “sortDisabled?”
optionalsortDisabled?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:178
true while a search is active — every sortable header disables itself
and shows “Sorted by relevance” (Decision 7) instead of calling
onSortChange.
totalCount?
Section titled “totalCount?”
optionaltotalCount?:number|null
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:95
Total count of documents across all pages.
numberwhen count succeedednullwhen collection has >32k documentsundefinedwhen count not requested
Used in the “Showing N of M” footer status line (Decision 35).
totalDocsCapped?
Section titled “totalDocsCapped?”
optionaltotalDocsCapped?:boolean
Defined in: packages/react/src/ui/data-table/DataTable/index.tsx:217
Whether totalCount hit collection.admin.view.state.countLimit (Decision 35) — the footer then shows "{totalCount.toLocaleString()}+" instead of the bare number. Ignored when totalCount is null/undefined.