Column - Stratumn

Column definition

key

string

required

The key of the column.

header

string

required

The header of the column.

width

Size

default:"'medium'"

The of the column.

cell

Cell

required

The definition of the the content of the cell, see more information about the cell definition here.

cellFn

`${(data: any) => Cell}`

required

A stringified function calculated on the fly by the frontend that returns the cell definition.

Show Example

Example of a cellFn

{
  ...
  cellFn: ((data: any): Cell => {
    return {
      view: { type: 'text', path: 'data.name' }
    }
  }).toString(),
  ...
}

sort

object

The sort of the column.

filter

object

The filter of the column.

Cell definition

The cell definition is an object that defines what will be displayed in the cell.

API
Type
Example

view

WidgetDefinition

required

The definition of the UI widget that will be displayed in the cell.

A modal definition to display when the cell is clicked.

link

LinkWrapperDefinition

The definition of the link wrapper that will be used when the cell is clicked.

aggregation

AggregationDefinition

The aggregation feature is currently only effective for the widget type number.

Configuration for the column aggregation feature.

Hide Informations

API
Type
Examples

Using a predefined function

Using this method will effectively compute the aggregation by creating under the hood the following JMESPath expression:

JMESPath expression

data[?${aggregationKey}=='${aggregationValue}'].${path} | ${
aggregationFunction || 'sum'
}(@)

You can use it by providing the following properties:

Hide Properties

aggregationKey

string

required

The key of the column to aggregate.

aggregationFunction

string

default:"sum"

The aggregation function of the column, one of the JMESPath built-in functions.

Since we typically want to sum up the values of the column, so we usually use the sum function.

Using a custom aggregation

path

JMESPath

required

A JMESPath expression that computes the aggregation of the column. See more informations about JMESPath here.

Typescript

type AggregationDefinition = 
| {
  aggregationKey?: string;
  aggregationFunction?: string;
} 
| {
  path: string;
}

{
  aggregation: {
    aggregationKey: 'amount',
    aggregationFunction: 'sum'
  }
}

Typescript

type Cell = {
  view: WidgetDefintion;
  modal?: ModalWrapperDefinition;
  link?: LinkWrapperDefinition;
  aggregation?: AggregationDefinition;
}

Simple text cell

{
  "view": {
    "type": "text",
    "path": "data.name"
  }
}

Workflow configuration

​Column definition

​Cell definition

Column definition

Cell definition