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.

Make scrollbars always visible

Avoids visual table 'jumps' when toggling short and long data sets. To make that work, override the overflow of the .ag-grid-body-viewport to scroll !important. The !important is necessary to override the inline styling.

Auto Height, Full Width & Pagination

Shows the autoHeight feature working with fullWidth and pagination.

  • The fullWidth rows are embedded. This means:
    • Embedded rows are chopped into the pinned sections.
    • Embedded rows scroll horizontally with the other rows.
  • There are 15 rows and pagination page size is 10, so as you go from one page to the other, the grid re-sizes to fit the page (10 rows on the first page, 5 rows on the second page).

Expanding Groups & Vertical Scroll Location

Depending on your scroll position the last item's group data may not be visible when clicking on the expand icon.

You can resolve this by using the function api.ensureIndexVisible(). This ensures the index is visible, scrolling the table if needed.

In the example below, if you expand a group at the bottom, the grid will scroll so all the children of the group are visible.

Enterprise Row Model & Complex Columns

This example mixes enterprise row model and complex objects. It shows how you can have value getters and embedded fields (ie the field attribute has dot notation).

In the example, all rows back are modified so that the rows looks something like this:

row = { // country field is complex object country: { name: 'Ireland', code: 'IRE' }, // year field is complex object year: { name: '2012', shortName: "'12" }, // other fields as normal ... };

Then the columns are set up so that country uses a valueGetter and year uses a field with dot notation, ie year.name

Flower Nodes

Version 14.2 of ag-Grid introduced full support for Master / Detail. Before this, users had to implement master / detail using flower nodes. Flower nodes are now deprecated. However to check for backwards compatibility, flower node examples are presented here for regression testing purposes.

Below shows using flower nodes to provide a master / detail experience.