use table settings

src/core/components/DataTable/index.js

@@ -3,6 +3,7 @@ import DataTable_Main from "./Main";
 import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
 import CustomToolbar from "@/components/CustomToolbar";
 import useTableSetting from "@/lib/hooks/useTableSetting";
+import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
 
 const data = [
   {
@@ -55,24 +56,26 @@ const data = [
 const DataTable = (props) => {
   const { userId, pageName, tableName, columns, initialStateProps } = props
   const { settingStore, hideAction, sortAction } = useTableSetting();
+  const flatColumns = flattenArrayOfObjects(columns,'columns')
 
   const onColumnVisibilityChange = (event) => {
     const settingValue = event();
-    hideAction(userId, pageName, tableName, settingValue, columns);
+    hideAction(userId, pageName, tableName, settingValue, flatColumns);
   };
   const onSortingChange = (event) => {
     const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
-    sortAction(userId, pageName, tableName, settingValue, columns);
+    sortAction(userId, pageName, tableName, settingValue, flatColumns);
   }
 
+
   const table = useMaterialReactTable({
     localization: FA_DATATABLE_LOCALIZATION,
     columns,
     data: data,
-    manualSorting: true,
+    // manualSorting: true,
     renderTopToolbarCustomActions: ({ table }) => (<>
       <CustomToolbar
-        columns={columns}
+        columns={flatColumns}
       />
     </>),
     initialState: {
@@ -113,6 +116,7 @@ const DataTable = (props) => {
     ...props
   })
 
+
   return <DataTable_Main table={table} />;
 };