Table View

Table View provides a table that displays one object in the system per row, automatically paginating if the number of objects exceeds available space. All of the table rows display objects from the same query, and each row is expandable to display more information. Users can search the objects in the table and take actions on these objects.

  • Usage
  • Configuration
  • Examples

The Table View organizes system objects into a table of rows and columns, combining the ability to display large sets of data about a specific item with the ability to take action on an item without going to another screen. The Table View component also allows users to take action on multiple items at once.

Table View is best for screens that need to represent a large number of items in the system that can be searched or filtered (e.g. a film database where each film has a lot of attributes users can filter against).

Anatomy

  1. Table title

  2. Table actions

  3. Expand row arrow

  4. Row action

  5. Row status icon

  6. Table page

Best practices

  • Configure Table View as an extra large component, and no smaller than medium, on the grid. Use a size that displays all items in the table when the screen loads.
  • If you have multiple tables with the same columns, place those columns in the same position in all tables (e.g. always position a "Status" column first).
  • Position primary actions users can take to the right side of the row.
  • The ideal number of columns is 5 to 7 columns, including columns for icons and actions. Don't exceed 10 columns total.
  • Keep column labels concise and consistent between tables. Follow the Writing guidelines.
  • When a user selects a row, display context about a specific aspect of a row's content by adding a quick view panel.

  • Use a table row expansion to provide additional context to the row that is useful but not required to understand or interpret the row. Ideally, include only 3-5 additional values in expansions.

  • Use groups in a row expansion only when absolutely necessary, as these can clutter the expansion. Include no more than 5 groups where there 3 to 5 items per group.

Do

Write clear and concise column labels.

Don't

Don't write overly long column labels.

Common patterns

With filter

Configuring the Table View with a Filter Panel to allow filtering allows users to easily pare down large data sets and more closely examine particular objects in the data set.

With Facets

Facets, like configuring the filter property, allow users to quickly filter data to examine particular objects in the Table View.

