Add Apply, Cancel and Reset buttons to the Columns Tool Panel, and stage changes until the user applies them.
Deferred Updates Copy Link
Deferred Updates stage changes made in the Columns Tool Panel until the user clicks Apply. Users can make several configuration changes and apply them in a single update, avoiding intermediate recomputations or server requests.
The example below demonstrates Deferred Updates. Note the following:
- Changes made in the Columns Tool Panel are staged as pending changes.
- Apply commits all pending changes in a single operation.
- Cancel discards all pending changes and restores the last applied state.
- Reset immediately restores the columns to the state defined in the current column definitions and discards all pending changes.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ModuleRegistry,
SideBarDef,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ColumnsToolPanelModule,
ContextMenuModule,
PivotModule,
RowGroupingPanelModule,
} from "ag-grid-enterprise";
import "./styles.css";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
ClientSideRowModelModule,
ColumnsToolPanelModule,
ColumnMenuModule,
ContextMenuModule,
PivotModule,
RowGroupingPanelModule,
];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{
field: "athlete",
minWidth: 200,
enableRowGroup: true,
enablePivot: true,
},
{ field: "age", enableValue: true },
{
field: "country",
minWidth: 200,
enableRowGroup: true,
enablePivot: true,
rowGroup: true,
},
{ field: "year", enableRowGroup: true, enablePivot: true },
{ field: "date", minWidth: 180, enableRowGroup: true, enablePivot: true },
{ field: "sport", minWidth: 200, enableRowGroup: true, enablePivot: true },
{ field: "gold", hide: true, enableValue: true },
{ field: "silver", hide: true, enableValue: true, aggFunc: "sum" },
{ field: "bronze", hide: true, enableValue: true, aggFunc: "sum" },
{ headerName: "Total", field: "total", enableValue: true },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 150,
};
}, []);
const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
return {
minWidth: 250,
};
}, []);
const sideBar = useMemo<
SideBarDef | string | string[] | boolean | null
>(() => {
return {
toolPanels: [
{
id: "columns",
labelDefault: "Columns",
labelKey: "columns",
iconKey: "columns",
toolPanel: "agColumnsToolPanel",
width: 300,
toolPanelParams: {
buttons: ["reset", "cancel", "apply"],
},
},
],
defaultToolPanel: "columns",
};
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div className="example-wrapper">
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
autoGroupColumnDef={autoGroupColumnDef}
rowGroupPanelShow={"always"}
pivotPanelShow={"always"}
sideBar={sideBar}
/>
</div>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
Include 'apply' in toolPanelParams.buttons to enable Deferred Updates:
const sideBar = useMemo(() => {
return {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
buttons: ['cancel', 'apply'],
},
},
],
defaultToolPanel: 'columns',
};
}, []);
<AgGridReact sideBar={sideBar} />Changes made outside the Columns Tool Panel, such as dragging columns into the Row Group or Pivot Panels, using the Column Menu, or calling the Grid API, are applied immediately and clear any pending changes. Column pinning, resizing and group expansion do not clear pending changes.
Reset Without Deferred Updates Copy Link
The Reset button does not depend on Deferred Updates. Include 'reset' without 'apply' to add a button that resets the columns to the state defined in the current column definitions, as api.resetColumnState() does.
The example below adds only a Reset button. Note the following:
- Changes made in the Columns Tool Panel are applied immediately, as there is no Apply button.
- Reset restores the columns to the state defined in the current column definitions.
Server-Side Row Model Copy Link
With the Server-Side Row Model, Deferred Updates batch several configuration changes into a single server request. See Deferred Column Configuration for an example.
API Copy Link
Buttons to display at the bottom of the Columns Tool Panel, in the order they should be displayed in. 'apply': Changes are deferred until the Apply button is clicked. 'cancel': Discards any deferred changes. Only has an effect when 'apply' is also included. 'reset': Immediately resets the columns to the state defined in the current column definitions, discarding any pending changes. 'apply' button enables deferred changes.
|