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')