Documentation

Programmatic Control

Read and change table state from your code — sort, filter, paginate, export, and more.

Access the API

Keep a ref (or instance) to the table, then call methods on the TableAPI.

React TSX

Copy

const tableRef = useRef(null);

<SimpleTable ref={tableRef} columns={columns} rows={rows} />

tableRef.current?.getVisibleRows();

Read data

getVisibleRows respects filters, sort, and the current page. getAllRows returns the full processed set. getHeaders returns the current column defs.

React TSX

Copy

const visible = tableRef.current?.getVisibleRows();
const all = tableRef.current?.getAllRows();
const headers = tableRef.current?.getHeaders();

Sort, filter, and paginate

Drive UI state from your own controls with applySortState, applyFilter, setQuickFilter, and setPage.

React TSX

Copy

await tableRef.current?.applySortState({
  accessor: "price",
  direction: "desc",
});

await tableRef.current?.applyFilter({
  accessor: "status",
  operator: "equals",
  value: "Available",
});

await tableRef.current?.clearAllFilters();
tableRef.current?.setQuickFilter("keyboard");
await tableRef.current?.setPage(2);

Related APIs

Feature-specific methods are covered on their docs pages: updateData, exportToCSV, row selection, row grouping, pivot, column visibility, and pinning.

Example

Use the buttons to sort, filter, and read table state. Code or StackBlitz has the full example.

No status message

StackBlitz

API methods

Data manipulation

Property	Required	Description	Example
Property	Required	Description	Example
`updateData` (params: { accessor: Accessor; newValue: CellValue; rowId?: RowId; rowIndex?: number }) => void	Optional	Programmatically update a cell. Prefer rowId (requires getRowId); rowIndex targets the source rows array. Triggers cellUpdateFlash when enabled.
`setHeaderRename` (params: { accessor: Accessor }) => void	Optional	Programmatically triggers the header rename mode for a specific column. Sets the header cell to editing mode, allowing the user to rename it. The header must have enableHeaderRename enabled.

Data access

Property	Required	Description	Example
Property	Required	Description	Example
`getVisibleRows` () => TableRow[]	Optional	Returns the currently visible rows in the table. When pagination is enabled, this returns only the rows on the current page. When filters are applied, returns only filtered rows. This is useful for getting a snapshot of what the user is currently viewing.
`getAllRows` () => TableRow[]	Optional	Returns all rows in the table as TableRow objects, flattened and including nested/grouped rows. Each TableRow contains the raw row data plus metadata like depth, position, and rowPath. Unlike getVisibleRows, this returns the complete dataset regardless of pagination, filters, or grouping state. Perfect for exporting complete data, analytics, or batch operations.
`getHeaders` () => ColumnDef[]	Optional	Returns the table's current header/column definitions. Includes all column configuration such as accessors, labels, types, and formatting options. Useful for dynamic table manipulation, export configurations, or building custom UI controls.

Export

Property	Required	Description	Example
Property	Required	Description	Example
`exportToCSV` (props?: ExportToCSVProps) => void	Optional	Exports the current table data to a CSV file. Respects active filters and sorting. Optionally accepts a props object to customize the filename.

Sort, filter, and pagination

Property	Required	Description	Example
Property	Required	Description	Example
`getSortState` () => SortColumn \| null	Optional	Returns the current sort state of the table. Returns null if no sorting is applied, or a SortColumn object containing the sorted column and direction. Useful for persisting table state, synchronizing with external state management, or implementing custom sort UI.
`applySortState` (props?: { accessor: Accessor; direction?: SortDirection }) => Promise<void>	Optional	Programmatically applies a sort state to the table. Pass a column accessor and optional direction to sort, or undefined to clear sorting. If direction is omitted, the sort cycles through: asc → desc → removed. This method is async and returns a Promise. Perfect for implementing custom sort controls or coordinating sorting with external data sources.
`getFilterState` () => TableFilterState	Optional	Returns the current filter state of the table as a TableFilterState object. The object contains all active filters keyed by unique filter IDs. Each filter includes the column accessor, operator, and values. Useful for debugging, persisting filter state, or building custom filter UI.
`applyFilter` (filter: FilterCondition) => Promise<void>	Optional	Programmatically applies a filter to a specific column. Accepts a FilterCondition object specifying the column accessor, filter operator, and value(s). This method is async and returns a Promise. Supports all filter operators including equals, contains, greaterThan, between, and more. Perfect for implementing custom filter UI, applying saved filters, or creating filter presets.
`clearFilter` (accessor: Accessor) => Promise<void>	Optional	Clears the filter for a specific column identified by its accessor. This method is async and returns a Promise. Only removes filters applied to the specified column, leaving other column filters intact. Useful for implementing 'clear filter' buttons on individual columns or resetting specific filters programmatically.
`clearAllFilters` () => Promise<void>	Optional	Clears all active filters from the table at once. This method is async and returns a Promise. Resets the table to show all data without any filtering applied. Perfect for 'reset all filters' buttons or starting fresh with filter state.
`setQuickFilter` (text: string) => void	Optional	Programmatically sets the quick filter text. This allows you to control the global search/quick filter from your code. Pass a string to set the filter text, or an empty string to clear it. The filter will use the mode and other settings from the quickFilter prop configuration.
`getCurrentPage` () => number	Optional	Returns the current page number when pagination is enabled. Page numbers are 1-indexed (first page is 1, not 0). Returns the current page regardless of whether pagination is client-side or server-side. Useful for tracking user navigation, syncing with URL parameters, or building custom pagination UI.
`setPage` (page: number) => Promise<void>	Optional	Programmatically navigates to a specific page when pagination is enabled. Accepts a 1-indexed page number (first page is 1). This method is async and returns a Promise. Works with both client-side and server-side pagination. If the page number is out of range, it will be clamped to valid bounds. Triggers the onPageChange callback when the page changes. Perfect for implementing custom pagination controls, deep linking, or restoring saved pagination state.

