Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

174
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda