How to update props in Ag Grid status bar custom component

Question

I am working on a basic Ag Grid React application, and I added a custom status bar component to the grid, using their docs. My goal is to update the "total rows" item in the status bar when a filter is applied to the grid, however I cannot get the value in the status bar to change. The status bar component uses a state variable inherited from the Grid as a prop, but when the prop changes, the status bar does not re-render to reflect that.

Here's a demo that shows that even when the prop passed to the status bar component changes, nothing happens. You can test this by clicking the button and the console will show the "total" variable incrementing, yet the status bar remains unchanged.

Relevant code snippet:

import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';

const CustomStatusBar = props => {
  return (
    <div className="ag-status-bar-center">
      <div className="ag-status-name-value ag-status-panel ag-status-panel-total-row-count">
        <span className="label">Total Rows</span>:&nbsp;
        <span className="ag-status-name-value-value">{props.total}</span>
      </div>
    </div>
  );
};

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];
  const [total, setTotal] = useState(3);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        frameworkComponents={{
          customStatusBar: CustomStatusBar
        }}
        statusBar={{
          statusPanels: [
            {
              statusPanel: 'customStatusBar',
              align: 'center',
              statusPanelParams: { total: total }
            }
          ]
        }}
      >
        <AgGridColumn field="make" />
        <AgGridColumn field="model" />
        <AgGridColumn field="price" />
      </AgGridReact>
      <button
        onClick={() => {
          setTotal(prevTotal => {
            console.log(prevTotal);
            return prevTotal + 1;
          });
        }}
      >
        Click me
      </button>
    </div>
  );
};

render(<App />, document.getElementById('root'));

score 2 · Accepted Answer · answered Aug 26 '21 at 08:44

Instead of passing total inside the statusPanelParams. I'd recommend defining a getter/setter helper method on the Custom Status Bar, and pass in the total value when needed so that you can update it.

You can get the Status Bar Instance like this:

// example - get status bar component
const statusBarComponent = gridOptions.api.getStatusPanel('statusBarCompKey');
if (statusBarComponent) {
    componentInstance = statusBarComponent.getFrameworkComponentInstance();
}

And if you define a method e.g. updateTotal on the status bar, you can call it like this:

componentInstance.updateTotal(total)

See this example for more information: https://www.ag-grid.com/react-data-grid/component-status-bar/#accessing-status-bar-panel-instances

Thanks, I tried doing that and I works great. – Dan Aug 27 '21 at 15:15 — Dan, Aug 27 '21 at 15:15

How to update props in Ag Grid status bar custom component

1 Answers1