Block: EntityTable

An EntityTable block for configuring a table of entities to be displayed in the user interface.

Overview

An EntityTable block is used for configuring a table of data, to be displayed within a frame. Each row in the table represents an entity. The columns property defines the columns of the table. As well as displaying data, the columns in the table can also contain buttons to perform specific actions such as editing en entity or deleting an entity. These types of columns contain a button for each row in the table. Clicking a button then selects the corresponding entity in the EntityDataStore and possibly also performs some other action.

The data that is displayed is typically stored in an EntityDataStore. To retrieve this data, the EntityTable has to subscribe to the EntityDataStore.

Example

Below is an example configuration.

kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: home-frame
      children:
        - frame: edit-frame
frames:
  home-frame:
    kind: Frame
    contents:
      my-persistent-entity-data-store:
        kind: EntityDataStore
        persistToStore: my-store-name
        properties:
          my-prop-a:
            type: Number
          my-prop-b:
            type: String
      my-entity-table:
        kind: EntityTable
        columns:
          my-prop-a:
            kind: Text
            label: Value for A
          my-prop-b:
            kind: Text
            label: Value for B
          my-edit-column:
            kind: Button
            label: Edit
            routerLink: /home-frame/edit-frame
            icon:
              kind: MaterialIcon
              name: edit
            flexWidth:
              grow: 0
              shrink: 0
              width: 40px
          my-delete-column:
            kind: DeleteButton
            label: Delete
            prompt: Are you sure you want to delete this entity?
            confirm: Yes
            cancel: No
            flexWidth:
              grow: 0
              shrink: 0
              width: 40px
        subscribe:
          - kind: EntityDataStore
            frame: home-frame
            source: my-persistent-entity-data-store
  edit-frame:
    kind: Frame
    contents:
      my-text:
        kind: Text
        text: Edit frame
        type: display-1

EntityTableConfig

Name Type Required Description
kind "EntityTable" Yes
columns Dictionary<string, EntityTableColumn> Yes
subscribe List<TableEntityDataStoreSubscribe> No A list of objects for subscribing the EntityTable block to other blocks.

EntityTableColumn

TableText

Name Type Required Description
kind "Text" Yes
label string Yes
flexWidth FlexWidthConfig No An object for configuring the width of a column that can vary flexibly relative to the other columns in the table.
filter Filter No An object for configuring a column filter. The column filter is used to filter the entities that are displayed in the table based on the values in the column. The only valid column filter is the MultipleChoice filter.

Filter

An object for configuring a MultipleChoice column filter. The filter results in a small popup containing checkboxes that allow the user to select certain choices. The entity data store can then be configured to filter entities based on these choices.

Name Type Required Description
kind "MultipleChoice" Yes A constant, MultipleChoice.
choices Dictionary<string, FilterChoice> Yes A dictionary of objects for configuring choices. (Note that each choice has a label and a value and for the value, dictionary names are used.)
FilterChoice

An object for configuring a choice in a MultipleChoice column filter.

Name Type Required Description
label string Yes A string defining the label that the user sees when selecting a choice. (The choice has a label and a value. For the value, the name in the dictionary of choices is used.)
selected boolean No A boolean indicating whether the choice is selected.

TableDeleteButton

Name Type Required Description
kind "DeleteButton" Yes
label string Yes
prompt string Yes
confirm string No
cancel string No
flexWidth FlexWidthConfig No An object for configuring the width of a column that can vary flexibly relative to the other columns in the table.

TableButton

Name Type Required Description
kind "Button" Yes
label string Yes
routerLink string Yes
icon MaterialIcon Yes
flexWidth FlexWidthConfig No An object for configuring the width of a column that can vary flexibly relative to the other columns in the table.

MaterialIcon

Name Type Required Description
kind "MaterialIcon" Yes
name string Yes Icons can be found at https://fonts.google.com/icons?icon.set=Material+Icons

FlexWidthConfig

Name Type Required Description
width string No A string defining the ideal width of the column.
The width can be specified in pixels (e.g. 30px) or as a percentage (e.g. 20%).
If the column width is set to zero (e.g. 0px), then the column width is unconstrained.
shrink number No An float defining the factor by which a column width may shrink relative to other columns.
If the sum of the widths of all columns is larger than the container width, then column widths will shrink according to shrink factor.
The default is 1.
grow number No An float defining the factor by which a column width may grow relative to other columns.
If the sum of the widths of all columns is smaller than the container width, then column widths will grow according to grow factor.
The default is 1.

TableEntityDataStoreSubscribe

An object for configuring a subscription from a EntityTable block to a EntityDataStore block. The subscription allows the data displayed in the entity table to be loaded from the entity data store. Each row in the entity table represents one entity in the entity table.

Name Type Required Description
kind "EntityDataStore" Yes A constant, EntityDataStore.
frame string Yes A string specifying the name of the frame in which the EntityDataStore is located.
source string Yes A string specifying the name of the EntityDataStore.
pathToBranch List<string> No A list of strings specifying the path to an entity branch. Branching allows the table to display all entities at any level based on this path. The path must start with $root to indicate the root of the entity schema.
filterBySelected List<string> No A list of strings specifying for which selected entities the branch entities should be filtered on. The path must start with $root to indicate the root of the entity schema.
useFiltersFromEntityType string No A string specifying the EntityType from which the filters should be applied. The filters are configured in the EntityDataStore EntityTypes.
includeProperties Dictionary<string, string> No A dictionary of property mappings. Specify additional data (that is in a lower branch than the selected entity) to be included as payload in the action. The key of the dictionary must match the model input name. All the branches of the selected path are aggregated, so the dictionary value