aggrid custom status bar

Question

I want to implement a custom status bar where I can get the special sum of all the selected number cells based on columnA. If columnA = pos, treat number as positive, else if columnA = neg, treat number as negative.

I tried to add my own statusPanel component, but I can't even return the correct number of count. It always return 0 no matter how many cells I select:

gridOption= {  
  ...
  frameworkComponents: {
    sumStatusBarComponent: SumStatusBarComponent,
  },
  ...
  statusBar: {
    statusPanels: [
      {
        statusPanel: 'sumStatusBarComponent',
      },
      {
        statusPanel: 'agAggregationComponent',
      },
    ],
  },
}

function SumStatusBarComponent(props: IStatusPanelParams) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(props.api.getSelectedNodes().length);
    console.log('count', props.api.getSelectedNodes().length);
  }, []);

  return (
    <div className="ag-status-name-value">
      <span className="component">Row Count Component&nbsp;</span>
      <span className="ag-status-name-value-value">{count}</span>
    </div>
  );
};

Can anyone give me an idea?

Answer 1

added a custom status bar component to overwrite the existing sum aggregation

GridOptions = {
...  
frameworkComponents: {
    sumStatusBarComponent: SumStatusBarComponent,
  },
  statusBar: {
    statusPanels: [
      {
        statusPanel: 'agAggregationComponent',
        statusPanelParams: {
          aggFuncs: ['count', 'min', 'max', 'avg'],
        },
      },
      {
        statusPanel: 'sumStatusBarComponent',
      },
    ],
  },
...
}

add rangeSelectionChanged so can take action when range selection change

function SumStatusBarComponent(props: IStatusPanelParams) {
  const [sum, setSum] = useState('');
  const [visible, setVisible] = useState(false);

  props.api.addEventListener('rangeSelectionChanged', () =>
    handleRangeSelectionChanged(props.api, setSum, setVisible),
  );

  return (
    <div
      className="ag-status-name-value"
      style={{ display: visible ? 'inline' : 'none' }}
    >
      <span className="component">Sum:&nbsp;</span>
      <span className="ag-status-name-value-value">{sum}&nbsp;</span>
    </div>
  );
}