Introducing Version 20 of ag-Grid

Max Koretskyi
Jan 14, 2019 · 6 min read
Image for post
Image for post

The new year brings a new release of ag-Grid. This is a major update that delivers improvements to some enterprise features and performance.

We’ve enhanced our master/detail functionality that allows embedding UI elements in grid rows. You can now combine it with server-side row model functionality that makes it possible to feed data into the grid in batches. We also made performance and UI improvements to the functionality of column/row pinning and export to Excel.

We also continue working on frameworks integrations. In this release, we focused our efforts on integration with VueJS. Our goal is to make the integration with VueJS more idiomatic to users of the framework. As part of the changes we enabled typescript bindings in templates, introduced a simpler way to declare components and provide column definitions in a declarative way in templates. Also, every feature in the docs now has a VueJS example.

For a complete list of changes see our changelog.

Master/detail for the server-side role model

Image for post
Image for post

On the picture above you can see the second row called “master row” being expanded. In the corresponding detail row, it contains an embedded grid. Typically the grid in detail row gives more information about the row in the master grid that was expanded to reveal the detail grid.

And since each embedded grid can, in turn, embed other grids, you can effectively achieve nesting:

Image for post
Image for post

You can see how powerful this feature becomes when you start putting other visual elements in the detail row, not just grids. Something like this is easy to achieve:

Image for post
Image for post

This feature is heavily used by our enterprise customers. However, until this release, it could only be used with client-side row model. Starting from this release you can use master/detail functionality with server-side row model. To enable master detail in ag-Grid for server-side row model you don’t need to learn anything new. You simply need to set rowModelType to serverSide and masterDetail to true as you would do to enable both features separately. You’ll also need to provide options for detailCellRenderer as you would normally do. Here is a sample configuration:

What’s even more fascinating is that you can combine master/detail with row grouping and it will work seamlessly even with server-side row model!

Image for post
Image for post

You can read more about it in the documentation.

Performance and visual improvements

Column pinning

Image for post
Image for post

In this release, this has been fixed. All sections are now placed in the one container, so scrolling vertically scrolls all areas at the same time with no lag. Works like a charm.

Row pinning

Image for post
Image for post

In this release, we fixed it and the pinned rows are now correctly shown above the scrollbar:

Image for post
Image for post

As part of this release, we also updated our theming options. It’s possible now to configure color for the disabled field through SASS variable $input-disabled-background-color.

Export to excel

Image for post
Image for post

But at the same time, this makes the exporting process quite sophisticated and as a result, time-consuming. Previously, exporting large amounts of data, say 50000, would take a considerable amount of time and could even crash a browser. With the improvements we did in this release, it takes a few seconds to export that amount of records without crashes. And we now also support all versions of Excel, not just 2016 and newer.

VueJS integrations

Declaring components

let SquareComponent = Vue.extend({
template: '<span>{{ valueSquared() }}</span>',
methods: {
valueSquared() {...}
}
});

This is no longer necessary. It’s possible now to define your components as plain JavaScript objects:

let SquareComponent = {
template: '<span>{{ valueSquared() }}</span>',
methods: {
valueSquared() {...}
}
};

and then specify the component in the frameworkComponents.

Using markup to define column definitions

const columnDefs = [
{
headerName: 'IT Skills',
children: [
{headerName: 'skills', field: 'skills'},
{headerName: 'proficiency', field: 'proficiency'}
]
}
];
<ag-grid-vue :columnDefs="columnDefs" ...></ag-grid-vue>

But now you can specify them declarative in the component’s template:

<ag-grid-vue ...>
<ag-grid-column headerName="IT Skills">
<ag-grid-column field="skills" ...></ag-grid-column>
<ag-grid-column field="proficiency" ...</ag-grid-column>
</ag-grid-column>
</ag-grid-vue>

This option has long existed for other frameworks and finally, we enabled it for our VueJS users.

Read more about it here.

Binding Row Data with v-model

<ag-grid-vue v-model="rowData"...></ag-grid-vue>

The usual way would be to use the binding :rowData="rowData", but the advantage of using v-model is that it facilitates unidirectional data flow. The main difference over normal binding is that any data changes will emit an data-model-changed event which will have the current row data as a parameter.

Refresh parameter

It’s enabled through the autoParamsRefresh configuration option on ag-grid-vue component and has the same effect as if you implemented the refresh method as follows:

methods: {
refresh(params) {
this.params = params;
return true;
}

If you do this then the grid will automatically refresh the component, updating the supplied params of the component.

You can read more about all these features in the documentation.

ag-Grid

We are ag-Grid and our mission is to build the best…

Max Koretskyi

Written by

Founder of inDepth.dev community. Passionate about Mentorship, TechEd and WebDev. Angular & React contributor.

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Max Koretskyi

Written by

Founder of inDepth.dev community. Passionate about Mentorship, TechEd and WebDev. Angular & React contributor.

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store