我正在創建一個 MUI Web 應用程式來追蹤一些個人資料。
我正在使用 MUI datagrid pro 來顯示數據，正如我們所知，它的 datagrid 元件內有一些相當廣泛的過濾器。
我想顯示目前顯示的篩選列的總和，而不必重新查詢資料庫來取得這些特定值。感覺它應該相當簡單，但我不知道如何訪問它。
datagridpro API 位於：https://mui.com/x/api/data-grid/data-grid-pro/
我的資料網格元件的建構如下：
const fetchData = useCallback(
async (IDs: string[]) => {
response = await fetch("/api/data")
data = response.json()
…
…
…
transformedData = transformData(data)
return { data: transformedData }, };
[dispatch] );
這透過標準 useEffect 提供，以使用資料設定狀態。
transformedData 方法類似：
const transformedData = (data: any) => {
return data.map((item: any, index: any) => {
const timestamp = new Date(item.timestamp)
return {
id: item.id
value_1: item.value_1
value_2: item.value_2
date: timestamp
value_3: item.value_3
};
});
};
這是顯示 DataGridPro 元件的目前程式碼：
<DataGridPro
rows={transformedDataFromFunction}
sx={{
".MuiDataGrid-row:hover": {
backgroundColor: "#C2C2C2",
},
}}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
onRowModesModelChange={(newModel: typeof rowModesModel) =>
setRowModesModel(newModel)
}
onRowEditStart={handleRowEditStart}
onRowEditStop={handleRowEditStop}
processRowUpdate={processRowUpdate}
componentsProps={{
toolbar: { setRowModesModel },
}}
slots={{ toolbar: GridToolbar }}
// leaving this in here on off chance we don't need MUI
// experimentalFeatures={{ newEditingApi: 真 }}
/>
同樣，我本質上是想在頁面頂部的單獨 div 中顯示指定列的總和，格式為：
總值 1：sum(value_1) |總計值 2： sum(value_2) |總數：總和（索引）
[在此插入表格資料]
同樣，當我根據 MUI 資料網格進行篩選時，我想顯示這些顯示列的總和。
假設 value_1 總共有 4 行，值顯示在下面
value_1 | 3 | 4 | 1 | 2
假設我想按值>2進行過濾。
在 datagridpro 元件上，這將被過濾並顯示為：
value_1 | 3 | 4
我想顯示顯示的列的計數，即2，行的總和將為7。
我應該使用什麼 API 屬性來存取它？
謝謝
您可以使用
MUI DataGridPro API中的gridFilteredSortedRowIdsSelector來取得列的總和。此選擇器傳回目前在網格中篩選和排序的行 ID 陣列。您可以使用此陣列存取行資料並計算所需列的總和。例如，您可以執行下列操作：const SummatedTotals = () => { const apiRef = useGridApiContext(); const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef); const filteredSortedRows = filteredSortedRowIds.map((id) => apiRef.current.getRow(id) ); const totalUnitPrice = filteredSortedRows.reduce( (sum, row) => sum row.unitPrice, 0 ); const totalFeeRate = filteredSortedRows.reduce( (sum, row) => sum row.feeRate, 0 ); const totalCount = filteredSortedRows.length; return ( <div> {`Total Unit Price: ${ Math.round(totalUnitPrice * 100) / 100 } | Total Fee Rate: ${ Math.round(totalFeeRate * 100) / 100 } | Total #: ${totalCount}`} </div> ); };然後
<DataGridPro /* { ...restProps } */ slots={{ footer: SummatedTotals }} />您可以在此處查看整個範例：codesandbox.io
要了解更多信息，請參閱過濾選擇器，API 物件 和 存取狀態。