Legacy Table component migration
Learn about updated properties in the new Table component.
You don't have to upgrade existing apps that use the legacy Table component. You can continue to configure the legacy Table in your existing apps, and then use the new Table component when you have an app to build.
If you want to migrate an existing app to use the new Table component, use this guide to learn more about the differences before migrating.
The new Table no longer supports the Auto column format. Each column must have an explicit format. Each column can contain an optional source key, which maps the column to a field in the data source. If the source key is omitted, the column is effectively a custom column.
Some commonly used Table properties have been renamed. Anywhere in your app where you reference these properties, you’ll want to update those references to the new property names.
The property to access the Table’s selected row changed from
currentRow in a column’s mapped values is now
currentSourceRow, to make it explicit that it references the underlying source row’s data.
recordUpdates and changeSet
The legacy Table’s edited fields were exposed in
changeSet. These fields are now
changesetObject, respectively. These properties no longer contain the entire row’s data, and instead only contain the modified fields.
Pagination controls are now nested under
table1.pagination. This means referencing a table’s
pageSize, for example, is done using
table1.pagination.pageSize. Pagination is now accessible in the Table’s Add-ons section in the Inspect tab.
Save and cancel buttons
The new Table exposes the built-in save and cancel buttons for bulk editing in the Add-ons section of the Inspect tab.
The legacy Table exposed several fields to represent the Table’s sorting state:
sortedDesc. The new Table exposes the
sortObject properties, which represent the entire sort state of the table.
The legacy Table did not support nested filtering. The new Table supports nested filters with the
See below for a feature-by-feature comparison of the legacy Table and the new Table.
Updated approaches to existing features
|Column type||Auto column||The new Table forces explicit column types.|
|Column type||Button column||The new Table has redesigned actions for triggering events.|
|Column type||User Email column||The new Table has an Avatar column that serves the same purpose.|
|Column type||Modal column||Modal columns are not supported natively in the new Table, but can be implemented by using a Column event handler to trigger a Modal component open.|
|Actions||Action button columns||The new Table floats all action buttons to the right edge of the table when you hover over a row.|
Legacy features unsupported in the new Table component
|Column type||Rating column||You can use a Tag column to represent a rating cell instead.|
|Sorting||Sort columns by raw value||The new Table sorts columns by their mapped values.|
|Styling||Row color||Row color is not supported in the new Table.|
Updated 21 days ago