ID field: prevent sort and filter #234

www/src/components/Table/ColumnHeader.tsx

@@ -14,7 +14,7 @@ import {
 import SortDescIcon from "@material-ui/icons/ArrowDownward";
 import DropdownIcon from "@material-ui/icons/ArrowDropDownCircle";
 
-import { getFieldIcon } from "constants/fields";
+import { getFieldIcon, FieldType } from "constants/fields";
 import { useFiretableContext } from "contexts/firetableContext";
 import { FiretableOrderBy } from "hooks/useFiretable";
 
@@ -179,24 +179,26 @@ const ColumnHeader: Column<any>["headerRenderer"] = ({ column }) => {
         </Tooltip>
       </Grid>
 
-      <Grid
-        item
-        className={clsx(
-          classes.sortIconContainer,
-          isSorted && classes.sortIconContainerSorted
-        )}
-      >
-        <IconButton
-          disableFocusRipple={true}
-          size="small"
-          onClick={handleSortClick}
-          color="inherit"
-          aria-label={`Sort by ${isAsc ? "descending" : "ascending"}`}
-          className={clsx(classes.sortIcon, isAsc && classes.sortIconAsc)}
+      {(column as any).type !== FieldType.id && (
+        <Grid
+          item
+          className={clsx(
+            classes.sortIconContainer,
+            isSorted && classes.sortIconContainerSorted
+          )}
         >
-          <SortDescIcon />
-        </IconButton>
-      </Grid>
+          <IconButton
+            disableFocusRipple={true}
+            size="small"
+            onClick={handleSortClick}
+            color="inherit"
+            aria-label={`Sort by ${isAsc ? "descending" : "ascending"}`}
+            className={clsx(classes.sortIcon, isAsc && classes.sortIconAsc)}
+          >
+            <SortDescIcon />
+          </IconButton>
+        </Grid>
+      )}
 
       {userClaims?.roles?.includes("ADMIN") && (
         <Grid item>

www/src/components/Table/ColumnMenu/MenuContents.tsx

@@ -67,6 +67,7 @@ export interface IMenuContentsProps {
     onClick?: () => void;
     active?: boolean;
     color?: "error";
+    disabled?: boolean;
   }[];
 }
 
@@ -105,6 +106,7 @@ export default function MenuContents({ menuItems }: IMenuContentsProps) {
                 item.active && classes.menuItemActive,
                 item.color === "error" && classes.menuItemError
               )}
+              disabled={item.disabled}
             >
               <ListItemIcon className={classes.menuItemIcon}>
                 {icon}

www/src/components/Table/ColumnMenu/NewColumn.tsx

@@ -63,7 +63,10 @@ export default function FormDialog({
   }, [columnLabel]);
 
   useEffect(() => {
-    if (type === FieldType.id) setFieldKey("id");
+    if (type === FieldType.id) {
+      setColumnLabel("ID");
+      setFieldKey("id");
+    }
   }, [type]);
 
   return (

www/src/components/Table/ColumnMenu/index.tsx

@@ -11,7 +11,7 @@ import CellResizeIcon from "assets/icons/CellResize";
 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
 import EditIcon from "@material-ui/icons/Edit";
-import ReorderIcon from "@material-ui/icons/Reorder";
+// import ReorderIcon from "@material-ui/icons/Reorder";
 import SettingsIcon from "@material-ui/icons/Settings";
 import ColumnPlusBeforeIcon from "assets/icons/ColumnPlusBefore";
 import ColumnPlusAfterIcon from "assets/icons/ColumnPlusAfter";
@@ -158,6 +158,7 @@ export default function ColumnMenu() {
         handleClose();
       },
       active: isSorted && !isAsc,
+      disabled: column.type === FieldType.id,
     },
     {
       label: "Sort: Increasing",
@@ -170,6 +171,7 @@ export default function ColumnMenu() {
         handleClose();
       },
       active: isSorted && isAsc,
+      disabled: column.type === FieldType.id,
     },
     { type: "subheader", label: "Edit" },
     {
@@ -181,7 +183,7 @@ export default function ColumnMenu() {
     },
     {
       label: `Edit Type: ${column?.type}`,
-      // TODO: This is based off the cell type
+      // This is based off the cell type
       icon: _find(FIELDS, { type: column.type })?.icon,
       onClick: () => {
         setModal({ type: ModalStates.typeChange, data: { column } });
@@ -189,7 +191,7 @@ export default function ColumnMenu() {
     },
     {
       label: `Column Settings`,
-      // TODO: This is based off the cell type
+      // This is based off the cell type
       icon: <SettingsIcon />,
       onClick: () => {
         setModal({ type: ModalStates.settings, data: { column } });