Customize the appearance of the Table component
Learn how to customize the Table component using different styles and add-ons.
The Table component includes a range of options to customize the appearance and user experience.
Demo
The following demo app uses a toolbar with custom buttons. It also includes a summary row to summarize column values.
Configure the toolbar
The Table component's toolbar is enabled by default and contains buttons to perform different actions, such as filtering. It also includes navigation controls for paginated data, if enabled. Select the Toolbar add-on to configure toolbar options.
Toolbar position
You can toggle the Position setting to change where the toolbar appears.
Customize buttons
The toolbar includes a selection of buttons by default. You can customize the toolbar buttons and configure custom ones that perform actions when clicked.
| Button Type | Description |
|---|---|
| Filter | Filter table data by column values. |
| Sort | Sort table data by the specified columns. |
| Group by | Group rows by the specified column value. |
| Add Row | Add new rows of data that can be saved to the data source. |
| Custom | Trigger event handlers when clicked. |
Configure row height
You can use the Row height setting to adjust the height of table rows. The Table component can also dynamically adjust the height of each row based on cell values.
| Value | Height |
|---|---|
| X-Small | 20px |
| Small | 32px |
| Medium | 48px |
| Large | 60px |
| Dynamic | Dynamically adjusts the height of each row based on its content. |
Summarize columns
The Summary row add-on summarizes values from the specified columns using different aggregation methods.
- Click + in the Add-ons settings and select Summary row.
- Specify the columns to summarize.
- Select the default aggregation method to use.
You can use the following methods to summarize column values. The methods available depend on the column format.
| Method | Description |
|---|---|
| Min | The smallest value in the column. |
| Max | The largest value in the column. |
| Average | The average (mean) of the column's values. |
| Sum | The total sum of all the values in the column. |
| Count Distinct | The number of unique values in the column. |
Customize appearance
You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.
All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.
You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.
Dynamic row and column colors
You can also use conditional logic to customize row and column background colors.
- Use the Row color setting to control the background color of rows.
- Select a column in the Inspector and use the Background color setting.
You can use a ternary operator set the color based on certain conditions. The following example sets the background color of active users to theme.success (green) and inactive users to theme.warning (amber).
{{ currentRow.enabled ? theme.success : theme.warning }}
To set background colors on individual columns, select the column and edit the background color. You can reference column values with item for conditional logic.
{{ item ? theme.success : theme.warning }}