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:
- Sorting, grouping and filtering
- Column reordering and resizing
- Locked columns
- Search & quick find
- Inline cell editing
- Tree view
- Themable & custom cell rendering
- View more features…
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:
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
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
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.
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