Implemeted column sorting for ItemTable

ECN · Oct 14, 2020 · 36896ff · 36896ff
1 parent 9d9c395
commit 36896ff
Showing 1 changed file with 38 additions and 8 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,16 +1,31 @@
 import React, { useState, useEffect } from "react";
-import { useTable, useFilters, useFlexLayout } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core";
+import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
+import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid } from "@material-ui/core";
 import ItemTableFilter from "../ItemTableFilter/"
 
 export default function ItemTable() {
 
+    const useStyles = makeStyles({
+        // Fully visible for active icons
+        activeSortIcon: {
+            opacity: 1,
+        },
+        // Half visible for inactive icons
+        inactiveSortIcon: {
+            opacity: 0.2,
+        },
+    });
+
+    const classes = useStyles();
+
+
+
     const [data, setData] = useState([]);
     useEffect(() => {
         fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => {
             setData(queue.items)
         })
-    }, [])
+    }, []);
 
     const columns = React.useMemo(
         () => [
@@ -47,19 +62,34 @@ export default function ItemTable() {
             }
         },
         useFilters,
-        useFlexLayout
+        useFlexLayout,
+        useSortBy
     );
 
     return (
         <TableContainer component={Paper}>
-            <Table {...getTableProps} aria-label="simple table">
+            <Table stickyHeader {...getTableProps} aria-label="simple table" >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
-                                <TableCell {...column.getHeaderProps()}>
-                                    {column.render("Filter")}
-                                </TableCell>
+                                <Grid container spacing={1}>
+                                    <TableCell {...column.getHeaderProps()}>
+                                        <Grid container spacing={0}>
+                                            <Grid item sm={11} >
+                                                {column.render("Filter")}
+                                            </Grid>
+                                            <Grid item sm={1} alignItems='center' justify='center'>
+                                                <TableSortLabel {...column.getHeaderProps(column.getSortByToggleProps())}
+                                                    active={column.isSorted ? true : false}
+                                                    classes={{ icon: (column.isSorted ? classes.activeSortIcon : classes.inactiveSortIcon) }}
+                                                    direction={column.isSorted ? column.isSortedDesc ? 'desc' : 'asc' : 'asc'}
+                                                >
+                                                </TableSortLabel>
+                                            </Grid>
+                                        </Grid>
+                                    </TableCell>
+                                </Grid>
                             ))}
                         </TableRow>
                     ))}