React Material-UI Cookbook

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 '@material-ui/core/TableCell';import TableHead from '@material-ui/core/TableHead';import TableRow from '@material-ui/core/TableRow';import TableSortLabel from '@material-ui/core/TableSortLabel';import Paper from '@material-ui/core/Paper';const comparator = (prop, desc = true) => (a, b) ...