complete hide action part with button for hide or show all table header

src/core/components/DataTable/Main.js

@@ -6,13 +6,15 @@ import useDataTable from "@/lib/hooks/useDataTable";
 import { useMemo, useState } from "react";
 import useRequest from "@/lib/hooks/useRequest";
 import useSWR from "swr";
+import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
 
 const DataTable_Main = (props) => {
     const request = useRequest();
-    const { filterData, sortData, setSortData, hideData, setHideData } = useDataTable();
+    const { filterData, sortData, setSortData, hideData } = useDataTable();
     const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+    const flattenHideData = flattenObjectOfObjects(hideData);
     const onSortingChange = (event) => {
         setSortData(event);
     };
@@ -58,13 +60,13 @@ const DataTable_Main = (props) => {
         data: data?.data ?? [],
         initialState: {
             density: "compact",
-            columnVisibility: hideData,
+            columnVisibility: flattenHideData,
             sorting: sortData,
             ...initialStateProps,
         },
         state: {
             showProgressBars: isValidating,
-            columnVisibility: hideData,
+            columnVisibility: flattenHideData,
             sorting: sortData,
             pagination,
         },