Integrating ScheduleJS into AG-Grid

This article showcases the integration of ScheduleJS in an external third-party table component: the famous AG-Grid. The goal is to demonstrate the flexibility of ScheduleJS when integrated into a table component.

The integration use case

We have identified some cases where companies developing a scheduling component with ScheduleJS already use an in-house or a third-party-developed table. We decided to work on this proof of concept project to demonstrate a scenario where our users opt to leverage their actual solution and make their ScheduleJS application integrate seamlessly into their environment. The key to this approach is to be able to reuse the features a company spent time developing.

An advanced tree table implementation

In ScheduleJS, the tree table is a component often placed at the left of the graphics. Its role is to offer the end-user additional information on a given row and provide tools to interact with the data. ScheduleJS proposes a standard integrated tree table component in which you can customize the column headers and row cells to create the perfect layout for your end users. This standard info-column API aims to empower the developer with a simple yet powerful tool to cover most of the use cases a company can encounter in a scheduling application.

Can we reach the same usability while hosting the ScheduleJS graphics as a child to an external table component?

Integrating ScheduleJS as a sub-component

Graphics present complex data into a readable output so the user can quickly gather information and interact with a descriptive graphical view. It is common for a web application to use a table component at the core of its architecture.

AG-Grid has been identified by our developers as a good candidate for this exercise, as a consistent pool of companies use this component to develop their tables.

The following proof of concept couples the AG-Grid out-of-the-box features with the ScheduleJS graphics readability.

The result

For this implementation, we decided to pick the open-source version of the AG-Grid table component, which is royalty-free, even in the event of a commercial project.

The video below shows its features in our development environment:

To see the video of the final result you can go to see: ScheduleJS

The resulting additional features compared to a default tree table are the following:

• The option to pin specific columns on the right-most and left-most parts of the ScheduleJS graphics
• The option to modify the horizontal order of any column, including the ScheduleJS graphics
• The ability to resize any column, including the ScheduleJS graphics
• The ability to trigger the row expand and collapse features from the AG-Grid cell
• The ability to use the AG-Grid integrated filter feature, affecting the ScheduleJS graphics