title: Material UI default table sort
body: <p>I have a material UI table that displays some data. I want to be able to sort the table according to average from lowest to highest. Is there a way to do so by default? as in when the table loads in the browser. that's my table and some data. I want the average column to show be sorted from lowest to highest. So the person with the lowest average up top</p>
  
  <pre><code>const data = [
      {
        Name: "A Person",
        Attendence: [
          {
            date: "2019/12/01",
            attendence: 1
          },
          {
            date: "2019/12/02",
            attendence: 1
          },
          {
            date: "2019/12/03",
            attendence: 0
          },
          {
              date: "2019/12/04",
              attendence: 0
            },
            {
              date: "2019/12/05",
              attendence: 0.25
            },
            {
              date: "2019/12/06",
              attendence: 0.75
            },
            {
              date: "2019/12/07",
              attendence: 0.25
            },
            {
              date: "2019/12/08",
              attendence: 0.25
            },
            {
              date: "2019/12/09",
              attendence: 0
            },
            {
              date: "2019/12/10",
              attendence: 0
            },
  
        ],
  ]
  
  
  
  
  
  
  
  
  function Register(props) {
    const classes = useStyles();
  
  
    const data = props.attendence.map(attendence =&gt; (
      attendence.average
    ))
  
  
  
    // const classes = useStyles();
    return (
      &lt;React.Fragment&gt;
           &lt;Paper &gt;
        &lt;Table aria-label="simple table"&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Name&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Date&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt; Average &lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {props.attendence.map(attendence =&gt; (
              &lt;TableRow key={attendence.Name}&gt;
                &lt;TableCell component="th" scope="row"&gt;
                  {attendence.Name}
                &lt;/TableCell&gt;
                {attendence.Attendence.map(personAttendence =&gt; {
                    return (
                      &lt;TableCell align="right"&gt;{personAttendence.attendence}&lt;/TableCell&gt;
                )
              })}
                 &lt;TableCell align="right" &gt;{attendence.average}&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/Paper&gt;           
          &lt;/React.Fragment&gt;
    );
              }
  </code></pre>