Sortable columns

Material-UI tables have tools that help you implement sortable columns. If you're rendering a Table component in your application, your users will likely expect to be able to sort the table data by column.

How to do it...

When the users clicks on a column header, there should be a visual indication that table rows are now sorted by this column and the row order should change. When clicked on again, the column should appear in reverse order. Here's the code:

import React, { useState } from 'react';

import { makeStyles } from '@material-ui/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from...