Announcing Our New Component Suite

We are very happy to announce the new Bryntum Grid and Bryntum Scheduler, the first two components in a brand new suite of UI components created by the dev team at Bryntum. The main goals for this new suite are:

  • Should work with any popular framework like React, Angular and Vue.
  • Minimal or no external dependencies.
  • Great performance.
  • Feature parity (or better) with our current Ext JS based suite.

Later this year we will also announce a new Gantt chart and in 2019 we aim to bring you new Calendar and Task Board components. For now, let’s dig in and learn about the new Grid.

Introducing Bryntum Grid

The Bryntum Grid is a brand new table component built using the latest version of ECMAScript, SASS and CSS3. It is feature rich and very well suited for displaying large amounts of data while still maintaining great performance. It ticks most boxes for what you would expect from such a component, for example:

Live Demo

Bryntum Grid ships with 40+ demos. This basic demo shows some of the features – double click to edit or click a cell and type to search in the column:

Grid Performance

A very important part of creating a good grid component is to make it fast. The Bryntum Grid is built using modern web technologies and does not support legacy IE versions 8-10 which means we can use lots of tricks to optimize the rendering process. Displaying a huge data set of 100,000 rows is no problem since the rendering is virtualized and only shows the visible viewport rows plus a small buffer. Click here to try it yourself.

Introducing Bryntum Scheduler

The Ext Scheduler component is one of our most popular products used in many different applications around the world as you can see on our customer reference page. With Bryntum Scheduler we have created a much more performant scheduler from the ground up. It is based on the Bryntum Grid and does not require you to use Ext JS or any other web framework. This means it integrates easily into any javascript application environment like Angular, React or VueJS as you can see in the Integrations demo section. The Bryntum Scheduler ships with 40+ demos and an extensive API documentation.

Missing something? Please write a comment and let us know which features matter the most to your applications.

Live Demo

In the basic demo below you can observe some of the built-in features like current timeline, dependencies and event editor (double click to activate):

Integration with other frameworks

For web developers using frameworks like Angular or React, a common point of friction with the Ext Scheduler was always its dependency on Ext JS. While it is of course possible to integrate Ext Scheduler into any application, it’s not desirable to add another full framework to the stack just to add one extra widget. With Bryntum Scheduler, you now get a pure javascript component which integrates easily with any javascript framework including Ext JS Modern. Try some of our integration demos below:

Animations

Since we control the rendering process fully, we can now have silky smooth animated event bar transitions. When you change a start date or resource of a task programmatically, the Scheduler will by default animate the DOM update:

task.startDate = new Date();


Mass updates to tasks or rows will also be animated, try this out yourself in our new animations demo.

 

Bryntum Scheduler vs Scheduler for Ext JS

So you might wonder how the new scheduler compares to the existing Scheduler for Ext JS. From a feature perspective, Ext Scheduler has more features than Bryntum Scheduler which is natural given it’s been around for 9 years now. Over time the new Scheduler will close the gap and hopefully have most of the Ext Scheduler features, as well as new ones. Your feedback is critical for our success, so please let us know which features you want us to add.

We’re working on a follow up blog post to describe more about the differences between the two Schedulers. Until it’s ready, here are a few notable new features in Bryntum Scheduler:

  • Configurable event layout
  • Keyboard navigation between events
  • Collapsible subgrids
  • Interactive header time ranges
  • Animated DOM transitions

From a performance perspective, the new Scheduler component greatly outperforms the old one. Scrolling in the new Scheduler is very smooth and close to 60 FPS even with 10 000 rows and 50 000 events.

Summing up

The 1.0 release of the new Bryntum Scheduler and Bryntum Grid marks a huge milestone for us. We are really excited to hear your feedback and see what you can do with them. In parallel with the new component development, we will of course continue to update and improve the existing Ext JS based components as well (we hope you noticed the recent 6.0 release).

Later this year we will also bring you a new Gantt chart, so please follow our blog and sign up for our newsletter to stay up to date. We encourage you to download our free trial and try our new components!

Download Free Trial

Resources:

Comments ( 3 )

  • Prakash S

    So the Grid is not depending on ExtJS ?
    and can be used without extjs ?

    • Mats Bryntse

      Correct!

  • Alex Retzlaff

    Awesome work Mats. Our biggest dependency on ExtJS was you Gantt and Scheduler components (and Grids of course). We’ll let you to keep on improving them all, however I see us upgrading our licence to include this components

Leave a Comment