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.

NameDescriptionselectedRow

An object with two properties: data (the selected row as an object), and index (the index of the selected row in the source data)

data

The raw data in the table, organized as an object with one key per column. Does not include any filters or sorting.

pageSize

The number of rows in each page

recordUpdates

An array of objects for rows that have been updated in editable tables. If there are no updates to save, the array is empty.

changeSet

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.

paginationOffset

Used with server side pagination, to choose the correct offset in the query. For example:

SELECT * FROM table
LIMIT {{ table1.pageSize}}
OFFSET {{ table1.paginationOffset}}
sortedColumn

Used with server side pagination to choose which column to sort by

sortedDesc

If sortedDesc is true, then the query powering the table should sort by descending, and vice versa

bulkUpdateAction

The name of the query connected to the table component's bulk update action. Evaluates to an empty string if no query is selected

defaultSortByColumn

The name of the selected default sort by column. Evaluates to an empty string if no column is selected

defaultSortDescending

Evaluates to true if the table component's default sort by setting is set to descending, and false if set to ascending

normalizedData

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

displayedData

The data in the table, organized as an array of objects, one per record, with the table filters applied

displayedDataIndices

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

filters

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)

filterStackType

The type of stacking in the filters applied to the table: "or" or "and"

selectedIndex

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

dynamicColumnSettings

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

useDynamicColumnSettings

Evaluates to true if the table's dynamic column settings toggle is toggled on, and false if it's toggled off

columns

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

columnColors

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

columnVisibility

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

selectedCell

The currently selected table cell, formatted as object with values for the cell's data, columnName, and index

columnWidths

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

columnHeaderNames

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

columnFormats

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

calculatedColumns

An array of the names of any custom columns added to the table. Undefined if no custom columns have been configured

columnEditable

An object representing any table columns configured as editable, with a key as the column name and a value of true

columnMappers

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

columnMappersRenderAsHTML

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

columnAllowOverflow

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

alwaysShowPaginator

True if the always show paging component setting is toggled on

sort

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)

showSummaryFooter

True if the Show summary footer setting is toggled on

selectedPageIndex

The index of the currently selected table page, starting at 0

showFilterButton

True if the show filter button setting is toggled on

showAddRowButton

When true, a button is displayed to allows users to add a new row to the table

showDownloadButton

True if the show download button setting is toggled on

showRefreshButton

True if the show refresh button setting is toggled on

downloadRawData

True if the download raw CSV setting is toggled on

sortMappedValue

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

allowMultiRowSelect

True if the allow selecting multiple rows setting is toggled on

actionButtonPosition

The value of the position of action buttons setting, left or right

actionButtonColumnName

The value of the action button column name field. Defaults to Actions if no action buttons are configured

actionButtonSelectsRow

True if the action's select row on click setting is toggled on

actionButtons

An object representing the action buttons for each column

dynamicRowHeights

True if the table's rows will increase their heights to fit multi-line content

selectRowByDefault

True if the select the first row by default setting is toggled on

showPaginationOnTop

True if the position pagination UI on top setting is toggled on

showClearSelection

True if the show a button to clear selection setting is toggled on

showFetchingIndicator

True if the show loading state setting is toggled on

serverPaginated

True if the server side paginated setting is toggled on

serverPaginationType

The selected type if server side pagination is configured. Currently supported options: limitOffsetBased, forwardCursorBased, graphqlCursorBased

totalRowCount

The value of the number of rows in this table setting if limit offset based server side pagination has been configured

overflowType

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.

newRow

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

nextAfterCursor

The value of the next page cursor field if cursor based or GraphQL Relay cursor based server side pagination has been configured

hasNextAfterCursor

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

nextBeforeCursor

The value of the previous page cursor field if GraphQL Relay cursor based server side pagination has been configured

afterCursor

An object representing the values of subsequent cursor fields if GraphQL Relay cursor based server side pagination has been configured

beforeCursor

An object representing the values of previous page cursor fields if GraphQL Relay cursor based server side pagination has been configured

columnAlignment

An object representing any table columns with alignment applied, with a key as the column name and a value of left, center, or right

disableSorting

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.

columnTypeSpecificExtras

An object representing properties for some column types that support additional configuration (e.g., values and labels for a column formatted as dropdown)

columnWidthsMobile

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

columnRestrictedEditing

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

saveChangesDisabled

Evaluates to true if saving changes is disabled

showCustomButton

Evaluates to true if Disable save changes is enabled

customButtonName

Evaluates to true if Show custom button is enabled

onCustomButtonPressQueryName

The name of the query triggered by the custom button

columnFrozenAlignments

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

useCompactModeDeprecated

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.

NameDescriptionSave changes

A user saves changes to existing data

Cancel changes
Row select change

A user changes the selected row

Row click

A user clicks on a row

Save new

A user saves new data

Filter change

A user changes filtering options

Sort change

A user changes the sorting of data

Page change

A user changes the current page of data

Cell change

A user edits the contents of a cell

Refresh

Methods

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

NameDescriptionrefresh()

Refresh the Table's data

selectRow(rowIndex: any, scrollToRow: any)

Select the row(s) at the specified 0-based index.

selectPage(selectedPageIndex: string | number)

Switch to the specified page as a 0-based index.

setData(data: any)

Update the data displayed in the table.

setSort(columnName: string, desc: boolean)

Sorts the data by a specified column and direction

setFilters(filters: any, filterStackType: any)

Set one or more filters with an array of filter objects.

setOpenModal(columnName: string)

Set the ID of the currently open modal

clearFilters()

Clears any active filters.

scrollIntoView(options: any)

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