I have a column that is basically an object, I display the value I want to display, but the sort does not work for that column.

Attach an example so I can explain myself a little better.

for example:

  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: "[email protected]",
      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: "[email protected]",
      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",
        }),
      },
    }
]

As you can see in the example I go to the details and display the Name, and in another column displays the Score.

Thanks in advance :-)

I have a column that is basically an object, I display the value I want to display, but the sort does not work for that column.

Attach an example so I can explain myself a little better.

for example:

  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: "[email protected]",
      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: "[email protected]",
      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",
        }),
      },
    }
]

As you can see in the example I go to the details and display the Name, and in another column displays the Score.

Thanks in advance :-)

• javascript
• reactjs
• typescript
• material-ui
• mui-datatable

• 1 where is your tried code – Ashish Kamble Commented Nov 21, 2021 at 11:27

3 Answers 3

You can use it in a simple way. You just have to put the name of the column and the direction. Inside the table options

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

So your code would be something like this

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: "[email protected]",
  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: "[email protected]",
  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'
      },
};

I was able to solve this, using the sortCompare function from the documentation! https://www.npmjs./package/mui-datatables/v/3.3.1

You can add sortOrder in MUI Data Table Options

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

Example: https://github./gregnb/mui-datatables/blob/master/examples/customize-columns/index.js

sortOrder: Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction: name: string, direction: enum('asc', 'desc')