React customization API

TableCustomizationOptions and the types below are exported by @inertiax/react. Pass customization through InertiaXProvider table={...} or <InertiaX table={...} />. Resolution is built-in → provider → component, isolated from sibling tables.

Component options

Option	Purpose
prop	Named Inertia prop; required by InertiaX from @inertiax/react-inertia
envelope	Supplied response; required by the direct InertiaXRenderer
debounceMs	Shared search/filter delay, default 300 ms; nonnegative; 0 dispatches immediately
controllerRef	Ref to the table controller; cleared on unmount
table	Theme, text, regions, renderers, and event handlers
pipeline	Advanced transformations of validated envelopes
children	React content or a function receiving the session; replaces the default table UI

See Direct React rendering for the supplied-envelope workflow and ownership rules.

Theme tokens

Set theme.tokens to a partial token object. Unknown token keys fail validation.

Group	Token keys
Surfaces and color	background, foreground, surface, surfaceForeground, popover, popoverForeground, muted, mutedForeground, accent, accentForeground, primary, primaryForeground, destructive, border, input, ring
Geometry and spacing	controlRadius, tableRadius, controlHeight, cellPaddingX, cellPaddingY
Table states	headerBackground, rowHoverBackground, rowSelectedBackground, skeletonBackground, stateBackground
Type and elevation	fontFamily, fontSize, shadow

Class names

Set theme.classNames using these targets:

Area	Theme keys
Outer controls	root, toolbar, filters, footer, pagination, selectionSummary, filterGroup
Table structure	tableWrapper, table, tableHeader, tableHeaderRow, tableHeaderCell, tableBody, tableBodyRow, tableBodyCell
State and cell content	stateRow, stateCell, cell

A string appends classes. An object accepts add: string, remove: string | readonly string[], and replace: string. Replacement supplies the whole class value for that target.

Text overrides

Each group is partial except clauses, which is a comparison-key-to-label map.

Group	Keys
search	label, placeholder, clear
columns	label, searchPlaceholder, empty, toggle
sorting	ascending, descending
filters	label, add, addGroup, clear, apply, applyRange, and, or, any, match, conditions, groupOperator, field, clause, remove, removeGroup, empty, rangeFrom, rangeTo, valuePlaceholder, optionsTruncated
boolean	true, false; filter choices and fallback cell labels
refresh, loading, empty	label
error	label, retry
selection	summary, all, row
result	summary
pagination	rowsPerPage, pageSummary, first, previous, next, last
copy	label, success, error

Server-supplied clause and Boolean cell labels take precedence over texts.clauses and texts.boolean. See Labels from Laravel for translation.

Regions

Every region receives component, controller, state, status, and table (the TanStack table).

Region	Prop type and additions
beforeToolbar, toolbar, afterToolbar, footer, pagination	TableRegionProps
tableBodyWrapper	TableBodyWrapperRegionProps, plus children
loadingState, errorState, emptyState	TableStateRegionProps, plus colSpan

Cell, icon, and input renderers

Customization array	Renderer props
cellRenderers	TableCellRendererProps: cell, column, and rowId
iconRenderers	TableIconRendererProps: cell renderer props plus icon
filterInputs	TableFilterInputRendererProps: ariaLabel, clause, definition, optional id, value, and onChange

Use catalog operations { operation: 'register', key, value } for a new type or { operation: 'replace', key, value } for an existing type. Duplicate registration and missing replacement targets fail. See Registration & diagnostics.

Custom filter inputs preserve JSON primitive types and emit undefined to clear a condition. A native select emits strings: converting numeric or Boolean options to strings changes their identity. Decode them before calling onChange, and emit arrays for multi-select inputs.

React prop identity

Inline customization objects are valid. Keep static presets at module scope; for state-dependent presets, useMemo and useCallback can avoid rebuilding customization on unrelated renders. This is an optional optimization, not a correctness requirement. Closures must still capture the current values they use.

Event payloads and controller methods are listed in Controller & events.