title: How can i sort the table by "DateAdded" in Material UI Table Component for React Js?
body: <p>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.</p>
  
  <p>I am using Materila -ui Table component :
  <a href="https://material-ui.com/demos/tables/" rel="noreferrer">https://material-ui.com/demos/tables/</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>function desc(a, b, orderBy) {
    console.log(a.addedDate)
    if (b.addedDate &lt; a.addedDate) {
      console.log(b.addedDate)
      return -1;
    }
    if (b.addedDate &gt; a.addedDate) {
      return 1;
    }
    return 0;
  }
  
      function stableSort(array, cmp) {
        const stabilizedThis = array.map((el, index) =&gt; [el, index]);
        stabilizedThis.sort((a, b) =&gt; {
          const order = cmp(a[0], b[0]);
          if (order !== 0) return order;
          return a[1] - b[1];
        });
        return stabilizedThis.map(el =&gt; el[0]);
      }
  
      function getSorting(order, orderBy) {
        return order === 'desc' ? (a, b) =&gt; desc(a, b, orderBy) : (a, b) =&gt; 
      -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 =&gt; event =&gt; {
          this.props.onRequestSort(event, property);
        };
  
        render() {
          const { onSelectAllClick, order, orderBy, numSelected, rowCount } 
      = this.props;
  
      return (
        &lt;TableHead&gt;
          &lt;TableRow&gt;
            &lt;TableCell padding="checkbox"&gt;
              &lt;Checkbox
                indeterminate={numSelected &gt; 0 &amp;&amp; numSelected &lt; rowCount}
                checked={numSelected === rowCount}
                onChange={onSelectAllClick}
              /&gt;
            &lt;/TableCell&gt;
            {rows.map(
              row =&gt; (
                &lt;TableCell
                  key={row.id}
                  align={row.numeric ? 'right' : 'left'}
                  padding={row.disablePadding ? 'none' : 'default'}
                  sortDirection={orderBy === row.id ? order : false}
                &gt;
                  &lt;Tooltip
                    title="Sort"
                    placement={row.numeric ? 'bottom-end' : 'bottom-start'}
                    enterDelay={300}
                  &gt;
                    &lt;TableSortLabel
                      active={orderBy === row.id}
                      direction={order}
                      onClick={this.createSortHandler(row.id)}
                    &gt;
                      {row.label}
                    &lt;/TableSortLabel&gt;
                  &lt;/Tooltip&gt;
                &lt;/TableCell&gt;
              ),
              this,
            )}
          &lt;/TableRow&gt;
        &lt;/TableHead&gt;
      );
        }
      }
  
  My Table Body looks like following:
  
       &lt;TableBody&gt;
                    {stableSort(data, getSorting(order, orderBy).slice(page* rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map(n =&gt; {
                    var convertedTimeStamp;
                    var d = new Date(n.addedDate);
                    convertedTimeStamp = d.toLocaleDateString();
                    if (n.nuid.indexOf(this.state.filterText) === -1 ) {
                      return;
        }
                    return (
                      &lt;TableRow
                        hover
  
                        tabIndex={-1}
                        key={n.id}
                      &gt;
                        &lt;TableCell padding="checkbox"&gt;
                        &lt;/TableCell&gt;
                        &lt;TableCell component="th" scope="row" padding="none"&gt;
                            {n.id}
                        &lt;/TableCell&gt;
                        &lt;TableCell align="left"&gt;{n.lastName}&lt;/TableCell&gt;
                        &lt;TableCell align="left"&gt;{n.firstName}&lt;/TableCell&gt;
                        &lt;TableCell align="left"&gt;{n.email}&lt;/TableCell&gt;
                        &lt;TableCell align="right"&gt;{convertedTimeStamp} . 
     &lt;/TableCell&gt;
  
                          &lt;/TableRow&gt;
                        );
                      })}
  
              &lt;/TableBody&gt;
  </code></pre>