MUI 数据表排序列

Question

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

附上一个例子，这样我就可以更好地解释自己。

例如：

  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",
        }),
      },
    }
]

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

提前致谢：-）

Answer 1

您可以通过简单的方式使用它。 您只需输入列的名称和方向。 内表选项

sortOrder: {
   name: 'name',
   direction: 'desc'
}

所以你的代码会是这样的

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: "name",
  label: "Name",
  options: {
    sort: true,
    filter: true,
    setCellProps: () => ({
      align: "center",
    }),
    setCellHeaderProps: (value: any) => ({
      className: "centeredHeaderCell",
    }),
  },
},
{
  name: "score",
  label: "Score",
  options: {
    filter: true,
    sort: true,
    setCellProps: () => ({
      align: "center",
    }),
    setCellHeaderProps: (value: any) => ({
      className: "centeredHeaderCell",
    }),
  },
}
];
const options = {
sortOrder: {
        name: 'name',
        direction: 'desc'
      },
};

Answer 2

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

Answer 3

您可以在MUI 数据表选项中添加sortOrder

sortOrder: {
   name: 'name',
   direction: 'desc'
}

示例： https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js

sortOrder：设置要排序的列及其排序方向。 要删除/重置排序，请输入一个空的 object。 object 选项是列名和方向： name: string, direction: enum('asc', 'desc')