Johan Isaksson
8 November 2019

What’s New In Bryntum Grid 2.3

We are excited to announce version 2.3.0 of Bryntum Grid. This release is jam-packed with both big and small improvements. […]

We are excited to announce version 2.3.0 of Bryntum Grid. This release is jam-packed with both big and small improvements. For full details please see the change log.

Paging support

While Grid is perfectly capable of handling really large datasets locally, it is not always practical to do so. With this release we are introducing paging support both in our Store and in the UI using a new PagingToolbar. Supporting paging also means that we now support remote sorting, grouping and filtering. Try it out in one of the new paging demos:

Grid with paged store and PagingToolbar

Experimental: JSX in renders and as cell editors

The React wrapper for Grid now supports using JSX/React components in cell renderers and as cell editors.

// A column using a custom React component in its renderer
  field    : 'team',
  text     : 'Cheer',
  renderer : ({ record }) =>

Take a look at the updated React demos to see how it can be used:

React demo updated to use JSX in renderers

Content for all cells in a group header

The Group features `groupRenderer` can now populate all cells in a group header, as opposed to previously when it could only affect the first column. This opens up for greater flexibility as how to render group headers, try out the updated `grouping` demo to see it in action:

Updated grouping demo

Custom builds

To simplify making custom builds from our sources there is now a new demo called “custom-build”. It uses WebPack to build a custom app + Grid bundle with smaller footprint than what you get with our full bundles. The demo uses a new base class for `Grid`, called `GridBase`. `GridBase` is basically the `Grid` without any default features imported, making the built result a bit smaller (approximately 30% if no features are used).

// Extending or instanciating GridBase instead of Grid makes custom builds smaller. 
// But, any feature used have to be imported
import GridBase from 'lib/Grid/view/GridBase.js';
import Sort from 'lib/Grid/feature/Sort.js';

class MyGrid extends GridBase {
  features : {
    sort : true

New Splitter widget

Our demos combining Grid and Scheduler or multiple Schedulers on the same page are very popular. A common request related to these demos have been how to make the different components resizable. To solve this we have added a basic Splitter widget. When added between two widgets (or other elements) it can be used to resize them.

Multiple grids resizable using splitters

Container improvements

Container and its subclasses now support:

Toggling features at runtime

All features except the Tree feature can now be enabled or disabled at runtime (assuming the feature was imported).

// Disable sorting using the UI
grid.features.sort.disabled = true;

// Re-enable it
grid.features.sort.disabled = false;

Data layer improvements

In addition to the paging support introduced above, Store now also has a new config to enable syncing the difference between a new dataset and a previously loaded one. By configuring a Store with `syncDataOnLoad: true` the new dataset will be compared to the old and only the changes will be applied (added, removed and modified records).

Model now allows adding and removing fields on the fly, using `Model.addField()` and `Model.removeField()`. This can be combined with configuring Grids ColumnStore with
`autoAddField: true` to automatically add fields for any new column. Try it out in the updated `columns` demo:

Updated columns demo

More small improvements

Learn more

We hope you will enjoy all the new goodies in this release. For full details please see the change log.

Download Free Trial

Bryntum Grid Development Product updates