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.

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`.