Estoy tratando de ordenar una tabla alfabéticamente pero no puedo hacerlo. Ordenar actualmente me está dando resultados inesperados. He agregado la lógica de javascript y también la sintaxis de reacción. Actualmente, la lógica no funciona. He intentado depurar pero no he podido hacerlo hasta ahora.

 <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 proporciona la información de la API como una matriz de objetos.