Material UI default table sort

Question

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

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 => (
    attendence.average
  ))



  // const classes = useStyles();
  return (
    <React.Fragment>
         <Paper >
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right"> Average </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.attendence.map(attendence => (
            <TableRow key={attendence.Name}>
              <TableCell component="th" scope="row">
                {attendence.Name}
              </TableCell>
              {attendence.Attendence.map(personAttendence => {
                  return (
                    <TableCell align="right">{personAttendence.attendence}</TableCell>
              )
            })}
               <TableCell align="right" >{attendence.average}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>           
        </React.Fragment>
  );
            }

Answer 1

This solution worked to me:

const [sortModel, setSortModel] = React.useState([
  {
    field: 'commodity',
    sort: 'asc',
  },
]);

<DataGrid
  {...data}
  sortModel={sortModel}
  onSortModelChange={(newSortModel) => {
    if (newSortModel.length !== sortModel.length) {
      setSortModel(newSortModel);
      return;
    }
    newSortModel.forEach((element, index) => {
      if (
        element.field !== sortModel[index].field ||
        element.sort !== sortModel[index].sort
      ) {
        setSortModel(newSortModel);
      }
    });
   }}
/>

Answer 2

As per the documentation on sorting,

A sorted column can be can pre-configured using the sortModel prop of the GridColDef interface:

In my case I have column name of email which needed to be sorted when table loads as seen here:

const [sortModel, setSortModel] = React.useState([
  {
    field: 'commodity',
    sort: 'asc',
  },
]);

<DataGrid
  {...data}
  sortModel={sortModel}
  onSortModelChange={(model) => setSortModel(model)}
/>

Note: if you supply a sortModel you must provide a setState bucket to update sort model state

Answer 3

UPDATE

Material UI now contains a DataGrid component, which adds sorting by default. Thanks to @John Vandivier for pointing that out.

ORIGINAL ANSWER

Yes! The simplest way to do this would just be to sort your data before feeding it to your component:

const data = [{ average: 3 }, {average: 8}, {average: 2}];
const sortedData = data.sort((a, b) => a.average - b.average);

Note that Material UI tables don't have anything built-in for sorting, as they don't store state for you. You can add in sorting utilizing provided components from Material UI. There is a good example in the docs on how to do this.

Hope that helps!