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.
Whether to automatically set column widths
Whether to perform case-sensitive filtering.
A list of rows, by index, with modified cell values and primary key when the table is configured with a Primary key column.
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.
The source data for the component.
Whether to prevent users from editing cell values.
Whether to disable saving changes for edited cell values.
The message to display if no value is set.
A list of filters that currently apply and the operator to which they evaluate.
Which columns the Table is currently grouped by.
Whether the height automatically resizes to fit content or is a fixed size.
Whether the component is visible.
Whether the component takes up space on the canvas if hidden is true.
The amount of margin to render outside of the component.
An array of the newly added rows. Each new row is an object with an entry for each edited cell.
The maximum height of the overflow actions overlay.
The minimum width of the overflow actions overlay.
The overflow behavior when the contents exceeds the height of the component. Either scroll to display a scrollbar or hidden to clip the contents.
The current pagination state. Includes currentPage, offset, and pageSize values, and whether serverPaginated is true.
The type of search to perform.
The search term currently filtering items.
The currently selected cell.
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.
The indexes of source data rows that correspond to the currently selected rows when multiple row selection is enabled.
The currently selected row. If rowSelection is multiple, the most recently selected row.
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.
A list of currently selected rows, by key, when the table is configured with a Primary key column.
A list of currently selected rows, by index.
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.
A list of currently selected source rows, by index. Excludes mapped values or custom columns that are not present in the source data.
Whether the component remains visible in the editor if hidden is true.
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.
A user selects the input field.
A user deselects the input field.
A user changes a cell value.
A user changes a filter.
A user changes the current page.
A user changes the sort state.
A user clicks a row.
A user clicks a cell.
A user clicks a row action.
A user clicks a toolbar button.
A user double clicks a row.
A user selects a row.
A user deselects a row.
A user changes the row selection.
A user selects a cell.
A user saves changes.
A user discards changes.
A user expands a row.
A user collapses an expandable row.
Methods
Methods for interacting with Table (New). You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.
Scrolls the canvas or parent container so that the selected component appears in the visible area.
Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.
Clear changesetArray, changesetObject, and newRows values.
Clear the filter with the specified ID. This method will only work when called on a visible Table.
Resets the Table to its default filters. To clear all filters, use clearFilterStack instead.
Clears all filters. To reset to the default filters, use resetFilterStack instead.
Clear the currently selected rows. This method will only work when called on a visible Table.
Returns the currently displayed data in Table. Respects filtering and sorting.
Exports table data as a file in a CSV, TSV, JSON, or Excel format.
Trigger all queries that provide data for the table.
Add a filter to the current filter stack. Updates an existing filter if a corresponding ID is provided. This method will only work when called on a visible Table.
Sets filters and operator to apply to the Table This method will only work when called on a visible Table.
Set the current page. This method will only work when called on a visible Table.
Sort rows by the specified column and direction. Optionally provide an array of objects to sort by multiple columns. This method will only work when called on a visible Table.
Reset the sortArray value and clear sorting applied to the table. This method will only work when called on a visible Table.
Expands rows with the specified indexes. This method will only work when called on a visible Table.
Collapses rows with the specified indexes. This method will only work when called on a visible Table.
Scrolls to a specific row. This method will only work when called on a visible Table.
Selects a specific row. This method will only work when called on a visible Table.
Selects the previous row based on the visual order in the Table. This method will only work when called on a visible Table.
Selects the next row based on the visual order in the Table. This method will only work when called on a visible Table.
Update the value of the linked Filter component.
Update the columns that Table should group by. Accepts a column id, an object of type { columnId: string, sortDirection: 'asc' | 'desc' }, or an array of column ids or objects. Sort direction defaults to ascending.
Get the current column ordering. This method will only work when called on a visible Table.
Set the current column ordering. This method will only work when called on a visible Table.