start some change on sending data to local storage

src/core/components/DataTable/Main.js

@@ -6,6 +6,8 @@ import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
 import Toolbar from "@/components/home/Toolbar";
 import useDataTable from "@/lib/hooks/useDataTable";
 import {useMemo, useState} from "react";
+import {toast} from "react-toastify";
+import AskForKeepSort from "@/core/components/NotificationDesign/AskForKeepSort";
 
 const data = [
     {
@@ -76,11 +78,33 @@ const data = [
 ];
 
 const DataTable_Main = (props) => {
-    const {filterData} = useDataTable();
+    const {filterData, sortData, setSortData} = useDataTable();
     const {table_url, user_id, page_name, table_name, columns, initialStateProps} = props
     const flatColumns = flattenArrayOfObjects(columns, 'columns')
     const {settingStore, hideAction, sortAction} = useTableSetting();
     const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
+
+    const onColumnVisibilityChange = (event) => {
+        const settingValue = event();
+        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
+    };
+
+    const onSortingChange = (event) => {
+        toast.dismiss({containerId: "datatable", id: "sort"});
+        setSortData(event);
+        setTimeout(() => {
+            toast(<AskForKeepSort event={event} user_id={user_id} page_name={page_name} table_name={table_name}
+                                  columns={columns} flatColumns={flatColumns}/>, {
+                containerId: "datatable",
+                toastId: "sort",
+                className: "filter-toast",
+                position: "bottom-left",
+                draggable: true,
+                autoClose: false,
+            });
+        }, 1000);
+    }
+
     const filters = Object.keys(filterData)
         .map(key => {
             const value = filterData[key].value;
@@ -102,34 +126,19 @@ const DataTable_Main = (props) => {
         return `${table_url}?${params}`;
     }, [table_url, finalFilters, pagination, columns]);
 
-    const onColumnVisibilityChange = (event) => {
-        const settingValue = event();
-        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
-    };
-    const onSortingChange = (event) => {
-        const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
-        sortAction(user_id, page_name, table_name, settingValue, flatColumns);
-    }
-
     const table = useMaterialReactTable({
         localization: FA_DATATABLE_LOCALIZATION,
         columns,
         data: data,
-        // manualSorting: true,
-        renderTopToolbarCustomActions: ({table}) => (<>
-            <Toolbar
-                columns={flatColumns}
-            />
-        </>),
         initialState: {
             density: 'compact',
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
-            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
+            sorting: sortData,
             ...initialStateProps
         },
         state: {
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
-            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
+            sorting: sortData,
             pagination
         },
         muiTableHeadProps: {
@@ -157,10 +166,15 @@ const DataTable_Main = (props) => {
         },
         manualFiltering: true,
         manualPagination: true,
-        onPaginationChange: setPagination,
         manualSorting: true,
+        onPaginationChange: setPagination,
         onColumnVisibilityChange: onColumnVisibilityChange,
         onSortingChange: onSortingChange,
+        renderTopToolbarCustomActions: ({table}) => (<>
+            <Toolbar
+                columns={flatColumns}
+            />
+        </>),
         ...props
     })