User: added table header

src/components/User/UserTable.js

@@ -1,7 +1,17 @@
 import { TableContainer, Table } from "@material-ui/core";
+import { styled } from "@material-ui/styles";
 import { useState } from "react";
 import { rows } from "../../api/userApi";
 import TableToolbar from "./TableToolbar";
+import UserTableHead from "./UserTableHead";
+
+// style
+const TableStyle = styled(Table)(({ theme }) => ({
+  border: "1px solid",
+  minWidth: 500,
+
+  overflowX: "auto",
+}));
 
 const UserTable = () => {
   // states
@@ -73,7 +83,19 @@ const UserTable = () => {
 
       {/* Table */}
       <TableContainer>
-        <Table>Table</Table>
+        <TableStyle>
+          {/* Table Head */}
+          <UserTableHead
+            numSelected={selectedItems.length}
+            order={order}
+            orderBy={orderBy}
+            onSelectAllClick={handleSelectAllClick}
+            onRequestSort={handleRequestSort}
+            rowCount={rows.length}
+          />
+
+          {/* Table Body */}
+        </TableStyle>
       </TableContainer>
     </>
   );

src/components/User/UserTableHead.js

@@ -0,0 +1,102 @@
+import {
+  Checkbox,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+} from "@material-ui/core";
+import { Box } from "@mui/system";
+import { visuallyHidden } from "@mui/utils";
+
+const headCells = [
+  {
+    id: "name",
+    numeric: false,
+    disablePadding: true,
+    label: "Dessert (100g serving)",
+  },
+  {
+    id: "calories",
+    numeric: true,
+    disablePadding: false,
+    label: "Calories",
+  },
+  {
+    id: "fat",
+    numeric: true,
+    disablePadding: false,
+    label: "Fat (g)",
+  },
+  {
+    id: "carbs",
+    numeric: true,
+    disablePadding: false,
+    label: "Carbs (g)",
+  },
+  {
+    id: "protein",
+    numeric: true,
+    disablePadding: false,
+    label: "Protein (g)",
+  },
+];
+
+const UserTableHead = (props) => {
+  const {
+    onSelectAllClick,
+    order,
+    orderBy,
+    numSelected,
+    rowCount,
+    onRequestSort,
+  } = props;
+
+  // sort
+  const createSortHandler = (property) => (e) => onRequestSort(e, property);
+
+  return (
+    <TableHead>
+      <TableRow>
+        {/* ck box */}
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            inputProps={{
+              "aria-label": "select all users",
+            }}
+          />
+        </TableCell>
+
+        {/* rest of the cells */}
+        {headCells.map((cell) => (
+          <TableCell
+            key={cell.id}
+            align={cell.numeric ? "right" : "left"}
+            padding={cell.disablePadding ? "none" : "normal"}
+            sortDirection={orderBy === cell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === cell.id}
+              direction={orderBy === cell.id ? order : "asc"}
+              onClick={createSortHandler(cell.id)}
+            >
+              {cell.label}
+
+              {/* hidden box */}
+              {orderBy === cell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === "desc" ? "sorted descending" : "sorted ascending"}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+};
+
+export default UserTableHead;

src/pages/User.js

@@ -13,7 +13,7 @@ const User = () => {
       <Box
         sx={{
           width: "100%",
-          border: "1px solid",
+          //border: "1px solid",
           borderRadius: 2,
         }}
       >