Define a table visual

In this tutorial, you will use table() to visualise a tabular datastream. You will

define a simple table using table(), and
define a formatted table using table(), and
launch a solution and observe the results.

This lesson will assume that you have an empty project and asset which you can to deploy to a workspace named 03_07_02_define_a_table_visual with the following command:

edk template deploy -ycw 03_07_02_define_a_table_visual

Define and deploy a template

To use the table() methods you will first perform the following steps:

define a datasource using a similar pattern as your previous My Source definition.
set the value of based on some generated data of type Map<string, { date: Date, category: string, value: bigint, amount: float, processed: boolean, tags: Set<string> }>() value.
add the datasource to a template

In an asset, perform the above steps to create the resulting Typescript code:

import { SourceBuilder, Template } from "@elaraai/core"

const my_source = new SourceBuilder("My Source")
    .value({
        value: new Map(Array.from({ length: 200 }).map((_, index) => (
            [`${index}`, {
                date: new Date(new Date().valueOf() + index),
                category: `category ${index % 2}`,
                value: BigInt(index),
                amount: index,
                processed: Math.random() > 0.5,
                tags: new Set(["One", "Two"].sort(() => Math.random() - Math.random()).slice(0, 2)),
            }]
        )))
    })

export default Template(my_source)  

Define a simple table

You can define a table layout using the table() method of LayoutBuilder(), by taking the following steps:

add a new layout "01 - My Layout"
add a table to the layout using the table() method
set the first argument to the name of the table
use the table builder provided by the second argument
1. add all fields in the compound type as columns with the columns() method
add the new layout to the template

In the definition 01 - My Layout add the above changes:

import { SourceBuilder, Template, LayoutBuilder } from "@elaraai/core"

const my_source = new SourceBuilder("My Source")
    .value({
        value: new Map(Array.from({ length: 200 }).map((_, index) => (
            [`${index}`, {
                date: new Date(new Date().valueOf() + index),
                category: `category ${index % 2}`,
                value: BigInt(index),
                amount: index,
                processed: Math.random() > 0.5,
                tags: new Set(["One", "Two"].sort(() => Math.random() - Math.random()).slice(0, 2)),
            }]
        )))
    })

const my_layout = new LayoutBuilder("01 - My Layout")
    .table("My Table", builder => builder
        .fromStream(my_source.outputStream())
        .columns()
    )

export default Template(my_source, my_layout);

Elara URL's

URL's in the Elara web-application are consistent, making it easy to view and share layouts in the Elara web-application, for example, the URL scheme for a tenant is:

https://platform/tenants/tenant/

For a specific workspace within a tenant the URL scheme is:

https://platform/tenants/tenant/workspaces/workspace/

For a specific layout within a workspace the URL scheme is:

https://platform/tenants/tenant/workspaces/workspace/layouts/layout

Navigate to the layout URL located within the tenant you deployed to see your table:

workspaces/03_07_02_define_a_table_visual/layouts/01%20-%20My%20Layout/

For example, first navigate to the tenant you deployed to, then append the above to the url.

Define a formatted table

You can define a formatted table using the table() method of LayoutBuilder(). The following may be customised for columns based on expressions:

Attribute	Description
`value`	The variable to show in the cell
`display`	An alternative string value to display
`min`	The minimun allowable value for an editable cell (`IntegerType`, `FloatType`, `DateTimeType`)
`max`	The maximum allowable value for an editable cell (`IntegerType`, `FloatType`, `DateTimeType`)
`range`	The allowable values for an editable cell (`StringType`, `SetType`)
`readonly`	Make the cell readonly
`target`	The recommended value for the cell
`target_display`	An alternative string display for the recommended cell value
`background`	The background color for the cell
`color`	The text color for the cell
`tooltip`	The custom tooltip value for the cell
`hidden`	Hide the column from the table
`hidden_detail`	Hide the column from a form

You will learn about some of these attributes in more advanced lessons, for introductory customisation take the following steps:

add a new layout 02 - My Other Layout"
add a table to the layout using the table() method
set the first argument to the name of the table
use the table builder provided by the second argument
1. add a date column "Date" based on the date field
2. add a string column "Category"
  1. set the value to the category field
  2. set a custom tooltip based on multiple fields
3. add an integer column "Value"
  1. set the value to the value field
  2. set a custom text color based on the value
4. add a float column "Amount"
  1. set the value to the amount field
  2. set a display value as a truncated currency
5. add a boolean column "Process"
  1. set the value to the processed field
  2. set a custom background color based on processed
6. add a set column "Tags" based on the tags field
add the new layout to the template

In the definition 02 - My Other Layout add the above changes:

import { SourceBuilder, Template, LayoutBuilder, StringJoin, IfElse, Greater, PrintTruncatedCurrency } from "@elaraai/core"

const my_source = new SourceBuilder("My Source")
    .value({
        value: new Map(Array.from({ length: 200 }).map((_, index) => (
            [`${index}`, {
                date: new Date(new Date().valueOf() + index),
                category: `category ${index % 2}`,
                value: BigInt(index),
                amount: index,
                processed: Math.random() > 0.5,
                tags: new Set(["One", "Two"].sort(() => Math.random() - Math.random()).slice(0, 2)),
            }]
        )))
    })

const my_layout = new LayoutBuilder("01 - My Layout")
    .table("My Table", builder => builder
        .fromStream(my_source.outputStream())
        .columns()
    )

const my_other_layout = new LayoutBuilder("02 - My Other Layout")
    .table("My Other Table", builder => builder
        .fromStream(my_source.outputStream())
        .date("Date", fields => fields.date)
        .string("Category", {
            value: fields => fields.category,
            tooltip: fields => StringJoin`${fields.category} for ${fields.value}`,
        })
        .integer("Value", {
            value: fields => fields.value,
            color: fields => IfElse(Greater(fields.value, 50n), Const('#50BA8B'), Const('#BA6F63')),
        })
        .float("Amount", {
            value: fields => fields.amount,
            display: fields => StringJoin`${PrintTruncatedCurrency(fields.amount)}`,
        })
        .boolean("Processed", {
            value: fields => fields.processed,
            background: fields => IfElse(fields.processed, '#50BA8B66', '#BA6F6366')
        })
        .set("Tags", fields => fields.tags)
    )

export default Template(my_source, my_layout, my_other_layout);

Navigate to the layout URL located within the tenant you deployed to see your table:

workspaces/03_07_02_define_a_table_visual/layouts/02%20-%20My%20Other%20Layout/

Table paging

For scalability, table rows are automatically from the platform, so very large tables (> 10,000,000 rows) may be viewed efficiently.

Observe results

If you do not have access to Elara, the results of the above are shown below:

Example solution

The code for this tutorial is available below:

Next steps

In the next tutorial, you will use the vega() layout to visualise data in a chart.