React Data GridAggregation - Show Values As

Show each value as a relative figure, such as a percentage of the grand total or of its parent group.

"Show Values As" displays a column's value as a share of a grand, column or group total. The underlying data is unchanged — the value is transformed only for display.

A mode can be chosen by the user from the column menu, set on the column definition, or applied through Column State.

This example groups Olympic winners by country and year, then shows raw medal totals alongside the same values as a percentage of their parent group.

Column Menu Copy Link

The Show Values As submenu is off by default. To let the user switch mode from the Column Menu, register the ColumnMenuModule and set enableShowValuesAs: true on the required columns. Switching mode only updates the affected column — it does not re-aggregate, re-sort or re-filter.

The effect depends on where you set it:

• On defaultColDef - the grid applies enableShowValuesAs selectively only to columns that have a numeric type or an aggFunc.
• On a single column - always applied, whatever the column type. Use this when the column type cannot be inferred, such as a valueGetter or custom aggFunc that returns a number from string or object data.

// Grid-wide: offered on value/numeric columns only.
const defaultColDef = useMemo(() => { 
	return { enableShowValuesAs: true };
}, []);
const [columnDefs, setColumnDefs] = useState([
    // Force the menu on a column the heuristic wouldn't include.
    { field: 'label', enableShowValuesAs: true },
]);

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={columnDefs}
/>

A numeric column that is not yet aggregated is promoted to a value column when a mode needing a total is chosen.

Built-in Modes Copy Link

percentOfGrandTotal and percentOfColumnTotal give the same result outside Pivot mode, where there is a single column total. They diverge only while pivoting: percentOfGrandTotal keeps the whole column's grand total as the denominator, whereas percentOfColumnTotal uses each pivot column's own total, so every pivot column sums to 100%.

If a mode was already active when the grid left the view that supports it, the selection is kept — its cells show #N/A. In the column menu it appears greyed and cannot be selected.

Setting the Mode Copy Link

Set showValuesAs on a value column to the mode you want. Use initialShowValuesAs instead to set only the starting mode and leave the user free to change it from the menu.

const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true, hide: true },
    { field: 'gold', aggFunc: 'sum', showValuesAs: 'percentOfParentRowTotal' },
    { field: 'total', aggFunc: 'sum', showValuesAs: 'percentOfGrandTotal' },
]);

<AgGridReact columnDefs={columnDefs} />

The object form takes an optional precision to override the configured decimal places for that selection:

const field = 'gold';
const aggFunc = 'sum';
const showValuesAs = { type: 'percentOfGrandTotal', precision: 1 };

<AgGridReact
    field={field}
    aggFunc={aggFunc}
    showValuesAs={showValuesAs}
/>

Column State Copy Link

The active mode is part of Column State, so a runtime change is applied through applyColumnState rather than by mutating the column definition. Set showValuesAs to a mode to enable it, or to null to clear it:

// Enable a mode
gridApi.applyColumnState({ state: [{ colId: 'gold', showValuesAs: 'percentOfGrandTotal' }] });

// Disable it
gridApi.applyColumnState({ state: [{ colId: 'gold', showValuesAs: null }] });

Reading the Transformed Value Copy Link

The methods api.getCellValue and rowNode.getDataValue return the raw aggregate by default. To read the transformed value, pass transformValues: true to api.getCellValue, or 'transformed' to rowNode.getDataValue:

const shown = gridApi.getCellValue({ rowNode, colKey: 'gold', transformValues: true });
const same = rowNode.getDataValue('gold', 'transformed');

Configuration Copy Link

showValuesAsDef configures Show Values As for a column, and deep-merges from defaultColDef for grid-wide settings. It controls the default precision (decimal places, default 2) and suppressHeaderIndicator (the icon shown in the column header while a mode is active).

const defaultColDef = useMemo(() => { 
	return {
        showValuesAsDef: { precision: 1 },
    };
}, []);

<AgGridReact defaultColDef={defaultColDef} />

To turn Show Values As off for a column, set showValuesAsDef to null — on a single column, or on defaultColDef for every column:

// Disable for all columns
const defaultColDef = useMemo(() => { 
	return {
        showValuesAsDef: null,
    };
}, []);
const [columnDefs, setColumnDefs] = useState([
    // Disable for this column only
    { field: 'gold', aggFunc: 'sum', showValuesAsDef: null },
]);

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={columnDefs}
/>

Row Grouping Copy Link

This example groups Olympic winners by country, showing gold medals as a percentage of their parent group and the medal total as a percentage of the column's grand total.

Flat Data Copy Link

Show Values As does not require grouping. On a flat grid each row can be shown as a share of the column's grand total. The example below enables a Grand Total Row so the 100% total is visible at the bottom.

Tree Data Copy Link

With Tree Data, aggregates are populated on parent nodes, so each node's value can be shown as a percentage of its parent row total.

Pivoting Copy Link

In Pivot mode each pivot column carries its own total, so a value can be shown as a share of its column.

Filtering Copy Link

Show Values As reads the column's existing aggregate, so its denominators follow the grid's aggregation filtering rules. By default totals reflect only the rows that pass the filter, so the shown rows sum to 100%. Set suppressAggFilteredOnly to keep the unfiltered total in the denominator.

API Reference Copy Link

Show Values As is configured with the following column properties:

The transformed value can be read through the grid API: