Skip to main content

Configure rows in the Table component

Learn how to configure table rows.

The Table component has a number of row-related features and supports adding new rows of data.

Configure row actions​

A row action is a button that appears when the cursor hovers over a row. You configure row actions with event handlers that perform an action or trigger a query when clicked.

Row actions are useful for performing an action with a specific row, such as deleting it. To configure an row action:

  1. Click in the Row actions section to add a row action.
  2. Specify a label and icon for the row action.
  3. Configure the event handler with the action to perform when clicked.

Select rows​

The Table component supports single and multiple row selection, or you can disable selection entirely. Use the Row selection settings in the Interaction section of the Inspector to specify the row selection option to use.

The Default row option controls whether the table selects a row by default. If enabled, you can specify the default row index (or indexes) to select.

You can enable Persist row selection if you want the table to maintain the selected row even if they are no longer present in the data source This is useful if the data is filtered outside of the table. This option requires that the Primary key be set for the table.

Expand rows with additional content​

Expandable rows enables you to assemble a repeatable set of components that appear when a user expands a row. Click in the Content settings and toggle Enable expandable rows on.

When enabled, you can add components directly to the first row instance. These appear in all row instances.

Expandable rows can use the currentRow and currentSourceRow properties to reference column values.

Group rows by column​

You can provide users with controls to group rows using the Group by toolbar button

You can group rows by column value to provide an additional method of organizing data. Click in the Content settings and use Group rows by to specify columns with which to group.

When grouping is enabled, the Table component groups unique column values into expandable sections. You can click a group to reveal all of its grouped rows.

You cannot group rows using editable columns. Instead, add a custom column that references the editable column value and use that for grouping.

Add new rows​

In addition to editing column cell values, you can enable the Add Row add-on to insert new table rows and save them to your data source. Any columns for which you want to provide values must either be editable or editable for new rows only.

Enable the add-on​

  1. Click Toolbar in the Add-ons section of the Inspector.
  2. Click to add a new toolbar button.
  3. Select Add Row.

Add a row​

Click the button in the toolbar to display a pop-up row editor for you to add a new row of data. New row data is temporarily stored in the table's newRows property.

Write a query to save changes​

To save changes, you must first write a query that references newRows and saves them to the existing data source. For example, to save changes back to a PostgreSQL table, write a query that uses the bulk insert action.

If you need to save cell value changes and add new rows, you can combine the values of changesetArray and newRows for use with the Bulk upsert via a primary key action using ... spread syntax.

Combine changes and new rows
{{ [...table1.changesetArray, ...table1.newRows] }}

This combines both arrays into a single array of items. The bulk upsert action updates any existing record with a matching primary key, such as an ID, or create a new records if not.

Use spread syntax to combine edited column values and a new row.

Configure the save action​

When you make a column editable, Retool automatically adds the Save action add-on. You then add event handlers that run when the user clicks Save. Select the add-on and configure an event handler to trigger the query when run.

Saving changes does not automatically reload the table data. To do this, configure a Success event handler for the update query to refresh the table:

  1. Click to add an event handler.
  2. Select the Control component action and the table to refresh.
  3. Select the Refresh method.

When the query runs successfully, the table automatically refreshes. This action triggers the table's data source query to retrieve the latest data, which now includes the changes that were just saved.