Block: EntityTable
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 |