Cleaned up the L&F; Added table sorting; Cleaned up the table styling.

imports/ui/util/SimpleTable.jsx

@@ -5,15 +5,19 @@ import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
 import Paper from '@mui/material/Paper';
 import classNames from 'classnames';
 import Button from "@mui/material/Button";
+import { visuallyHidden } from '@mui/utils';
 import _ from 'lodash';
+import Box from "@mui/material/Box";
 
 // let columns = [
 // 	{
 // 		name: "ID",
-// 		value: (row) => row._id
+// 		value: (row) => row._id,
+//      descendingComparator: (a, b) => {return value(b) < value(a) ? 1 : value(b) > value(a) ? -1 : 0}
 // 	}
 // ]
 //
@@ -46,6 +50,8 @@ export default ({columns, rows, options}) => {
 	}
 
 	const [edited, setEdited] = useState(undefined);
+	const [order, setOrder] = useState('asc')  //'asc' or 'desc'
+	const [orderBy, setOrderBy] = useState(undefined);  //Column name being sorted.
 
 	let editRow = (e, row) => {
 		setEdited(row);
@@ -75,6 +81,42 @@ export default ({columns, rows, options}) => {
 		}
 	}
 	
+	const sort = (e, column) => {
+		const isAscending = orderBy === column && order === 'asc'  //Descending if this is the first click on the column or toggling from ascending.
+		setOrder(isAscending ? 'desc' : 'asc')
+		setOrderBy(column)
+	}
+
+	const descendingComparator = (a, b, orderBy) => {
+		let av = orderBy.value(a)
+		let bv = orderBy.value(b)
+		
+		if(bv < av) return -1
+		else if(bv > av) return 1
+		else return 0
+	}
+	const getComparator = (order, orderBy) => {
+		if(!orderBy) return undefined
+		else if(orderBy.descendingComparator) return order === 'desc' ? (a,b) => orderBy.descendingComparator(a,b) : (a,b) => -orderBy.descendingComparator(a,b)
+		else return order === 'desc'
+			? (a, b) => descendingComparator(a, b, orderBy)
+			: (a, b) => -descendingComparator(a, b, orderBy);
+	}
+	const stableSort = (array, comparator) => {
+		if(comparator) {
+			const stabilizedThis = array.map((el, index) => [el, index]);
+			stabilizedThis.sort((a, b) => {
+				const order = comparator(a[0], b[0]);
+				if (order !== 0) {
+					return order;
+				}
+				return a[1] - b[1];
+			});
+			return stabilizedThis.map((el) => el[0]);
+		}
+		else return array
+	}
+	// console.log(rows)
 	return (
 		<div className='simpleTableContainer'>
 			{options.add && <div style={cssTopControls}><Button variant="text" className="button" onClick={addRow}>Add</Button></div>}
@@ -83,11 +125,17 @@ export default ({columns, rows, options}) => {
 					<TableHead className="sticky">
 						<TableRow>
 							{columns.map((column, i) => {return (
-								<TableCell key={i} className="headerCell">{column.name}</TableCell>
+								<TableCell key={i} className="headerCell" sortDirection={orderBy === column ? order : false}>
+									<TableSortLabel active={orderBy === column} direction={orderBy === column ? order : 'asc'} onClick={(e) => {sort(e, column)}}>
+										{column.name}
+										{orderBy === column.name && (
+											<Box style={{color: 'white'}} component="span" sx={visuallyHidden}>
+												{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+											</Box>
+										)}
+									</TableSortLabel>
+								</TableCell>
 							)})}
-							{/*<TableCell className="headerCell">Name</TableCell>*/}
-							{/*<TableCell className="headerCell">Email</TableCell>*/}
-							{/*<TableCell className="headerCell">Roles</TableCell>*/}
 						</TableRow>
 					</TableHead>
 					<TableBody>
@@ -98,9 +146,7 @@ export default ({columns, rows, options}) => {
 								</TableCell>
 							</TableRow>
 						)}
-						{rows.map((row, i)=>{
-							// console.log("Rendering Row " + i)
-							// console.log(row);
+						{stableSort(rows, getComparator(order, orderBy)).map((row, i) => {
 							return (
 								<TableRow key={options.key(row)} className={classNames({tableRow: true, selected: (!edited || options.key(edited) !== options.key(row)) && selected && options.key(selected) === options.key(row)})} onDoubleClick={(e) => {editRow(e, row)}} onClick={(e) => selectRow(e, row)}>
 									{edited && options.key(edited) === options.key(row) ?
@@ -117,6 +163,8 @@ export default ({columns, rows, options}) => {
 												
 												if(_.isObject(value)) {
 													console.error("Cannot have an object returned as the value in a table.")
+													console.log("Cell value: ")
+													console.log(value)
 													value = JSON.stringify(value)
 												}