Johan Isaksson
27 March 2019

What’s New In Bryntum Grid 2.0

We are really excited to announce the new 2.0 release of our Bryntum Grid component, lots of new stuff and […]

We are really excited to announce the new 2.0 release of our Bryntum Grid component, lots of new stuff and a slew of bug fixes included. This blog post describes the bigger changes, for full details please see the change log.

Using Grid as a local NPM package

While yet not available on NPM, you can now install Grid as a local NPM package from the downloaded sources. This makes integrating it with frameworks much easier and our framework demos has been updated with the new approach.

Depending on your setup you now do something similar to these steps to include Grid in your Angular/React/Vue app:

1. Install the local package, by running `npm install path-to-the-grid/build-folder`
2. The package is called `bryntum-grid`, import from it in your code similar to:

import { Grid, Store, ... } from 'bryntum-grid';

3. Depending on your setup you can also directly import the theme you want to use:

import 'bryntum-grid/grid.material.css';

Depending your transpilation setup and if you need to support IE11 you can optionally import from the already transpiled umd bundle:

import { Grid, Store, ... } from 'bryntum-grid/grid.umd';

Major Grid improvements

There are new demos, new features, bug fixes and some API changes in this release so let’s dive in:

New default theme – Stockholm

We have created a slick new default theme for Grid, called “Stockholm”. Like the city itself we strived for a clean and modern look, hope you like it!

The new Stockholm theme

Multi region support

Previously the grid allowed just two regions, a locked left hand side region and a flexed center region. Now you can define the regions yourself, allowing any number of sub grids, although we have not really got any use case for more than three 🙂 Check it out in this new demo.

Grid with three regions

Each region scrolls horizontally (if needed) independent of the others, but they all share the same vertical scroller. Define your regions like this:

const grid = new Grid({ 
    subGridConfigs : {
      left : { width : 300 },
      middle : { flex : 1 },
      right : { width : 150 }

    columns : [
      { field : 'name', region : 'left' },
      { field : 'goals', region : 'middle' },
      { field : 'progress', region : 'middle' },
      { field : 'result', region : 'right' }

Small disclaimer: Please note that all features are not guaranteed to work with more than three regions.

Row reordering

A new feature called RowReorder was added. Enable it to allow drag and drop reordering of rows, try the demo here.

New time picker

For 2.0 we wrote our own time picker to replace flatpickr (the date picker was replaced in 1.2), meaning that we now have zero dependencies on 3rd party JavaScript libraries! The time field also got horizontal spin triggers for easy adjustment. You can try it out in this demo.

Cell editor using the new TimeField

More new demos

Two new demos was added in addition to the ones mentioned above. First a demo showing integration with Ionic:

New demo using Ionic

And we also made a demo showing how to set up cascading combos:

Demo with cascading combos

Store tree refactoring

We rebuilt the tree support in our Store. It now works more like you would expect, the tree has a root node (hidden when rendered) and manipulations should be made on the tree nodes rather than on the Store (instead of `store.add()`, use `node.appendChild()` etc).

As a part of the refactoring we also changed the behaviour when expanding/collapsing in a tree. The Store is considered the “visible” expanded part of the tree, while the tree in full is kept as part of the root node. When expanding or collapsing records will be added to or removed from the Store part, thus triggering `add` and `remove` related events. To distinguish these events from normal adds and removes, you can check the `isExpand` and `isCollapse` flags.

If you are not using trees, this change should not affect you.

Additional improvements

Breaking changes

As part of our major releases we also ensure we do some house cleaning. Please review the list below carefully and update your code accordingly.

Learn more

For full details please see the change log.

Download Free Trial

Johan Isaksson

Bryntum Grid Development Product updates