修复最后一行 react material-table 以显示特定列的总和?
Fix the last row of react material-table to display the sum of a particular column?
我们有一个要求显示 2 列的总和
import MaterialTable, {MTableToolbar, MTableAction} from "material-table";
.
.
.
<MaterialTable
actions={transformActions()}
data={data}
editable={props.allowRowEditing ? {
onRowAdd: newData => onRowAdd(newData),
onRowDelete: oldData => onRowDelete(oldData),
onRowUpdate: (newData, oldData) => onRowUpdate(newData, oldData)
} : {}}
icons={tableIcons}
.
.
./>
我有计算总数和显示总数的功能;但是,在对列进行排序时,显示总数的行也会移动。有没有办法修复 material-table 本身的最后一行?或者是否有任何风格黑客可以实现这一目标?
根据下面的问题报告,目前还没有任何方法可以使用 material table 的属性来实现此目的
请注意,我不能随意使用另一个 table 库。
我尝试定位最后一行并将其位置设置为绝对位置,如下所示
position: absolute;
height: 55px;
width: calc(100% - 1px);
bottom: 0;
虽然这修复了最后一行的位置,但我找不到根据其他行对齐列的动态方法。
您可以使用 TableFooter
元素将总计放在 table 的底部。
覆盖正文组件以添加页脚的示例:
import { TableCell, TableFooter, TableRow } from "@material-ui/core";
// ...
<MaterialTable
// ...
components={{
Body: (props) => (
<>
<MTableBody {...props}/>
<TableFooter>
<TableRow>
<TableCell colSpan={2}/>
<TableCell colSpan={2}>Total: 12345</TableCell>
</TableRow>
</TableFooter>
</>
)
}}
/>
Ricardo 关于如何呈现实际总价值的答案的扩展
Body: (props) => {
let totalObj = {
actualSum: 0
}
props.renderData.forEach((rowData: any) => {
totalObj.actualSum += rowData.act_svc_lvl;
});
return (
<>
<MTableBody {...props}/>
<TableFooter>
<TableRow>
<TableCell colSpan={1}/>
<TableCell colSpan={1}/>
<TableCell colSpan={1}>{totalObj.actualSum}</TableCell>
</TableRow>
</TableFooter>
</>
)}
我们有一个要求显示 2 列的总和
import MaterialTable, {MTableToolbar, MTableAction} from "material-table";
.
.
.
<MaterialTable
actions={transformActions()}
data={data}
editable={props.allowRowEditing ? {
onRowAdd: newData => onRowAdd(newData),
onRowDelete: oldData => onRowDelete(oldData),
onRowUpdate: (newData, oldData) => onRowUpdate(newData, oldData)
} : {}}
icons={tableIcons}
.
.
./>
我有计算总数和显示总数的功能;但是,在对列进行排序时,显示总数的行也会移动。有没有办法修复 material-table 本身的最后一行?或者是否有任何风格黑客可以实现这一目标?
根据下面的问题报告,目前还没有任何方法可以使用 material table 的属性来实现此目的
请注意,我不能随意使用另一个 table 库。
我尝试定位最后一行并将其位置设置为绝对位置,如下所示
position: absolute;
height: 55px;
width: calc(100% - 1px);
bottom: 0;
虽然这修复了最后一行的位置,但我找不到根据其他行对齐列的动态方法。
您可以使用 TableFooter
元素将总计放在 table 的底部。
覆盖正文组件以添加页脚的示例:
import { TableCell, TableFooter, TableRow } from "@material-ui/core";
// ...
<MaterialTable
// ...
components={{
Body: (props) => (
<>
<MTableBody {...props}/>
<TableFooter>
<TableRow>
<TableCell colSpan={2}/>
<TableCell colSpan={2}>Total: 12345</TableCell>
</TableRow>
</TableFooter>
</>
)
}}
/>
Ricardo 关于如何呈现实际总价值的答案的扩展
Body: (props) => {
let totalObj = {
actualSum: 0
}
props.renderData.forEach((rowData: any) => {
totalObj.actualSum += rowData.act_svc_lvl;
});
return (
<>
<MTableBody {...props}/>
<TableFooter>
<TableRow>
<TableCell colSpan={1}/>
<TableCell colSpan={1}/>
<TableCell colSpan={1}>{totalObj.actualSum}</TableCell>
</TableRow>
</TableFooter>
</>
)}