Tree Table Customization

March 13th, 2026 - 3-4 minutes read

The ScheduleJS API

ScheduleJS offers three components to create your own tree table.
1. <schedule-info-column-cells-left-pin-wrapper>
2. <schedule-info-column-header-cell>
3. <schedule-info-column-row-cell>

The two cell components (2 and 3) are made to wrap your custom header and row cells while the left pin wrapper (1) offers the possibility to freeze a column on the leftmost part of the tree table.

On the example above, the Activity ID column has been frozen with the left-pin-wrapper while other columns are some custom Angular components wrapped in the ScheduleJS row-cell and header-cell component wrappers.

Example: Interactive Angular component in one row of the tree-table

Multiple Levels of Children Rows

ScheduleJS has no implicit limit to the levels of children rows. Every row can be a parent to some child rows. The goal is to let you create a tailored user experience maximising readability and interaction capabilities.

Tree Table Selection

Since FlexGanttFX is based on JavaFX and ScheduleJS is based on Angular, the FlexGanttFX getTreeTable API is not implemented in ScheduleJS. To handle resource selection in the tree table and overall application state, use an Angular state service.

Cell Factories

You can adjust alignment, graphics, and style of text in tree table cells using your regular Angular workflow. The header and row cell wrappers will provide the actual cell data using a TreeNodeContext object, storing row information such as:

expanded state (are child rows shown)
leaf state (are there child rows)
level (parent depth)
parent (parent row data)
value (actual row data)

Any questions ?

Feel free to contact us for any implementation related questions. Note that you can request the source code of our demos, which proposes straightforward implementations for most of the ScheduleJS features. This will help you to understand how the library articulates around its API and use our recommended best practices for your project.