allow custom sorting per column type

src/components/Table/ColumnHeader.tsx

@@ -112,7 +112,6 @@ export default function DraggableHeaderRenderer<R>({
   onColumnsReorder: (sourceKey: string, targetKey: string) => void;
 }) {
   const classes = useStyles();
-
   const { userClaims } = useAppContext();
   const { tableState, tableActions, columnMenuRef } = useProjectContext();
   const [{ isDragging }, drag] = useDrag({
@@ -149,16 +148,18 @@ export default function DraggableHeaderRenderer<R>({
       anchorEl: buttonRef.current,
     });
   };
+  const _sortKey = getFieldProp("sortKey", (column as any).type);
+  const sortKey = _sortKey ? `${column.key}.${_sortKey}` : column.key;
 
-  const isSorted = orderBy?.[0]?.key === column.key;
+  const isSorted = orderBy?.[0]?.key === sortKey;
   const isAsc = isSorted && orderBy?.[0]?.direction === "asc";
   const isDesc = isSorted && orderBy?.[0]?.direction === "desc";
 
   const handleSortClick = () => {
     let ordering: TableOrder = [];
 
-    if (!isSorted) ordering = [{ key: column.key, direction: "desc" }];
-    else if (isDesc) ordering = [{ key: column.key, direction: "asc" }];
+    if (!isSorted) ordering = [{ key: sortKey, direction: "desc" }];
+    else if (isDesc) ordering = [{ key: sortKey, direction: "asc" }];
     else ordering = [];
 
     tableActions.table.orderBy(ordering);

src/components/Table/ColumnMenu/index.tsx

@@ -114,8 +114,9 @@ export default function ColumnMenu() {
   );
 
   if (!column) return null;
-
-  const isSorted = orderBy?.[0]?.key === column.key;
+  const _sortKey = getFieldProp("sortKey", (column as any).type);
+  const sortKey = _sortKey ? `${column.key}.${_sortKey}` : column.key;
+  const isSorted = orderBy?.[0]?.key === sortKey;
   const isAsc = isSorted && orderBy?.[0]?.direction === "asc";
 
   const clearModal = () => {
@@ -172,7 +173,7 @@ export default function ColumnMenu() {
       icon: <ArrowDownwardIcon />,
       onClick: () => {
         tableActions.table.orderBy(
-          isSorted && !isAsc ? [] : [{ key: column.key, direction: "desc" }]
+          isSorted && !isAsc ? [] : [{ key: sortKey, direction: "desc" }]
         );
         handleClose();
       },
@@ -185,7 +186,7 @@ export default function ColumnMenu() {
       icon: <ArrowUpwardIcon />,
       onClick: () => {
         tableActions.table.orderBy(
-          isSorted && isAsc ? [] : [{ key: column.key, direction: "asc" }]
+          isSorted && isAsc ? [] : [{ key: sortKey, direction: "asc" }]
         );
         handleClose();
       },

src/components/fields/Action/Settings.tsx

@@ -3,10 +3,6 @@ import _get from "lodash/get";
 import stringify from "json-stable-stringify-without-jsonify";
 
 import {
-  Stepper,
-  Step,
-  StepButton,
-  StepContent,
   Stack,
   Grid,
   TextField,
@@ -22,7 +18,6 @@ import {
   FormHelperText,
   Fab,
 } from "@mui/material";
-import ExpandIcon from "@mui/icons-material/KeyboardArrowDown";
 import RunIcon from "@mui/icons-material/PlayArrow";
 import RedoIcon from "@mui/icons-material/Refresh";
 import UndoIcon from "@mui/icons-material/Undo";
@@ -66,17 +61,6 @@ const Settings = ({ config, onChange }) => {
   const [codeValid, setCodeValid] = useState(true);
 
   const scriptExtraLibs = [
-    [
-      "declare class ref {",
-      "    /**",
-      "     * Reference object of the row running the action script",
-      "     */",
-      "static id:string",
-      "static path:string",
-      "static parentId:string",
-      "static tablePath:string",
-      "}",
-    ].join("\n"),
     [
       "declare class actionParams {",
       "    /**",

src/components/fields/Action/index.tsx

@@ -30,5 +30,6 @@ export const config: IFieldConfig = {
   SideDrawerField,
   settings: Settings,
   requireConfiguration: true,
+  sortKey: "status",
 };
 export default config;

src/components/fields/types.ts

@@ -28,6 +28,7 @@ export interface IFieldConfig {
     defaultValue?: any;
     valueFormatter?: (value: any) => string;
   };
+  sortKey?: string;
   csvExportFormatter?: (value: any, config?: any) => string;
   csvImportParser?: (value: string, config?: any) => any;
 }