React store - how to group by and sum

Viewed 150

In a React store I have a datatable, using redux. From this one store, I would like to feed additional different datagrids but grouping and summing by different columns. the below datagrid simply displays the original data.

For example, I would like second grid to group by pacct, sum by last_price. In my old non React projects I used linq. In an old extjs project there was a feature to do this in their store.

Can someone please assist on how to do this in React?

this is my table structure...

export interface TradeData {
  id: number;
  filedate: Date;
  poffic: string;
  pacct: string;
  quantity: number;
  sector: string;
  psdsC1: string;
  name: string;
  bbsymbol: string;
  last_price: number;
  deltasettlement: number;
}

here is the function I use it...

export default function Notes() {
  const dispatch = useDispatch();
  const trades = useSelector(
    (state: AppState) => state.pwData.tradeList
  );

  const classes = useStyles();

  React.useEffect(() => {
    const doGetTrades = async () => {
      const unansweredQuestions = await getTrades();
      dispatch(gotTradesAction(unansweredQuestions));
    };
    doGetTrades();
  }, []);

  return (
    <Container>   
      <div style={{ height: 600, width: "100%" }}>
        <DataGrid rows={trades} columns={columns} />
      </div>
    </Container>
  );
}

UPDATE

I was able to do a group by (pacct) using reduce, but I can't figure out how to sum 'last_price'. any help would be greatly appreciated!

const result = trades.reduce((groupedAccounts, trade) => {
  const account = trade.pacct;
  if (groupedAccounts[account] == null) groupedAccounts[account] = [];
  groupedAccounts[account].push(trade);
  return groupedAccounts;
}, {} as Record<string, TradeData[]>);
0 Answers
Related