Table
This is a legacy component and has been replaced with a new Table component.
A table of data that can be sorted, filtered, paginated, and downloaded in CSV format. It supports row selection and insertion, server-side pagination, and custom columns.
Properties
Available properties for Table. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.
An object with two properties: data
(the selected row as an object), and index
(the index of the selected row in the source data)
The raw data in the table, organized as an object with one key per column. Does not include any filters or sorting.
The number of rows in each page
An array of objects for rows that have been updated in editable tables. If there are no updates to save, the array is empty.
An object representing changes to an editable table. Each key is a table index for changed rows, and each value is an object whose key is the changed column and value is the changed value.
Used with server side pagination, to choose the correct offset in the query. For example:
SELECT * FROM table
LIMIT {{ table1.pageSize}}
OFFSET {{ table1.paginationOffset}}
Used with server side pagination to choose which column to sort by
If sortedDesc
is true, then the query powering the table should sort by descending, and vice versa
The name of the query connected to the table component's bulk update action. Evaluates to an empty string if no query is selected
The name of the selected default sort by column. Evaluates to an empty string if no column is selected
Evaluates to true if the table component's default sort by setting is set to descending, and false if set to ascending
The data in the table, organized as an array of objects, one per record. This property returns all of the data backing the table and ignores any table sorting or filters
The data in the table, organized as an array of objects, one per record, with the table filters applied
An array of the indices of the displayed data with respect to the original dataset. For example, if your table has 20 rows and you apply a filter that filters it to 2 rows, this array will contain the original indices of the currently displayed rows
The filter(s) applied to the table, formatted as an array of objects, one per filter. Each filter object contains a columnName, operator (isNotEmpty, greaterThan, etc.), and a filterValue (empty if not provided)
The type of stacking in the filters applied to the table: "or" or "and"
The index of the currently selected row in the table. Indices are set based on the data backing the table, so will be inconsistent with the order the data appears in the table if it is sorted or filtered
The value of the table's dynamic column settings setting. Evaluates to an empty string if the dynamic column settings are toggled off, or if they're toggled on but no value is provided in the input
Evaluates to true if the table's dynamic column settings toggle is toggled on, and false if it's toggled off
The columns in the table, formatted as an array. Note that any changes to columns in the table settings (like changing a name or hiding a column) will not be reflected in this property: it represents columns as they appear in the query backing the table
The provided background color(s) in the table, formatted as an object with one key per column name. Each key's value is an array of background color values for each cell in the column
The table's column visibility settings, formatted as an object with a key per column and a value of true if the column is visible, false if it's toggled as hidden
The currently selected table cell, formatted as object with values for the cell's data, columnName, and index
An array of objects for each column with an id (column name) and value (width) for any columns that have been manually resized. If no columns have been resized, the property will be undefined
An object representing any table columns that have been renamed, with the key as the original column name and the value as the new name. If no columns have been renamed, the property will be undefined
An object representing any table columns that have been formatted as a specific data type, with the key as the column name and the value as the format (button, dropdown, etc.). If no columns have been formatted, the property will be undefined
An array of the names of any custom columns added to the table. Undefined if no custom columns have been configured
An object representing any table columns configured as editable, with a key as the column name and a value of true
An object representing the table's configured column mappers, with an array for each column containing an entry for every row. Undefined if no column mappers have been configured
An object representing the table's column mappers render as HTML setting, with a key as the column name and a value of true if a column's mapper is set to render as HTML. Undefined if no column mappers are configured to render as HTML
An object representing the table's allow overflow setting, with a key as the column name and a value of true if the column is set to allow overflow. Undefined if no columns are configured to allow overflow
True if the always show paging component setting is toggled on
An array of objects for the table's selected sort by column(s). Each object has an entry for id
(the column name) and desc
(true if the sort is descending)
True if the Show summary footer setting is toggled on
The index of the currently selected table page, starting at 0
True if the show filter button setting is toggled on
When true, a button is displayed to allows users to add a new row to the table
True if the show download button setting is toggled on
True if the show refresh button setting is toggled on
True if the download raw CSV setting is toggled on
An object representing the table's settings for sorting by column mappers, with a key for each column where the sort by mapped value setting is toggled on and a value of true
True if the allow selecting multiple rows setting is toggled on
The value of the position of action buttons setting, left or right
The value of the action button column name field. Defaults to Actions if no action buttons are configured
True if the action's select row on click setting is toggled on
An object representing the action buttons for each column
True if the table's rows will increase their heights to fit multi-line content
True if the select the first row by default setting is toggled on
True if the position pagination UI on top setting is toggled on
True if the show a button to clear selection setting is toggled on
True if the show loading state setting is toggled on
True if the server side paginated setting is toggled on
The selected type if server side pagination is configured. Currently supported options: limitOffsetBased, forwardCursorBased, graphqlCursorBased
The value of the number of rows in this table setting if limit offset based server side pagination has been configured
Toggle setting for Table's overflow: 'pagination' for a paginated Table (default) or 'scroll' for a scrolling Table. Both can use the same server paginated table settings.
The object that represents the new row being added to the table, if an on row add query has been configured and you click the plus icon to add a new row. You can reference a particular column in the newly to be added row with table.newRow.column_name
The value of the next page cursor field if cursor based or GraphQL Relay cursor based server side pagination has been configured
The value of the whether or not there is more data to load field if cursor based or GraphQL Relay cursor based server side pagination has been configured
The value of the previous page cursor field if GraphQL Relay cursor based server side pagination has been configured
An object representing the values of subsequent cursor fields if GraphQL Relay cursor based server side pagination has been configured
An object representing the values of previous page cursor fields if GraphQL Relay cursor based server side pagination has been configured
An object representing any table columns with alignment applied, with a key as the column name and a value of left
, center
, or right
An object representing the columns where sorting has been updated, where the key is the column name and the value is true
if sorting is disabled, false
otherwise.
An object representing properties for some column types that support additional configuration (e.g., values and labels for a column formatted as dropdown
)
An array of objects for each column with an id (column name) and value (width) for any columns that have been manually resized in the mobile layout. If no columns have been resized, the property will be undefined
An object representing any table columns configured as editable but restricted from editing, with a key as the column name and a value of true
Evaluates to true if saving changes is disabled
Evaluates to true
if Disable save changes is enabled
Evaluates to true
if Show custom button is enabled
The name of the query triggered by the custom button
An object representing any table columns with frozen alignment applied, with a key as the column name and a value of left
, center
, or right
True if the compact mode setting is toggled on
Events
Events are triggered by user interactions with Table. Use event handling to trigger queries or other actions in response to events.
A user saves changes to existing data
A user changes the selected row
A user clicks on a row
A user saves new data
A user changes filtering options
A user changes the sorting of data
A user changes the current page of data
A user edits the contents of a cell
Methods
Methods for interacting with Table. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.
Refresh the Table's data
Select the row(s) at the specified 0-based index.
Switch to the specified page as a 0-based index.
Update the data displayed in the table.
Sorts the data by a specified column and direction
Set one or more filters with an array of filter objects.
Set the ID of the currently open modal
Clears any active filters.
Scrolls the canvas or parent container so that the selected component appears in the visible area.