Display multiple entity instances in a table or list

Displaying structured data plays a key role in many applications. Tables and lists offer two versatile ways to present this data. These formats allow users to view, sort, and interact with datasets efficiently. The C3 AI Platform provides the UiSdlDataGrid and UiSdlCollectionList components for these purposes.

Copy link to this section

Display wind turbine data in a DataGrid

UiSdlDataGrid acts as a connected component within the C3 AI Platform. The UiSdlDataGrid component provides a flexible way to display tabular data. It supports pagination, sorting, and row-specific actions. Below are key configuration options:

• paginationConfig: Controls how the grid displays data (such as pagination).
• filterBar: Enables a filter input text box.
• header: Defines a table header.

dataSpec defines the data retrieval process for the UI component by specifying what entity data to fetch from the backend. It determines which fields the component receives and displays, ensuring the UI remains synchronized with the backend data model. This configuration allows UI components to dynamically adapt to different data structures and application needs. It instructs the component to display WindTurbine entity data with column configurations for manufacturer and location.

/* examplePackage/ui/c3/meta/examplePackage.TurbineGrid.json */
{
  "type": "UiSdlConnected<UiSdlDataGrid>",
  "component": {
    "header": {
      "title": "Wind Turbine Dataset"
    },
    "paginationConfig": {
      "pagination": true,
      "pageSize": 2,
      "pageSizes": [
        1,
        2
      ]
    },
    "filterBar": true,
    "dataSpec": {
      "dataType": "WindTurbine",
      "columnFields": [
        {
          "fieldName": "location",
          "label": "Location",
          "searchable": true
        },
        {
          "fieldName": "manufacturer",
          "label": "Manufacturer"
        }
      ]
    }
  }
}

The dataSpec property controls what data to retrieve from the backend. It determines the entity type, which fields appear, and how data is formatted, sorted, and searched. Components like UiSdlDataGrid rely on this property to fetch and present structured entity data from the application state.

Key aspects of dataSpec include:

• Defines the entity type through dataType (such as WindTurbine).
• Specifies which entity fields appear in the UI and their properties using columnFields.
• Enables dynamic sorting and search functionality.

Configuring dataSpec ensures UI components display entity data consistently without requiring developers to configure each instance manually.

Copy link to this section

Where to learn more

To refine data retrieval further and control which records appear in UI components, filtering enables selective data fetching and display, as explored in the next topic, Retrieve and display a single entity instance.

To learn about available configurations in each UI component, check the API reference documentation for the component type.

For example, see all configuration options for the Data Grid component in UiSdlDataGrid.