MUI 数据表排序列

Question

我有一列基本上是一个对象，我显示了我想要显示的值，但排序不适用于该列。

附上一个例子，以便我更好地解释自己。

例如：

  const [data, setData] = useState([
    {
      ID: "A001",
      Name: "Joe James",
      Amount: "$300,000",
      Purpose: "$220,000",
      Tib: 12 + "years",
      details: {Score: "620-670" , Name:"Joe James"},
      Score: "620-670",
      Phone: "9292132019",
      Mail: "Nole@temp.io",
      State: "TX",
      Opening: "11.11.2021",
      Pf: "Priority urgent",
      Flags: "In Progress",
      Ls: "DorAff",
      Company: "Dit",
      Ras: "...",
    },
   {
      ID: "A001",
      Name: "Joe James",
      Amount: "$300,000",
      Purpose: "$220,000",
      Tib: 12 + "years",
      details: {Score: "650-720" , Name:"Test James"},
      Score: "620-670",
      Phone: "9292132019",
      Mail: "Noe@temp2t.io",
      State: "TX",
      Opening: "11.11.2021",
      Pf: "Priority urgent",
      Flags: "In Progress",
      Ls: "DavAff",
      Company: "Mit",
      Ras: "...",
    }
)];

 const columns = [
    {
      name: "details",
      label: "Name",
      options: {
        customBodyRender: (value: any, tableMeta: any, updateValue: any) => {
          return value?.Name;
        },
        sort: true,
        filter: true,
        setCellProps: () => ({
          align: "center",
        }),
        setCellHeaderProps: (value: any) => ({
          className: "centeredHeaderCell",
        }),
      },
    },
    {
      name: "details",
      label: "Score",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value: any, tableMeta: any, updateValue: any) => {
          return value?.Score;
        },
        setCellProps: () => ({
          align: "center",
        }),
        setCellHeaderProps: (value: any) => ({
          className: "centeredHeaderCell",
        }),
      },
    }
]

正如您在示例中看到的，我转到详细信息并显示名称，并在另一列中显示分数。

提前致谢:-)

Answer 1

我能够使用文档中的 sortCompare 函数解决这个问题！ https://www.npmjs.com/package/mui-datatables/v/3.3.1