worked on saving table sorts

src/components/Table/ColumnHeader/ColumnHeader.tsx

@@ -233,6 +233,7 @@ export const ColumnHeader = memo(function ColumnHeader({
           sortKey={sortKey}
           currentSort={currentSort}
           tabIndex={focusInsideCell ? 0 : -1}
+          canEditColumns={canEditColumns}
         />
       )}
 

src/components/Table/ColumnHeader/ColumnHeaderSort.tsx

@@ -9,6 +9,7 @@ import IconSlash, {
 } from "@src/components/IconSlash";
 
 import { tableScope, tableSortsAtom } from "@src/atoms/tableScope";
+import useSaveTableSortBy from "./useSaveTableSorts";
 
 export const SORT_STATES = ["none", "desc", "asc"] as const;
 
@@ -16,6 +17,7 @@ export interface IColumnHeaderSortProps {
   sortKey: string;
   currentSort: typeof SORT_STATES[number];
   tabIndex?: number;
+  canEditColumns: boolean;
 }
 
 /**
@@ -26,15 +28,21 @@ export const ColumnHeaderSort = memo(function ColumnHeaderSort({
   sortKey,
   currentSort,
   tabIndex,
+  canEditColumns,
 }: IColumnHeaderSortProps) {
   const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
 
   const nextSort =
     SORT_STATES[SORT_STATES.indexOf(currentSort) + 1] ?? SORT_STATES[0];
 
+  const trigger = useSaveTableSortBy(canEditColumns);
+
   const handleSortClick = () => {
     if (nextSort === "none") setTableSorts([]);
     else setTableSorts([{ key: sortKey, direction: nextSort }]);
+    trigger([
+      { key: sortKey, direction: nextSort === "none" ? "asc" : nextSort },
+    ]);
   };
 
   return (

src/components/Table/ColumnHeader/useSaveTableSorts.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useState } from "react";
+import { useAtom } from "jotai";
+import { SnackbarKey, useSnackbar } from "notistack";
+
+import LoadingButton from "@mui/lab/LoadingButton";
+import CheckIcon from "@mui/icons-material/Check";
+
+import CircularProgressOptical from "@src/components/CircularProgressOptical";
+import { tableScope, updateTableSchemaAtom } from "@src/atoms/tableScope";
+import { TableSort } from "@src/types/table";
+
+function useSaveTableSortBy(canEditColumns: boolean) {
+  const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
+  if (!updateTableSchema) throw new Error("Cannot update table schema");
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  const [snackbarId, setSnackbarId] = useState<SnackbarKey | null>(null);
+
+  // Offer to save when table sort by changes
+  const trigger = useCallback(
+    (sorts: TableSort[]) => {
+      if (!canEditColumns) return;
+      console.log(snackbarId);
+      if (snackbarId) {
+        closeSnackbar(snackbarId);
+      }
+      setSnackbarId(
+        enqueueSnackbar("Apply this sorting for all users?", {
+          action: (
+            <SaveTableSortButton
+              updateTable={async () =>
+                await updateTableSchema({ sorts: sorts })
+              }
+            />
+          ),
+          anchorOrigin: { horizontal: "center", vertical: "top" },
+        })
+      );
+
+      return () => (snackbarId ? closeSnackbar(snackbarId) : null);
+    },
+    [
+      snackbarId,
+      canEditColumns,
+      enqueueSnackbar,
+      closeSnackbar,
+      updateTableSchema,
+    ]
+  );
+
+  return trigger;
+}
+
+function SaveTableSortButton({ updateTable }: { updateTable: Function }) {
+  const [state, setState] = useState<"" | "loading" | "success" | "error">("");
+
+  const handleSaveToSchema = async () => {
+    setState("loading");
+    try {
+      await updateTable();
+      setState("success");
+    } catch (e) {
+      setState("error");
+    }
+  };
+
+  return (
+    <LoadingButton
+      variant="contained"
+      color="primary"
+      onClick={handleSaveToSchema}
+      loading={Boolean(state)}
+      loadingIndicator={
+        state === "success" ? (
+          <CheckIcon color="primary" />
+        ) : (
+          <CircularProgressOptical size={20} color="primary" />
+        )
+      }
+    >
+      Save
+    </LoadingButton>
+  );
+}
+
+export default useSaveTableSortBy;

src/components/TableToolbar/Filters/Filters.tsx

@@ -112,7 +112,9 @@ export default function Filters() {
 
     setLocalFilters(filtersToApply);
     // Reset order so we don’t have to make a new index
-    setTableSorts([]);
+    if (filtersToApply.length) {
+      setTableSorts([]);
+    }
   }, [
     hasTableFilters,
     hasUserFilters,

src/pages/Table/TablePage.tsx

@@ -1,5 +1,5 @@
-import { Suspense, lazy } from "react";
-import { useAtom } from "jotai";
+import { Suspense, lazy, useEffect, useState } from "react";
+import { useAtom, useSetAtom } from "jotai";
 import { ErrorBoundary } from "react-error-boundary";
 import { isEmpty, intersection } from "lodash-es";
 
@@ -33,6 +33,7 @@ import {
   tableSchemaAtom,
   columnModalAtom,
   tableModalAtom,
+  tableSortsAtom,
 } from "@src/atoms/tableScope";
 import useBeforeUnload from "@src/hooks/useBeforeUnload";
 import ActionParamsProvider from "@src/components/fields/Action/FormDialog/Provider";
@@ -77,6 +78,7 @@ export default function TablePage({
   const [tableId] = useAtom(tableIdAtom, tableScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+  const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
   const snackLogContext = useSnackLogContext();
 
   // Set permissions here so we can pass them to the `Table` component, which
@@ -96,6 +98,15 @@ export default function TablePage({
   useBeforeUnload(columnModalAtom, tableScope);
   useBeforeUnload(tableModalAtom, tableScope);
 
+  // Initially set the TableSorts values from table schema
+  const [setSort, setSetSort] = useState(true);
+  useEffect(() => {
+    if (setSort && Object.keys(tableSchema).length) {
+      setTableSorts(tableSchema.sorts || []);
+      setSetSort(false);
+    }
+  }, [tableSchema, setSort, setTableSorts, setSetSort]);
+
   if (!(tableSchema as any)._rowy_ref)
     return (
       <>

src/types/table.d.ts

@@ -101,6 +101,7 @@ export type TableSchema = {
   rowHeight?: number;
   filters?: TableFilter[];
   filtersOverridable?: boolean;
+  sorts?: TableSort[];
 
   functionConfigPath?: string;
   functionBuilderRef?: any;