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.