Column - Stratumn

Column definition

string

required

The key of the column.

string

required

The header of the column.

Size

default:"'medium'"

The of the column.

Cell

required

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

`${(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(),
  ...
}

object

The sort of the column.

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

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.

LinkWrapperDefinition

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

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

string

required

The key of the column to aggregate.

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

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'
  }
}

{
  aggregation: {
    path: 'data[].amount | sum(@)'
  }
}

Typescript

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

Simple text cell

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

​Column definition

​Cell definition

Column definition

Cell definition