Table widget

Display sets of data in tabular format.

https://kroki.io/svgbob/svg/eNpT0NPFAvS4FGoUICAkMSknFcpWqAGKY1Nfw6Wbr5CSWJIIVlWcmpOaXJKZn6eQrwuSKC0ASsHMKCxNLaoESiiAZCAqFZAB2Kjk_Ly0zHQ0cQV1bFarAwBHTCsE

In-ports

data Array - the data set to display.

update JSON - the query object to update the data set.

select Array - the array of IDs of items to select in the table.

config JSON - the configuration object to format and style the table.

Out-ports

selection Array - emits an array of selected items.

query JSON - query object to fill in with data for update.

Overview

Table widget displays data in the tabular format. Its is most basic table representation with no frills. Columns can be sorted. Rows can be selected. Array of selected rows is emitted on selection port.

Table widget automatically recognize an array of objects and renders a table that display each object as a row and each object property as a column. Alternately you can provide a config object that will define which column to display with additional styling attributes.

Config object JSON Schema
{
"$schema": "http://json-schema.org/draft-07/schema",
"type": "object",
"title": "Table widget config schema",
"description": "Config object defines display columns and style attributes.",
"default": {},
"examples": [
{
"id": "ssn",
"columns": [
{
"key": "full_name",
"title": "Full Name",
"formatter": "none",
"width": 100
},
{
"key": "age",
"title": "Age",
"formatter": "numberToHumanReadable",
"width": 100
}
]
}
],
"required": ["id", "columns"],
"properties": {
"id": {
"$id": "#/properties/id",
"type": "string",
"title": "ID key name",
"description": "Key name of the field that identifies an object.",
"default": ""
},
"columns": {
"$id": "#/properties/columns",
"type": "array",
"title": "Table column definitions",
"description": "Define columns and their attributes the table will display.",
"default": [],
"additionalItems": true,
"items": {
"$id": "#/properties/columns/items",
"anyOf": [
{
"$id": "#/properties/columns/items/anyOf/0",
"type": "object",
"title": "Table column definition",
"description": "Column name and attributes.",
"default": {},
"required": ["key", "title", "formatter", "width"],
"properties": {
"key": {
"$id": "#/properties/columns/items/anyOf/0/properties/key",
"type": "string",
"title": "Column key name",
"description": "Column key name",
"default": ""
},
"title": {
"$id": "#/properties/columns/items/anyOf/0/properties/title",
"type": "string",
"title": "Column title",
"description": "Column title to display in header.",
"default": ""
},
"formatter": {
"$id": "#/properties/columns/items/anyOf/0/properties/formatter",
"type": "string",
"title": "Value formatter",
"description": "Value formatter.",
"default": ""
},
"width": {
"$id": "#/properties/columns/items/anyOf/0/properties/width",
"type": "integer",
"title": "Column width",
"description": "Width of the column in px.",
"default": 100
}
}
}
]
}
}
}
}

Query and updates 🚧

This widget is based on react-virtualized for efficiently rendering tables with many rows. update and query ports are used to dynamically update table dataset.

Stay tuned for more details and examples.

Settings

Title

The widget title.

Hide progress bar

Controls the visibility of widget progress bar (visible by default).

Hide help icon

Controls the visibility of help icon (visible by default).

Related