Material-ui Table sorting not working reactjs

Question

Good Day! Currently using Material-ui table, and I'm having an issue on sorting. I followed what's on the documentation but sorting is not working on my side.

Here's my code:

import TablePagination from '@material-ui/core/TablePagination';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableFooter from '@material-ui/core/TableFooter'
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import TableSortLabel from '@material-ui/core/TableSortLabel';

function descendingComparator(a,b, orderBy) {
  console.log('a',a)
  console.log('b',b)
  console.log('orderBy',orderBy)
  if(b[orderBy] < a[orderBy]){
    console.log('-1')
    return -1;
  }
  if(b[orderBy] > a[orderBy]){
    console.log('1')
    return 1;
  }
  console.log('0')
  return 0;
}

function getComparator(order, orderBy){
  return order === "desc"
    ? (a,b) => descendingComparator(a,b, orderBy)
    : (a,b) => -descendingComparator(a,b, orderBy)
}

const sortedRowInformation = (rowArray, comparator) => {
  const stabilizedRowArray = rowArray.map((el, index) => [el, index])
  stabilizedRowArray.sort((a,b) =>{
    const order = comparator(a[0], b[0])
    if(order !==0) return order;
    return a[1] - b[1];
})
return stabilizedRowArray.map((el) => el[0])
}

function Test(){
  const [dummyDatas, setdummyDatas] = useState([])
  const getInformation= async () => {
    await axios.get('/API')
        .then(response => {
            setdummyDatas(response.dummyDatas)
        })
  }
}

useEffect(()=>{
  getInformation()
})

const [page, setPage] = useState(0)
const [rowsPerPage, setRowsPerPage] = useState(5)
const [pageIndex, setPageIndex] = useState(0)
const [order, setOrder] = useState()
const [orderBy, setorderBy] = useState()
const [orderDirection, setorderDirection] = useState("asc")
const [valueToOrderBy, setvalueToOrderBy] = useState("details")

return(
 <div>
   <TableContainer component={Paper}>
     <Table className={classes.table} aria-label="information table">
       <TableHead>
         <TableRow>
           <TableCell align = "left" key = "details">
             <TableSortLabel
                active={valueToOrderBy === "details"}
                direction={valueToOrderBy === "details" ? orderDirection: 'asc'}
                onClick={createSortHandle("details")}
             >
                Details
             </TableSortLabel>
           </TableCell>
           <TableCell align = "left" key = "status">
             <TableSortLabel
               active={valueToOrderBy === "status"}
               direction={valueToOrderBy === "status" ? orderDirection: 'asc'}
               onClick={createSortHandle("status")}
             >
               Status
             </TableSortLabel>
           </TableCell>
           <TableCell align = "left" key = "system">
             <TableSortLabel
               active={valueToOrderBy === "system"}
               direction={valueToOrderBy === "system" ? orderDirection: 'asc'}
               onClick={createSortHandle("system")}
             >
               System
             </TableSortLabel>
           </TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
         {
           sortedRowInformation(dummyDatas, getComparator(orderDirection, valueToOrderBy))
           .map((row, index1) => (
                        <TableRow key={index1}>
                            <TableCell>
                                        {row.ADVISORYTITLE}
                            </TableCell>
                            <TableCell>
                                        {row.STATUS}
                            </TableCell>
                            <TableCell>
                                        {row.SYSTEMID}
                            </TableCell>
                        </TableRow>
                    ))}
       </TableBody>
     </Table>
   </TableContainer>
 </div>
)

Upon clicking the sorting arrow on status column nothing happens. This is my console.log looks like.

Hoping that you could help me with this. Thank you so much in advance.

Answer 1

You have to make sure that you are using the same values for your column name and valueToOrderBy otherwise it will not be able to do the comparison.

Answer 2

Make you valueToOrderBy same as your data columns. (Eg. ADVISORYTITLE)