title: React Material UI Table Sort
body: <p>So I have it so that the Name column is sorted by default (ASC) - and I just need to work out the onclick so it changes this sort order when clicked.</p>
  <pre><code>function descendingComparator(a,b, orderBy) {
      console.log('a',a)
      console.log('b',b)
      console.log('orderBy',orderBy)
      if(b[orderBy] &lt; a[orderBy]){
        console.log('-1')
        return -1;
      }
      if(b[orderBy] &gt; a[orderBy]){
        console.log('1')
        return 1;
      }
      console.log('0')
      return 0;
    }
    
    function getComparator(order, orderBy){
      return order === &quot;desc&quot;
        ? (a,b) =&gt; descendingComparator(a,b, orderBy)
        : (a,b) =&gt; -descendingComparator(a,b, orderBy)
    }
    
    const sortedRowInformation = (rowArray, comparator) =&gt; {
      const stabilizedRowArray = rowArray.map((el, index) =&gt; [el, index])
      stabilizedRowArray.sort((a,b) =&gt;{
        const order = comparator(a[0], b[0])
        if(order !==0) return order;
        return a[1] - b[1];
    })
    return stabilizedRowArray.map((el) =&gt; el[0])
    }
    const [page, setPage] = useState(0)
    const [rowsPerPage, setRowsPerPage] = useState(5)
    const [pageIndex, setPageIndex] = useState(0)
    const [order, setOrder] = useState()
    const [orderBy, setorderBy] = useState()
    const [orderDirection, setorderDirection] = useState(&quot;asc&quot;)
    const [valueToOrderBy, setvalueToOrderBy] = useState(&quot;Name&quot;)
  </code></pre>
  <p>And my Table:</p>
  <pre><code>&lt;TableCell align = &quot;left&quot; key = &quot;system&quot;&gt;
               &lt;TableSortLabel
                 active={valueToOrderBy === &quot;Name&quot;}
                 direction={valueToOrderBy === &quot;Name&quot; ? orderDirection: 'asc'}
                 onClick={createSortHandle(&quot;Name&quot;)}
               &gt;
                 NAME
               &lt;/TableSortLabel&gt;
             &lt;/TableCell&gt;
  &lt;TableBody&gt;
        {
             sortedRowInformation(listItemFood, getComparator(orderDirection, valueToOrderBy))
             .map((item, index1) =&gt; (
            &lt;TableRow hover key={item.id} id={item.id}&gt;
            &lt;TableCell&gt;{item.Category}&lt;/TableCell&gt;
            &lt;TableCell&gt;&lt;a href=&quot;#updateItem&quot; onClick={() =&gt; editItem(item)}&gt;{item.Name}&lt;/a&gt;&lt;/TableCell&gt;
            &lt;TableCell&gt;{item.Weight}&lt;/TableCell&gt;
            &lt;TableCell&gt;
            &lt;IconButton size=&quot;small&quot; aria-label=&quot;edit&quot; onClick={() =&gt; editItem(item)}&gt;&lt;a href=&quot;#updateItem&quot;&gt;&lt;EditOutlinedIcon /&gt;&lt;/a&gt;&lt;/IconButton&gt;&lt;IconButton size=&quot;small&quot; aria-label=&quot;delete&quot; onClick={() =&gt; deleteItem(item.id)}&gt;&lt;DeleteIcon /&gt;&lt;/IconButton&gt;
            &lt;/TableCell&gt;
            &lt;/TableRow&gt;
        ))}
        &lt;/TableBody&gt;
  </code></pre>
  <p>What is the function I need to attach to onClick={createSortHandle(&quot;Name&quot;)} in order for it to change direction when clicked?</p>