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} />;
 };
 

src/core/utils/flattenArrayOfObjects.js

@@ -0,0 +1,10 @@
+export const flattenArrayOfObjects = (array, key) => {
+    return array.reduce((acc, obj) => {
+        if (Array.isArray(obj[key])) {
+            acc.push(...flattenArrayOfObjects(obj[key]));
+        } else {
+            acc.push(obj);
+        }
+        return acc;
+    }, []);
+};

src/lib/contexts/tableSetting.jsx

@@ -1,11 +1,11 @@
 'use client'
 import {createContext, useCallback, useEffect, useState} from "react";
+import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
 
 export const TableSettingContext = createContext();
 export const TableSettingProvider = ({children}) => {
     const [settingStore, setSettingStore] = useState({});
 
-
     useEffect(() => {
         const _localStorage = localStorage.getItem("_setting-app")
         if (_localStorage) {
@@ -64,18 +64,19 @@ export const TableSettingProvider = ({children}) => {
             const _list = []
             for (const sort of values.sorts) {
                 const _column = columns.find(column => column.id == sort.id)
-                _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`)
+                if (_column)
+                    _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`)
             }
             if (_list.length > 0)
                 SortText = " مرتب شده بر اساس : " + _list.join(", ")
         }
-        if (values.filters && values.filters.length > 0){
+        if (values.filters && values.filters.length > 0) {
             const _list = []
-            for (const filter of values.filters){
+            for (const filter of values.filters) {
                 const _column = columns.find(column => column.id == filter.id)
-                _list.push(`${_column.header}`)
+                if (_column)
+                    _list.push(`${_column.header}`)
             }
-            console.log(_list)
             if (_list.length > 0)
                 FilterText = " فیلتر شده بر اساس : " + _list.join(", ")
         }
@@ -87,7 +88,8 @@ export const TableSettingProvider = ({children}) => {
                 for (const hide of hidesArray) {
                     if (hide.value) continue
                     const _column = columns.find(c => c.id == hide.id)
-                    _list.push(_column.header)
+                    if (_column)
+                        _list.push(_column.header)
                 }
                 if (_list.length > 0)
                     HideText = "ستون های مخفی شده : " + _list.join(", ");
@@ -100,7 +102,7 @@ export const TableSettingProvider = ({children}) => {
                 if (HideText) {
                     SummaryText += " ; ";
                 }
-                if (FilterText){
+                if (FilterText) {
                     SummaryText += " ; ";
                 }
             }
@@ -110,7 +112,7 @@ export const TableSettingProvider = ({children}) => {
                     SummaryText += " ; ";
                 }
             }
-            if (FilterText){
+            if (FilterText) {
                 SummaryText += FilterText
             }
         }