How to filter and search table data

Introduction

Would you like to filter and search for a value in your table? Then add filters to your entity data store by following these steps.

Prerequisites

• You configured the frames and routes for your solution.
• You configured the relevant contents such as the control panel(s), model(s), viewer(s) and data store.
• You configured the entity data store. See the store inputs for more information.
• You configured the entity table to display your entities. See the display stored inputs guide for more information.

Filter or search entities with a control

1. Add a control to filter the entity data store

• Add a ControlPanel to your frame.
• Configure a control to filter or search entities.
  • To filter with a value in the EntityDataStore, you can use a Dropdown.
  • To search for a value in the EntityDataStore, you can use a TextInput.

The configuration should look similar to the example below:

  my-control-panel: 
    kind: ControlPanel
    controls:
      name-filter: # Control for searching
        kind: TextInput
        placeholder: Name to search
      type-filter: # Control for filtering
            kind: Dropdown
            label: Type    
            choices:
              - label: Type 1
                value: 1
              - label: Type 2
                value: 2
              - label: Type 3
                value: 3

2. Configure a filter in the entity datastore.

• Add filters to the EntityDataStore.
• Define the filter type. For filters of type:
  • equal, an entity is shown if the control value and property value are equal.
  • contains, an entity is shown if the property value is found in the control value list.
  • search, an entity is shown if a text search of the control value gives a positive result.
• Define which property or properties should be filtered or searched.

💡 If there are multiple filters, the filters are applied with an ‘and’ condition. To be included in the filtered list, entities need to satisfy all filter conditions.

The configuration should look similar to the example below:

my-entity-data-store: 
  kind: EntityDataStore
  properties:
    name:
      type: String
    type:
      type: Number
  filters:
    type-filter:
      type: equal
      property: type
    name-filter:
      type: search
      properties: [name]

3. Subscribe the entity data store to the relevant control panel.

• To filter or search with a control, subscribe the EntityDataStore to the ControlPanel.
• Define the frame and source.
• Define which controls to filter with the filterByControls property.

The configuration should look similar to the example below:

 my-entity-data-store: 
        kind: EntityDataStore
        persistToStore: my-db-v1
        properties:
          name:
            type: String
          type:
            type: Number
        filters:
          type-filter:
            type: equal
            property: type
          name-filter:
            type: search
            properties: [name]   
        subscribe:
          - kind: ControlPanel
            frame: home-frame
            source: my-top-control-panel
            filterByControls: [name-filter]
          - kind: ControlPanel
            frame: home-frame
            source: my-right-control-panel
            filterByControls: [type-filter]
      

See the image below as an example.

Filter entities with a column

1. Add a filter to a column in the entity table

• Configure a filter to the column you’d like to filter with kind: MultipleChoice.
• Define the choices and their labels.

💡 The name of the choices should match the control choices that set this column property.

The configuration should look similar to the example below:

 my-entity-table:
    kind: EntityTable
    columns:
      status:
        kind: Text
        label: Status
        filter:
          kind: MultipleChoice
          choices:
            started: 
              label: Started 
            progress: 
              label: In progress
            completed:
              label: Completed

2. Configure a filter in the entity datastore

• Add filters to the EntityDataStore.
• Define which property should be filtered with the property.
• Define the type of the filter.

The configuration should look similar to the example below:

 my-entity-data-store: 
  kind: EntityDataStore
  properties:
    status: 
      type: String
  filters:
    status:
      type: contains
      property: status

3. Subscribe the entity data store to the entity table.

• To filter the entities based on the entity table column, subscribe the EntityDataStore to the EntityTable.
• Define the frame and source.
• Define which columns to filter with the filterByColumns property.

The configuration should look similar to the example below:

  my-entity-data-store: 
        kind: EntityDataStore
        properties:
          status: 
            type: String
        filters:
          status:
            type: contains
            property: status
        subscribe:
          - kind: EntityTable
            frame: home-frame
            source: my-entity-table 
            filterByColumns: [status]

See the image below as an example.

Configuration

See the entity data store configuration docs and entity table configuration docs for more information.