Properties

  • Apply Card Background checkbox – Optional. If selected, a card background is applied to the table, which sets the component apart from the screen background. If not selected, the default screen background displays.
  • Default Rows per Page field – Required. The number of rows to display when the screen loads. Defaults to 10.
  • Table Actions section – Optional. A section of properties used to configure the actions available at the top of the table, which allow users to interact with the whole data set displayed in the table (e.g. add a new item, download items):
    • Label field – Optional. The hover text that displays for the action icon.
    • Icon field – Optional. The UI icon that displays for the action.
    • API field – Optional. The API called when the user selects the action icon.
    • Disable If No Data checkbox – Optional. If selected, the action is disabled if there is no data available in the table.
  • Table Data Source field – Required. The query that retrieves the data for the table view, based on the data model.
  • Data Source Conditions field – Optional. The initial set of conditions used when retrieving data from the source specified in the Table Data Source field.
  • Expanded Info Data Source field – Optional. The source of additional data when a table row is expanded.
  • Message If No Results field – Required. The message that displays if there is no data available.
  • Table Columns section – Required. A section of properties used to configure the table columns, including details such as the field display order and the visual treatments used:
    • Field field – Required. The field used as a column.
    • Order field – Required. The order to display the columns in.
    • Label field – Required. The label to display as the column header.
    • Cell Treatment drop-down – Optional. Specifies how to display the column value:
      • None – The column value displays as read-only text, without additional treatment or formatting.
      • Image Display Treatment – An image displays that relates to the item represented by the row (e.g. an image of product packaging).
      • Formatted Text Display Treatment – The content displays as formatted text.
      • Link Display Treatment – The content displays as link text.
      • Icon Display Treatment – A UI icon displays that represents information about the item in the row (e.g. the status).
    • Cell Treatment Script field – Optional. A script used to customize the display treatment.
  • Row Actions section – Optional. A section of properties used to configure the actions that are available for each row:
    • Label field – Optional. The label for the action.
    • Icon icon – Optional. The UI icon that displays for the action, if provided.
    • API field – Optional. The API called when the user selects the action.
    • Visibility drop-down – Optional. Specifies whether the row action is displayed or hidden:
      • Always Visible – Optional. The action always displays for all rows.
      • Hidden – Optional. The action is hidden until the Visibility Condition is met.
    • Visibility Condition field – Optional. The condition that specifies when the action is visible.
  • Allow Keyword Search checkbox – Optional. If selected, a Keywords field displays above the table, which allows users to search for specific items using keywords from the table.
  • Allow Filtering checkbox – Optional. If selected, a Filter Panel displays above the table, which allows users to filter the data in the table.
  • Allow Users to Select Rows checkbox – Optional. If selected, a checkbox displays on each row that allows users to select and execute actions on multiple rows.
  • Allow Users to Expand Rows checkbox – Optional. If selected, users can expand rows to view additional information.
  • Keyword Search Label field – Optional. The label that displays in the Keyword search field.
  • Filters Button Label field – Optional. The text that displays in the field search button.
  • Group Expanded Info checkbox – Optional. If selected, the fields that display when the rows are expanded display in groups.
  • Collapse Groups checkbox – Optional. If selected, users can collapse and expand groups within expanded rows. Groups display in a collapsed state when the row expands.
  • Hide Group Labels in Expanded Rows checkbox – Optional. If selected, group headers are hidden in the expanded rows.
  • Groups section – Conditionally required if the Group Expanded Info checkbox is selected. A section of properties used to configure groups within expanded rows, including the fields that belong to the group and whether the groups are visible:
    • Label field – Optional. The label that identifies the group.
    • Values section – Optional. The fields to include in the group.
      • Field field – Optional. The field to include in the group.
      • Label field – Optional. The label that displays for the field.
    • Visibility drop-down – Optional. Specifies whether the section is displayed or hidden for all rows:
      • Always Visible – Optional. The group always displays for all rows.
      • Hidden – Optional. The group is hidden unless visibility conditions are met.
    • Visibility Condition field – Optional. The condition that specifies when the group is visible.
  • Allow Download checkbox – Optional. If selected, a Download icon displays at the top of the table and users can download data from the table using the File Download component.
  • Use Table Data Source for Expanded Info checkbox – Optional. If selected, data in the expanded display is sourced from the same source specified in Table Data Source.
  • Show Columns with No Data checkbox – Optional. If selected, columns that contain no data display on the screen ( "--" displays if no data is available).
  • Visibility Permission field – Optional. The user's permission to access the component. If a user is not assigned a role that includes this permission, they cannot view or interact with the component.
  • Visibility Permission Not Assigned drop-down – Optional. If the user does not have permission to access the component, specifies whether to hide or disable it:
    • Hide – The component is hidden.
    • Disable – The component is visible but not cannot be interacted with.

Emitted events

  • On Full Row Select – The user selects the row.
  • On Filter Apply – The user applies a table filter.
  • On Row Action Select – The user performs a row action, invoking the relevant API configured by the Solution Developer.
  • On Table Action – The user performs a table action, invoking the relevant API configured by the Solution Developer.

Functions

  • Set Query Conditions – When invoked in an event, selected query conditions are applied to the data set.
  • Get Selected Rows – When invoked in an event, information about the selected rows is retrieved.
  • Get Current Query Conditions – When invoked in an event, currently applied query conditions are retrieved.

With row expansion and row actions

  • Table Actions:
    • Label included.
    • Icon included.
    • API included.
  • Table Columns:
    • Cell Treatment set to Link Display Treatment for Title column.
  • Row Actions:
    • Label included.
    • Icon included.
    • API included.
    • Visibility set to Always Visible.
  • Allow Keyword Search not selected.
  • Allow Filtering not selected.
  • Allow Users to Select Rows not selected.
  • Allow Users to Expand Rows selected.
  • Group Expanded Info not selected.

With row multi-selection and row actions

  • Table Actions:
    • Label included.
    • Icon included.
    • API included.
  • Table Columns:
    • Cell Treatment set to Link Display Treatment for Title column.
  • Row Actions:
    • Label included.
    • Icon included.
    • API included.
    • Visibility set to Always Visible.
  • Allow Keyword Search not selected.
  • Allow Filtering not selected.
  • Allow Users to Select Rows selected.
  • Allow Users to Expand Rows not selected.
  • Group Expanded Info not selected.