What's New in AG Grid 35

AG Grid 35 now allows users to create spreadsheet-style formulas directly within cells, in addition to support for dragging row groups, absolute sorting and column selection.

Key Features

1. Formulas - Enable spreadsheet-style formulas within cells that can reference other cells, functions, and operators, to allow users to create their own custom calculations.
2. Row Group Dragging - Move rows within or across groups using drag-and-drop, whilst the grid takes care of any necessary data updates.
3. Absolute Sorting - Sort numeric values by magnitude, disregarding sign (e.g. positive/negative) to measure deviations, anomalies, or variances.
4. Column Selection - Select an entire column with a single click or key press, ready for further processing, analysis, or visualisation.
5. Filtering & Export Overlays - Display full-customisable overlays to users when performing long-running filter or export operations.

Formulas

AG Grid 35 now supports formulas, allowing users to create dynamic calculations by typing them directly into a cell. Formulas can reference other cells, functions, mathematical operators, and constants, just like in Excel:

To enable formulas, set allowFormula to true on the desired columns and implement the getRowId callback:

// Assign rowIds
const getRowId = (params) => String(params.data.rid);

// Enable Formulas
const columnDefs = [
  { 
    field: 'subtotal',
    allowFormula: true
  },
  // ... other columns
];

If the functions provided out of the box don't meet your requirements, custom functions can be defined via the formulaFuncs grid option to perform any kind of calculation:

const gridOptions = {
  formulaFuncs: {
    foo: {
        func: (params) => {
            return bar;
        },
    },
  }
  // ... other grid options 
}

Formulas provide users with ultimate control over their data, allowing them to manipulate and interrogate their data however they like, without needing to go back to their developers for updates to the grid configuration.

Visit the Formulas documentation for more information.

Row Group Dragging

Row dragging can now be combined with Row Grouping, allowing users to move rows within or between groups:

To enable row dragging with row groups, set the rowDrag, suppressMoveWhenRowDragging, refreshAfterGroupEdit, and rowDragManaged properties to true, and implement the getRowId callback:

const gridOptions = {
  columnDefs: [
    { field: "country", width: 120, rowGroup: true, editable: true },
    { field: "year", width: 90, rowGroup: true, editable: true },
    ...
  ],
  // Enable Row Dragging
  autoGroupColumnDef: {
    rowDrag: true,
    width: 250,
  },
  // Configure Row Dragging w/ Groups
  suppressMoveWhenRowDragging: true,
  refreshAfterGroupEdit: true,
  rowDragManaged: true,
  getRowId: ({ data }) => data.id,
};

Row group dragging is perfect for data that needs to be flexible, such as adjusting line-items in financial reports, reordering tasks within a sprint, or moving accounts between regions.

Visit the Row Grouping - Row Dragging documentation for more information.

Absolute Sorting

Absolute Sorting sorts numeric values by magnitude, ignoring their sign - ordering values by their size, regardless of whether it is positive or negative:

To enable absolute sorting, simply add the type: 'absolute' property to the colDef.sort property:

const gridOptions = {
    columnDefs: [
        {
            field: 'rankingChange',
            sort: { direction: 'asc', type: 'absolute' },
            sortingOrder: [
                { direction: 'asc', type: 'absolute' }, 
                { direction: 'desc', type: 'absolute' },
                null, 
            ],
        },
        // ... other columns 
    ],
}

Absolute sorting is ideal for ranking deviations, anomalies, variances, and error deltas where size is more important than direction.

Visit the Absolute Sorting documentation for more information.

Column Selection

Columns now support selection, allowing users to easily select entire columns of data.

To enable column selection, set the enableColumnSelection property to true on the desired columns:

const columnDefs = [
  { 
    field: 'subtotal', 
    enableColumnSelection: true 
  },
  // ... other columns 
]);

Column selection is particularly useful when users want to do something with a large range of data, such as creating an integrated chart, avoiding the need to manually select all of the cells themselves.

Visit the Column Selection documentation for more information.

Filtering & Export Overlays

Overlays are used to display messages over the grid to indicate the grid state. AG Grid 35 introduces two new overlays - a no matching rows overlay, which is shown when there are no matching rows to a column filter, and an exporting overlay, shown during exporting operations:

The loading, exporting, no rows and no matching rows overlays are enabled by default, and custom overlays can be provided via the gridOptions.components.{overlayKey} property:

const gridOptions = {
    components: {
        agLoadingOverlay: CustomLoadingOverlay,
        agNoRowsOverlay: CustomNoRowsOverlay,
        agNoMatchingRowsOverlay: CustomNoMatchingRows,
        agExportingOverlay: CustomExportingOverlay
    },
}

Overlays help provide clearer feedback to users when performing long-running actions on large datasets or applying specific filters.

Visit our Overlays documentation for more information.

Summary

AG Grid 35 is one of our most significant releases yet, focused on user interactivity and experience:

• Formulas enable users to create dynamic calculations directly from the UI,
• Row group dragging simplifies the reorganisation of grouped datasets,
• Absolute sorting provides new ways to rank data,
• Column selection accelerates bulk operations, and
• Filtering and export overlays improve clarity for users working with large datasets and long-running processes.

As always, we're here to help, and we're keen to hear your feedback. Enterprise customers can contact us via Zendesk; Alternatively, please submit a GitHub issue, or complete our contact form.

Next Steps

New to AG Grid? Get started in minutes, for free:

Considering AG Grid Enterprise? Request a free 30-day trial licence to test your application in production and get direct access to our support team.

Happy coding!