Table (New)

A table of data that can be sorted, filtered, paginated, and downloaded. It supports row selection, server-side pagination, custom columns, and configurable actions.

Refer to our guide about working with tables to learn more. Current users of the Table (legacy) component can also follow the migration guide.

Properties

Available properties for Table (New) with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameTypeDescriptionautoColumnWidthboolean

Whether to automatically set column widths

caseSensitiveFilteringboolean

Whether to perform case-sensitive filtering.

changesetArrayunknown[]

A list of rows, by index, with modified cell values and primary key when the table is configured with a Primary key column.

changesetObjectobject | null

A list of rows, by key or data index, with modified cell values. Keys correspond to either the primary key when the table is configured with a Primary key column or the data index of the changed row.

data{ [key: string]: unknown }[]

The source data for the component.

disableEditsboolean

Whether to prevent users from editing cell values.

disableSaveboolean

Whether to disable saving changes for edited cell values.

emptyMessagestring

The message to display if no value is set.

filterStackobject | null

A list of filters that currently apply and the operator to which they evaluate.

heightType'fixed' | 'auto'

Whether the height automatically resizes to fit content or is a fixed size.

hiddenboolean

Whether the component is visible.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

overflowActionsOverlayMaxHeightnumber | null

The maximum height of the overflow actions overlay.

overflowActionsOverlayMinWidthnumber | null

The minimum width of the overflow actions overlay.

overflowType'scroll' | 'pagination'

The overflow behavior when the contents exceeds the height of the component. Either scroll to display a scrollbar or hidden to clip the contents.

paginationobject | null

The current pagination state. Includes currentPage, offset, and pageSize values, and whether serverPaginated is true.

searchMode'fuzzy' | 'disabled' | 'caseSensitive' | 'caseInsensitive'

The type of search to perform.

searchTermstring

The search term currently filtering items.

selectedCellobject | null

The currently selected cell.

selectedDataIndexnumber | null

The source data row index that corresponds to the selected row. If multiple row selection is enabled, the data of the most recently selected row.

selectedDataIndexes(number | null)[]

The indexes of source data rows that correspond to the currently selected rows when multiple row selection is enabled.

selectedRowobject | null

The currently selected row. If rowSelection is multiple, the most recently selected row.

selectedRowKeystring | number | boolean | null | undefined

The key of the currently selected row when the table is configured with a Primary key column. If rowSelection is multiple, the key of the most recently selected row.

selectedRowKeys(string | number | boolean | null | undefined)[]

A list of currently selected rows, by key, when the table is configured with a Primary key column.

selectedRowsunknown[]

A list of currently selected rows, by index.

selectedSourceRowobject | null

The currently selected source row. If rowSelection is multiple, the most recently selected source row. Excludes mapped values or custom columns that are not present in the source data.

selectedSourceRowsunknown[]

A list of currently selected source rows, by index. Excludes mapped values or custom columns that are not present in the source data.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

sortArrayunknown[]

A list of column IDs and sort direction.

Events

Events are triggered by user interactions with Table (New). Use event handling to trigger queries or other actions in response to events.

NameDescriptionFocus

A user selects the input field.

Blur

A user deselects the input field.

Change cell

A user changes a cell value.

Change filter

A user changes a filter.

Change page

A user changes the current page.

Change sort

A user changes the sort state.

Click row

A user clicks a row.

Click cell

A user clicks a cell.

Click action

A user clicks a row action.

Click toolbar

A user clicks a toolbar button.

Double click row

A user double clicks a row.

Select row

A user selects a row.

Deselect row

A user deselects a row.

Change row selection

A user changes the row selection.

Select cell

A user selects a cell.

Save

A user saves changes.

Cancel

A user discards changes.

Expand row

A user expands a row.

Methods

Methods for interacting with Table (New). You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

clearChangeset()

Clear changesetArray and changesetObject values.

clearFilter(id: any)

Clear the filter with the specified ID.

resetFilterStack()

Resets the Table to its default filters. To clear all filters, use clearFilterStack instead.

clearFilterStack()

Clears all filters. To reset to the default filters, use resetFilterStack instead.

clearSelection()

Clear the currently selected rows.

getDisplayedData(options: any)

Returns the currently displayed data in Table. Respects filtering and sorting.

exportData(options: any)

Exports table data as a file in a CSV, TSV, JSON, or Excel format.

refresh()

Trigger all queries that provide data for the table.

setFilter()

Add a filter to the current filter stack. Updates an existing filter if a corresponding ID is provided.

setFilterStack(filterStack: any)

Sets filters and operator to apply to the Table

setPage(page: any)

Set the current page.

setSort()

Sort rows by the specified column and direction.

clearSort()

Reset the sortArray value and clear sorting applied to the table.

expandRows()

Expands rows with the specified indexes.

collapseRows()

Collapses rows with the specified indexes.

scrollToRow()

Scrolls to a specific row.

selectRow()

Selects a specific row.

selectPreviousRow()

Selects the previous row based on the visual order in the Table.

selectNextRow()

Selects the next row based on the visual order in the Table.

updateLinkedFilter(filterStack: any)

Update the value of the linked Filter component.