Define the looks and behavior of a React table in a section to benefit from the features of React tables and help users interact with data more efficiently. For example, you can configure your table to support filtering, sorting, and custom presentation options. You can also define data sources and configure preset views for the table.
- In the navigation pane of Dev Studio, click Records.
- Expand the User Interface category, and then click Section.
- Open the section that holds the pxListView embedded section that you want to edit.
- In the header of the embedded section, click the View properties icon.
- On the Parameters tab, in the Data page field, select the data page from which you want to source the list contents.
- In the Display name field, enter the name for the view,
and then define how you want to present the data to the user:
Choices Actions Table In the Template list, select Table. Tile-based gallery
- In the Template list, select Gallery.
- In the Card header list, select the field that you want to use as the header for your tile.
- In the Secondary text field, select the field that you want to use as the source of additional text on your tile.
- In the Columns section, add the columns that you want to include in the view by clicking Add, and then select the field that you want to associate with the column.
- Optional: To define the data that you want to display in the table, set one or more
- In the Filter by list, select Custom, and then click the Properties icon.
- In the Condition Builder window, define the
expression that you want to use to filter the table contents.For more information, see Using conditional logic in Cosmos React.
- Optional: To sort the values in the table, perform the following configurations:
- In the Sort by list, click Add, and then select the field by which you want to sort the values in the table.
- In the list next to the property field, select the order in which you want to sort the table.
- Optional: To group the table contents by property, in the Group by list, add a property by clicking Add, and then select the target field.
- Optional: To define additional table behavior, in the User
Personalization section, select the check boxes for the features
that you want to use.
For example: To give users the tools to hide table columns, select Allow user edit column visibility.
- If you apply parameters to the source data page, in the Data source
parameters field, map the parameters to the properties that you
use in the table.
For example: In the mapping:
WorkItemIdparameter on the source data page is mapped to the
.pyIDproperty, which defines the ID of the current work item.
- Optional: To add a new view to the table, under the data source list, next to the Default view tab, click Add, and then repeat steps 6 through 11.
- Click Submit.
- On the section form, click Save.