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[]>);