Column editor and pinning

Property	Required	Description	Example
Property	Required	Description	Example
`toggleColumnEditor` (open?: boolean) => void	Optional	Opens, closes, or toggles the column editor menu programmatically. When called without arguments, it toggles the current state (open if closed, close if open). Pass true to explicitly open the menu, or false to explicitly close it. Requires enableColumnEditor. Pair with columnEditorConfig.showToggle: false to hide the built-in Columns strip and drive the editor from your own toolbar button.
`applyColumnVisibility` (visibilityState: Record<Accessor, boolean>) => Promise<void>	Optional	Programmatically controls which columns are visible in the table. Accepts a partial or complete visibility state object where keys are column accessors and values are booleans (true = visible, false = hidden). This method is async and returns a Promise. You can pass just the columns you want to change, and other columns will maintain their current visibility state. Perfect for implementing custom column visibility presets, views, or user preferences.
`getPinnedState` () => { left: Accessor[]; main: Accessor[]; right: Accessor[] }	Optional	Returns { left, main, right }: root accessors in each pin band. Use with applyPinnedState to save and restore layout.
`applyPinnedState` (state: { left: Accessor[]; main: Accessor[]; right: Accessor[] }) => Promise<void>	Optional	Set column order and pin sides in one call. Each root accessor must appear exactly once across left, main, and right. Columns with essential keep required order within each section.

Row grouping

Property	Required	Description	Example
Property	Required	Description	Example
`expandAll` () => void	Optional	Expands all rows at all depths in the table. When working with hierarchical/grouped data, this will expand every level of the hierarchy, revealing all nested rows. Useful for 'expand all' buttons or when you want to show the complete data structure to users.
`collapseAll` () => void	Optional	Collapses all rows at all depths in the table. When working with hierarchical/grouped data, this will collapse every level of the hierarchy, hiding all nested rows. Perfect for 'collapse all' buttons or resetting the table to a compact view.
`expandDepth` (depth: number) => void	Optional	Expands all rows at a specific depth level (0-indexed). Depth 0 represents the top-level rows, depth 1 is the first nested level, depth 2 is the second nested level, and so on. This allows granular control over which hierarchy levels are visible. Useful for showing specific levels of detail without expanding everything.
`collapseDepth` (depth: number) => void	Optional	Collapses all rows at a specific depth level (0-indexed). Depth 0 represents the top-level rows, depth 1 is the first nested level, and so on. This allows you to selectively hide specific hierarchy levels while keeping others visible. Useful for managing complex hierarchies and controlling information density.
`toggleDepth` (depth: number) => void	Optional	Toggles the expansion state for all rows at a specific depth level (0-indexed). If the depth is currently expanded, it will be collapsed, and vice versa. This provides a convenient way to toggle visibility of an entire hierarchy level without tracking state manually.
`setExpandedDepths` (depths: Set<number>) => void	Optional	Sets which depth levels should be expanded, replacing the current expansion state entirely. Accepts a Set of depth numbers (0-indexed). This is useful for restoring saved expansion state, implementing presets, or coordinating expansion across multiple tables. Any depth not in the Set will be collapsed.
`getExpandedDepths` () => Set<number>	Optional	Returns a Set containing all currently expanded depth levels (0-indexed). This allows you to inspect which hierarchy levels are currently visible. Useful for saving expansion state, building custom UI controls, or coordinating with other components.
`getGroupingProperty` (depth: number) => Accessor \| undefined	Optional	Returns the grouping property name (accessor) for a specific depth index (0-indexed). This maps depth levels to their corresponding property names in your rowGrouping configuration. Returns undefined if the depth doesn't exist. Useful for understanding the hierarchy structure or building dynamic UI that adapts to the grouping configuration.
`getGroupingDepth` (property: Accessor) => number	Optional	Returns the depth index (0-indexed) for a specific grouping property name (accessor). This is the inverse of getGroupingProperty - it maps property names to their depth levels in the hierarchy. Returns -1 if the property is not part of the grouping configuration. Useful for programmatically determining which level a property belongs to.