如何使用 MUI 数据表使用值进行排序，而不是自定义正文呈现返回的内容？

Question

我正在使用MUI数据表，我有一个列，可以"告诉"访问网站的用户数量。到目前为止，一切都很好，但一旦我使用自定义渲染来显示更改的百分比，排序就会发生巨大变化。我是React的新手，但我在这个问题上做了很多RnD，但仍然没有真正奏效。这是我的列定义代码

const topSitesColumnsComparison = [
{
label: "Site Name",
key: "site",
options: {
customBodyRender: (value, tableMeta) => {
return (
<div>
<a className="card-url-color" href={tableMeta.rowData[1]}>
{value}
</a>
</div>
);
},
},
},
{
label: "Site URL",
key: "siteurl",
sort: false,
options: {
display: false,
},
},
{
label: "Visits",
key: "visits",
options: {
sort: true,
sortDirection: "desc",
customBodyRender: (value, tableMeta) => {
return (
<div>
{tableMeta.rowData[3] < 0 ? (
<div>
<div style={{ display: "inline-block", minWidth: "45px" }}>
{value}{" "}
</div>
<span style={{ color: "#b80000", fontSize: "11px" }}>
{" "}
<FontIcon
style={{ verticalAlign: "bottom", fontSize: "11px" }}
iconName="StockDown"
></FontIcon>{" "}
{Math.abs(Math.round(tableMeta.rowData[3] * 100) / 100)}%{" "}
<span></span>
</span>
</div>
) : (
<div>
{tableMeta.rowData[3] == 0 ? (
<div style={{ display: "inline-block", minWidth: "45px" }}>
{value}{" "}
</div>
) : (
<div>
<div style={{ display: "inline-block", minWidth: "45px" }}>
{value}{" "}
</div>
<span style={{ color: "#0B6623", fontSize: "11px" }}>
{" "}
<FontIcon
style={{ verticalAlign: "bottom", fontSize: "11px" }}
iconName="StockUp"
></FontIcon>{" "}
{Math.abs(Math.round(tableMeta.rowData[3] * 100) / 100)}%{" "}
<span></span>
</span>
</div>
)}
</div>
)}
</div>
);
},
},
},
{
label: "Change",
key: "change",
options: {
display: false,
},
},
];

我们将非常感谢在这方面提供的任何帮助。

Answer 1

添加name：site以按mui列排序。对于按customBodyRender的返回值排序，只需返回不带任何div.的值