Run-time behavior of Cosmos React tables
Cosmos React tables offer a rich set of features that can help you design a modern, user-friendly, and efficient UI. The tables support run-time editing, as well as a number of out-of-the-box capabilities and customization tools.
Table menu
The table menu appears in the upper-right corner of a table when you click the More icon.
Depending on the table configuration, the options in your table menu can vary. The following list presents some of the key table menu options:
- Auto size columns
- Adjust the size of the column to fit its content.
- Export to Excel
- Download an
.xlsx
file with the content of the table. - Filter
- Apply simple or complex filters to your data.
- Freeze columns
- Pin a column to the left side of the table so that when you scroll horizontally, you do not lose the context of the row.
- Group
- Select the field by which you want to group rows.
- Mark as app default
- Use the current setup as the default configuration for every user in the application.
- Query info
- Display information about the table source.
- Row density
- Define the height of the table rows.
- Save view as
- Save the current setup as a configuration that you can later access.
- Show/hide columns
- Choose which columns to display in the table.
- Sort
- Choose the order in which your data appears on the list.
Column menu
The column menu appears when you click the More icon in the header of the column that you want to edit. Depending on the type of content that you display in the column, the options available in the menu can vary. The following list presents some of the key column menu options:
- Aggregate column
- Display a sum of numerical values in the column in the column or group header.
- Combine with left/right
- Merge the contents of the column with a neighboring column under a new name.
- Customize column
- Change the label and the format of the data in the column.
- Filter
- Apply simple or complex filters to your data.
- Freeze column
- Pin the target column to the left side of the table when you scroll horizontally
- Group by this column
- Use the target column to arrange table rows into groups.
- Hide column
- Hide the target column.
- Sort
- Choose the order in which your data appears on the list.
Previous topic Configuring a React table in a section Next topic Displaying the list of recent items in your application