Examples

In this section we show complex examples combining different features of the grid or using frameworks where the implementation is significantly different to the plain JavaScript version. For example how to build use Redux with React, or RxJS with Angular.

If you are looking for a particular feature, please refer to the features section for details on that feature. Use this section for reference on how to configure ag-Grid.

Angular & Material Design

ag-Grid Angular Examples with Material Design Components.

Go To Angular & Material Design

Expressions & Context

Shows extensive use of value getters (using expressions) and class rules (again using expressions). The grid shows 'actual vs budget data and yearly total' for widget sales split by city and country.

Go To Expressions & Context

Import Excel

We illustrate how you might import an Excel spreadsheet into ag-Grid using a third-party library - in this example we're using xlsx-style.

Go To Import Excel

Gallery

This section of the documentation demonstrates different configurations of the grid. It is really a mixed bag section, showing combinations of grid features working together that doesn't fit into a particular documentation section.

Go To Gallery

Graphing

Sometimes however a picture (or graph) is worth a thousand words, so in this section we offer some examples of how you can interact with external Graphs, or embed Graphs into ag-Grid itself.

Go To Graphing