complete datatable getting data with swr

src/core/components/DataTable/Main.js

@@ -3,81 +3,16 @@ import { useMaterialReactTable } from "material-react-table";
 import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
-import Toolbar from "@/components/home/Toolbar";
 import useDataTable from "@/lib/hooks/useDataTable";
 import { useMemo, useState } from "react";
-
-const data = [
-    {
-        name: {
-            firstName: "امین",
-            lastName: "قاسمپور",
-        },
-        address: "فلان جا",
-        city: "تهران",
-        state: "بررسی شده",
-        price: "20",
-        updated_at: "2024/05/02",
-        company: "همراه اول",
-        area: "منطقه 5",
-    },
-    {
-        name: {
-            firstName: "امیر حسین",
-            lastName: "محمودی",
-        },
-        address: "فلان جا",
-        city: "تهران",
-        state: "تکمیل شده",
-        price: "27",
-        updated_at: "2024/05/02",
-        company: "وایتل",
-        area: "منطقه 27",
-    },
-    {
-        name: {
-            firstName: "یاسمن",
-            lastName: "علی اکبری",
-        },
-        address: "فلان جا",
-        city: "شیراز",
-        state: "بررسی شده",
-        price: "32",
-        updated_at: "2024/05/02",
-        company: "ایرانسل",
-        area: "منطقه 23",
-    },
-    {
-        name: {
-            firstName: "حمیدرضا",
-            lastName: "رنجبرپور",
-        },
-        address: "فلان جا",
-        city: "اصفهان",
-        state: "بررسی شده",
-        price: "45",
-        updated_at: "2024/05/02",
-        company: "ایرانول",
-        area: "منطقه 21",
-    },
-    {
-        name: {
-            firstName: "محمد",
-            lastName: "جلالی",
-        },
-        address: "فلان جا",
-        city: "رشت",
-        state: "درحال بررسی",
-        price: "8",
-        updated_at: "2024/05/02",
-        company: "فیلیمو",
-        area: "منطقه 8",
-    },
-];
+import useRequest from "@/lib/hooks/useRequest";
+import useSWR from "swr";
 
 const DataTable_Main = (props) => {
+    const request = useRequest();
+    const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
     const { filterData, sortData, setSortData } = useDataTable();
-    const { table_url, user_id, page_name, table_name, columns, initialStateProps } = props;
+    const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const { settingStore, hideAction } = useTableSetting();
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
@@ -95,15 +30,31 @@ const DataTable_Main = (props) => {
         const params = new URLSearchParams();
         params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
         params.set("size", pagination.pageSize);
-        params.set("filters", JSON.stringify(filterData ?? []));
+        params.set("filters", JSON.stringify(isEmptyObject(filterData) ? [] : [filterData]));
         params.set("sorting", JSON.stringify(sortData));
         return `${table_url}?${params}`;
     }, [table_url, filterData, pagination, columns]);
 
+    const fetcher = async (url) => {
+        try {
+            const response = await request(url);
+            return response.data;
+        } catch (error) {
+            throw error;
+        }
+    };
+
+    const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
+        revalidateIfStale: true,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: true,
+        keepPreviousData: true,
+    });
+
     const table = useMaterialReactTable({
         localization: FA_DATATABLE_LOCALIZATION,
         columns,
-        data: data,
+        data: data?.data ?? [],
         initialState: {
             density: "compact",
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
@@ -111,6 +62,7 @@ const DataTable_Main = (props) => {
             ...initialStateProps,
         },
         state: {
+            showProgressBars: isValidating,
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
             sorting: sortData,
             pagination,
@@ -146,7 +98,7 @@ const DataTable_Main = (props) => {
         onSortingChange: onSortingChange,
         renderTopToolbarCustomActions: ({ table }) => (
             <>
-                <Toolbar columns={flatColumns} />
+                <TableToolbar mutate={mutate} />
             </>
         ),
         ...props,
@@ -154,6 +106,7 @@ const DataTable_Main = (props) => {
 
     return (
         <DataTable_Paper
+            need_filter={need_filter}
             table={table}
             columns={flatColumns}
             user_id={user_id}

src/core/components/DataTable/filter/FilterBody.jsx

@@ -135,9 +135,9 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
                                             px: 8,
                                             boxShadow:
                                                 "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                                            backgroundColor: "#155175",
+                                            backgroundColor: "primary2",
                                             ":hover": {
-                                                backgroundColor: "#155175",
+                                                backgroundColor: "primary2",
                                             },
                                         }}
                                     >

src/core/components/DataTable/head/TableHeadCell.js

@@ -215,8 +215,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
                                 overflow: columnDefType === "data" ? "hidden" : undefined,
                                 textOverflow: "ellipsis",
                                 color: "#fff",
-                                fontSize: "14px",
-                                fontWeight: "500",
+                                fontWeight: "400",
                                 whiteSpace: (columnDef.header?.length ?? 0) < 20 ? "nowrap" : "normal",
                             }}
                         >

src/core/components/DataTable/table/Paper.js

@@ -66,6 +66,7 @@ const DataTable_Paper = ({ table, ...rest }) => {
             {enableTopToolbar &&
                 (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
                     <DataTable_TopToolbar
+                        need_filter={paperProps.need_filter}
                         table={table}
                         columns={paperProps.columns}
                         table_url={paperProps.table_url}

src/core/components/DataTable/toolbar/TopToolbar.js

@@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
 import FilterColumn from "@/core/components/DataTable/filter";
 import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
 
-const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, table_name }) => {
+const DataTable_TopToolbar = ({ need_filter, table, columns, table_url, user_id, page_name, table_name }) => {
     const {
         getState,
         options: {
@@ -70,13 +70,15 @@ const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, t
                         }}
                     >
                         <RefactorTable />
-                        <FilterColumn
-                            columns={columns}
-                            table_url={table_url}
-                            user_id={user_id}
-                            page_name={page_name}
-                            table_name={table_name}
-                        />
+                        {need_filter === "true" && (
+                            <FilterColumn
+                                columns={columns}
+                                table_url={table_url}
+                                user_id={user_id}
+                                page_name={page_name}
+                                table_name={table_name}
+                            />
+                        )}
                         <DataTable_ToolbarInternalButtons table={table} />
                     </Box>
                 )}