React Data GridUpgrading to AG Grid 34

New Filters Tool Panel, Cell Editor Validation, Batch Editing, Date Picker Time Support, Tree Data Row Dragging.

What's New Copy Link

AG Grid 34.0 adds important new features – New Filters Tool Panel, Cell Editor Validation, Batch Editing, Date Picker Time Support, Tree Data Row Dragging, as described in the release post.

These improvements involve no breaking changes as listed below.

Breaking Changes Copy Link

There are no breaking changes in AG Grid version 34.0.

Behaviour Changes Copy Link

There are no behaviour changes in AG Grid version 34.0.

Removal of Deprecated APIs Copy Link

There are no deprecated API removals in AG Grid version 34.0.

Deprecations Copy Link

Grid Options Copy Link

suppressAdvancedFilterEval is deprecated without replacement. No longer using eval at all in advanced filters so this is now default behaviour. This improves security by not requiring script-src 'unsafe-eval' for advanced filters.

Filters Copy Link

ISetFilter interface is deprecated. When retrieving via api.getColumnFilterInstance(column), use SetFilterUi. To access the methods that were previously available on ISetFilter (but not on SetFilterUi), instead retrieve the filter handler via api.getColumnFilterHandler(column) and use the SetFilterHandler interface.
getModel() and setModel() on all grid-provided filter instances are deprecated. Use api.getColumnFilterModel(column) and api.setColumnFilterModel(column) instead.

Migrating to Filter Handlers

Filter Handlers simplify custom filter components by splitting the filter logic out from the UI component. They also enable new features such as the New Filters Tool Panel.

See Custom Filter Components for the full guide on using filter handlers.

To migrate a custom filter component, simply move the doesFilterPass callback from inside the filter component to the column definition.

Old:

const [columnDefs, setColumnDefs] = useState([
    {
        filter: CustomFilter,
        // other props
    }
]);

<AgGridReact columnDefs={columnDefs} />

New:

const [columnDefs, setColumnDefs] = useState([
    {
        filter: {
            component: CustomFilter,
            doesFilterPass: (params) => {
                // filter logic
            }
        },
        // other props
    }
]);

<AgGridReact columnDefs={columnDefs} />

Properties access from the component props can now be accessed from the parameters passed to doesFilterPass.

See Filter Logic for more information, including handling more advanced cases.

To enable custom filter components to work with Filter Buttons (including apply), switch from using the model and onModelChange(model) props to state.model and onStateChange({ model }). See Using Buttons for more information.

Changes List Copy Link

See the full list of changes in the AG Grid 34.0 changelog.

Getting Started

Layout & Styling

Charting

Core Features

Advanced Features