Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

168
Views
Sorting the table header in React

I am trying to sort a table alphabetically but am unable to do so. Sorting currently is giving me unexpected results. I have added the javascript logic and also the react syntax. Currently, the logic is not working. I have tried debugging but unable to do so until now.

 <TableContainer component={Paper}>
     {merchantList.length === 0 ? (
        <div className={styles.merchantListNone}>No merchants yet under this reseller.</div>
        ) : (
         <Table aria-label="simple table" aria-labelledby="tableTitle" size="small" stickyHeader>
           <TableHeader classes={classes} {...props} />
             <TableBody>
              {stableSortNew(merchantList, getComparator(order, orderBy)).map((merchant) => (
                <TableRow key={merchant.id}>
                 <TableCell className={styles.merchantName}>{merchant.name}</TableCell>
                 <TableCell>{MerchantStatusNames[merchant.status]}</TableCell>
                 <TableCell>{merchant.id}</TableCell>
                 <TableCell>{merchant.acquirerBank}</TableCell>
                 <TableCell>{merchant.resellerToOmniPayBill}</TableCell>
                 <TableCell>{merchant.merchantToOmniPatBill}</TableCell>
                </TableRow>
                 ))}
              </TableBody>
             <TableFooter>
             <TableRow>
              {count > 20 && (
              <TablePagination
               rowsPerPageOptions={[20, 50, 100]}
               count={count}
               rowsPerPage={rowsPerPage}
               page={page}
               SelectProps={{
               inputProps: { 'aria-label': 'rows per page' },
               native: true
               }}
               onChangePage={handleChangePage}
               onChangeRowsPerPage={handleChangeRowsPerPage}
               />
               )}
               </TableRow>
              </TableFooter>
             </Table>
               )}
              <LoadingScreen open={pageLoading} />
              </TableContainer>
export const stableSortNew = (array, comparator) => {
    console.log(array[1].name);
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((tranx, tranxToCompare) => {
        const order = comparator(tranx[0], tranxToCompare[0]);
        if (order !== 0) return order;
        return tranx[1] - tranxToCompare[1];
    });
    return stabilizedThis.map((el) => el[0]);
};
export const getComparator = (order, orderBy) => {
    return order === 'desc'
        ? (tranx, tranxToCompare) => descendingComparator(tranx, tranxToCompare, orderBy)
        : (tranx, tranxToCompare) => -descendingComparator(tranx, tranxToCompare, orderBy);
};

merchanList gives the API information as array of objects.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!