Tree table
Run Description

Source of demo: treetable/run.astro.

Model: generateTreePeopleModel.ts.

Data: treePeopleData.ts.

This example demonstrates a Tree-Table. In a Tree-Table, objects are in a hierarchical relationship to each other and typically belong to the same type, making a tabulated representation alongside a tree structure in the first column meaningful.

Additionally, in this example, we showcase how to set up a multi-range selection using JavaScript.

const selectionModel = new SelectionModel("range", "multi");
selectionModel.addSelection(new CellRange(0, 0, 0, 2));
selectionModel.addSelection(new CellRange(2, 1, 2, 2));
selectionModel.addSelection(new CellRange(1, 5, 6, 7));
selectionModel.addSelection(new CellRange(0, 8, 0, 8));
selectionModel.addSelection(new CellRange(5, 6, 10, 10));
const tableOptions = { TableOptions(),
getSelectionModel: () => selectionModel

The data is in JSON format and represents an array of person objects. Some individuals are associated with friends through the ‘friends’ property. It constitutes a hierarchical object structure.

Short JSON snippet
"id": 0,
"preName": "Prename0",
"lastName": "Lastname0",
"birth": "1995-01-19T20:04:30.982Z",
"age": 8,
"gender": "male",
"address": {
"street": "Street0",
"number": "73a",
"zip": "45169",
"city": "City0",
"country": "Germany"
"friends": [
"id": 205,
"preName": "Prename205",
"lastName": "Lastname205",
"birth": "1998-06-18T01:49:11.679Z",
"age": 24,
"gender": "male",
"address": {
"street": "Street205",
"number": "21a",
"zip": "80116",
"city": "City205",
"country": "Germany"
"friends": [
"id": 685, ...

Firstly, this model is converted into an array of TreeRowIf. Subsequently, a TableModel is created using TableFactory.createTableModel(). The ColumnDefIf[] defines the columns in this process.

Creation of the table model
const tree = TreeFactory.buildTreeRows<PersonIf>(TREE_PEOPLE_DATA, "friends");
const tableModel = TableFactory.createTableModel({
rows: tree,
fixedLeftColumnCount: 1,
fixedRightColumnCount: 1

The column definition looks like this:

Definition of the Column Definitions
function createTreePeopleColumnDefs(): ColumnDefIf[] {
return [
new ColumnDef("lastName", "Last Name", px220),
new ColumnDef("preName", "Pre Name", px120),
property: "age",
headerLabel: "Age",
width: px80,
bodyRenderer: new NumberCellRenderer(),
editable: TrueFn,
editInputPipe: editInputPipeForNumber
new ColumnDef("birth", "Birthday", px100,
Renderer.bodyRenderer(new DateToIntlDDMMYYYYCellRenderer())),
property: "gender",
headerLabel: " ",
width: px50,
bodyRenderer: new MaleFemaleToIconCellRenderer(),
editable: TrueFn,
getEditRenderer: () => new SelectCellRenderer([
new ValueLabel("female", "♀"),
new ValueLabel("male", "♂")
new ColumnDef("address.street", "Strasse", px150),
new ColumnDef("address.number", "Nr", px70),
new ColumnDef("", "Zip", px60),
new ColumnDef("", "City", px120),
new ColumnDef("", "Country", px120),
new ColumnDef("id", "ID", px60)