CODEWITHSUNDEEP
javascriptreactjsecmascript-6ag-grid-react
palnic
palnic

Reputation: 436

Change Status Bar Component when data change in React AgGrid

I need to change the value I show in my custom status bar when a prop changes. So let's say I got:

const CustomGrid = ({
   data, lastUpdate, framweworkComponents, columns
}) => {

  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);
  const [gridParams, setGridParams] = useState(null);

  const onGridReady = (params) => {
     setGridApi(params.api);
     setGridColumnApi(params.columnApi);
     setGridParams(params);
  }
 };

  
  const renderLastUpdateStatusBar = () => (
      <div>
         {lastUpdate}
      </div>
  );

  return(
    <div className={theme || 'ag-theme-balham'} style={style}>
      <AgGridReact
        modules={AllModules}
        onGridReady={onGridReady}
        columnDefs={columns}
        rowData={data}
        defaultColDef={defaultColDef || {
          resizable: true,
          menuTabs: [],
        }}
        frameworkComponents={{
          ...frameworkComponents,
          lastUpdateStatusBarComponent: renderLastUpdateStatusBar,
        }}
        statusBar={{
          statusPanels: [
            {
              statusPanel: 'lastUpdateStatusBarComponent',
              key: 'lastUpdateStatusBarKey',
              align: 'left',
            },
          ],
        }
      />
    </div>

 )
}

When 'lastUpdate' changes, it is correctly passed to CustomGrid component but the status bar doesn't get re-rendered, so I see the first value forever. My goal is to make the status bar updating every time 'lastUpdate' changes. I tried making a state containing my framework components and set it in a useEffect when lastUpdate changes, then put this state in frameworkComponents prop in agGrid, but it does not work:

  const [frameworkC, setFrameworkC] = useState(null);

  useEffect(() => {
    setFrameworkC({
      ...frameworkComponents,
      lastUpdateStatusBarComponent: renderLastUpdateStatusBar,
    })
  }, [lastUpdate]);

  ...
  <AgGridReact
     ...
     frameworkComponents={frameworkC}
     ...
  >

I also tried setting this state in onGridReady function, same result. Also I tried calling api.redrawRows(gridParams) in the useState, no way.

Is there some API I can use to update the status bar component? Or some any approach?

Upvotes: 1

Views: 1111

Answers (1)

Ram Segev
Ram Segev

Reputation: 2573

You need to add key for the component to rerender

 <AgGridReact
        key={lastUpdate}
        modules={AllModules}
        onGridReady={onGridReady}
        columnDefs={columns}
        rowData={data}
        defaultColDef={defaultColDef || {
          resizable: true,
          menuTabs: [],
        }}
        frameworkComponents={{
          ...frameworkComponents,
          lastUpdateStatusBarComponent: renderLastUpdateStatusBar,
        }}
        statusBar={{
          statusPanels: [
            {
              statusPanel: 'lastUpdateStatusBarComponent',
              key: 'lastUpdateStatusBarKey',
              align: 'left',
            },
          ],
        }
      />

Upvotes: 2

Related Questions