Styjun

I am using Table Component of Material UI in my React Project. I have multiple columns in that which includes the record added on that date. How can I sort my table based on the date when the record is added?
I am receiving UNIX Timestamp and converting it in mm/dd/yyyy format for readability.

I am using Materila -ui Table component :
https://material-ui.com/demos/tables/

I tried to pass an array of Dates to sort function but it did not work out as it is expecting the array with all the columns.

The expected behavior is that when I click on sort icon nearby date added column, it should sort the table based on date added either Ascending or Descending.

function desc(a, b, orderBy) 
 console.log(a.addedDate)
 if (b.addedDate < a.addedDate) 
 console.log(b.addedDate)
 return -1;
 
 if (b.addedDate > a.addedDate) 
 return 1;
 
 return 0;


 function stableSort(array, cmp) 
 const stabilizedThis = array.map((el, index) => [el, index]);
 stabilizedThis.sort((a, b) => 
 const order = cmp(a[0], b[0]);
 if (order !== 0) return order;
 return a[1] - b[1];
 );
 return stabilizedThis.map(el => el[0]);
 

 function getSorting(order, orderBy) 
 return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => 
 -desc(a, b, orderBy);
 

 const rows = [
 id: 'id', numeric: false, label: 'ID',
 id: 'lastname', numeric: true, label: 'lastname' ,
 id: 'firstname', numeric: true, label:'firstname' ,
 id: 'email', numeric: true, label: 'email',
 id: 'dateadded', numeric: true, label: 'dateadded' 
 ];


 class EnhancedTableHead extends React.Component 
 createSortHandler = property => event => 
 this.props.onRequestSort(event, property);
 ;

 render() 
 const onSelectAllClick, order, orderBy, numSelected, rowCount 
 = this.props;

 return (
 <TableHead>
 <TableRow>
 <TableCell padding="checkbox">
 <Checkbox
 indeterminate=numSelected > 0 && numSelected < rowCount
 checked=numSelected === rowCount
 onChange=onSelectAllClick
 />
 </TableCell>
 rows.map(
 row => (
 <TableCell
 key=row.id
 align=row.numeric ? 'right' : 'left'
 padding=row.disablePadding ? 'none' : 'default'
 sortDirection=orderBy === row.id ? order : false
 >
 <Tooltip
 title="Sort"
 placement=row.numeric ? 'bottom-end' : 'bottom-start'
 enterDelay=300
 >
 <TableSortLabel
 active=orderBy === row.id
 direction=order
 onClick=this.createSortHandler(row.id)
 >
 row.label
 </TableSortLabel>
 </Tooltip>
 </TableCell>
 ),
 this,
 )
 </TableRow>
 </TableHead>
 );
 
 

My Table Body looks like following:

 <TableBody>
 stableSort(data, getSorting(order, orderBy).slice(page* rowsPerPage, page * rowsPerPage + rowsPerPage)
 .map(n => 
 var convertedTimeStamp;
 var d = new Date(n.addedDate);
 convertedTimeStamp = d.toLocaleDateString();
 if (n.nuid.indexOf(this.state.filterText) === -1 ) 
 return;
 
 return (
 <TableRow
 hover

 tabIndex=-1
 key=n.id
 >
 <TableCell padding="checkbox">
 </TableCell>
 <TableCell component="th" scope="row" padding="none">
 n.id
 </TableCell>
 <TableCell align="left">n.lastName</TableCell>
 <TableCell align="left">n.firstName</TableCell>
 <TableCell align="left">n.email</TableCell>
 <TableCell align="right">convertedTimeStamp . 
 </TableCell>

 </TableRow>
 );
 )

 </TableBody>