complete making fetchURL for swr request complete filter/sort/pagination/pagesie (all data that have been needed for Datatable)

package.json

@@ -29,6 +29,7 @@
     "sass": "^1.75.0",
     "stylis": "^4.3.1",
     "stylis-plugin-rtl": "^2.1.1",
+    "swr": "^2.2.5",
     "yup": "^1.4.0"
   },
   "devDependencies": {

src/components/home/index.jsx

@@ -141,7 +141,7 @@ function HomeComponent() {
 
     return (
         <>
-            <DataTable columns={columns} user_id={0} page_name={'testPage'} table_name={'testTable'}/>
+            <DataTable columns={columns} table_url={"api"} user_id={0} page_name={'testPage'} table_name={'testTable'}/>
         </>
 
     );

src/core/components/DataTable/Main.js

@@ -5,6 +5,7 @@ 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 = [
     {
@@ -76,10 +77,30 @@ const data = [
 
 const DataTable_Main = (props) => {
     const {filterData} = useDataTable();
-    const {user_id, page_name, table_name, columns, initialStateProps} = props
+    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 filters = Object.keys(filterData)
+        .map(key => {
+            const value = filterData[key].value;
+            if (value !== "" &&
+                !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
+                return filterData[key];
+            }
+        })
+        .filter(Boolean);
+    const storedFilters = settingStore?.[user_id]?.[page_name]?.[table_name]?.filters;
+    const finalFilters = storedFilters || filters;
+
+    const fetchUrl = useMemo(() => {
+        const params = new URLSearchParams();
+        params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
+        params.set("size", pagination.pageSize);
+        params.set("filters", JSON.stringify(finalFilters ?? []));
+        params.set("sorting", JSON.stringify(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] ?? []));
+        return `${table_url}?${params}`;
+    }, [table_url, finalFilters, pagination, columns]);
 
     const onColumnVisibilityChange = (event) => {
         const settingValue = event();
@@ -108,7 +129,8 @@ const DataTable_Main = (props) => {
         },
         state: {
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
-            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []
+            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
+            pagination
         },
         muiTableHeadProps: {
             sx: {
@@ -135,6 +157,7 @@ const DataTable_Main = (props) => {
         },
         manualFiltering: true,
         manualPagination: true,
+        onPaginationChange: setPagination,
         manualSorting: true,
         onColumnVisibilityChange: onColumnVisibilityChange,
         onSortingChange: onSortingChange,

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

@@ -65,9 +65,10 @@ const DataTable_Paper = ({table, ...rest}) => {
         >
             {enableTopToolbar &&
                 (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
-                    <DataTable_TopToolbar table={table} columns={paperProps.columns} userId={paperProps.userId}
+                    <DataTable_TopToolbar table={table} columns={paperProps.columns} table_url={paperProps.table_url}
-                                          pageName={paperProps.pageName}
+                                          user_id={paperProps.user_id}
-                                          tableName={paperProps.tableName}/>
+                                          page_name={paperProps.page_name}
+                                          table_name={paperProps.table_name}/>
                 ))}
             <DataTable_TableContainer table={table}/>
             {enableBottomToolbar &&

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, user_id, page_name, table_name}) => {
+const DataTable_TopToolbar = ({table, columns, table_url, user_id, page_name, table_name}) => {
     const {
         getState,
         options: {
@@ -73,7 +73,7 @@ const DataTable_TopToolbar = ({table, columns, user_id, page_name, table_name})
                         }}
                     >
                         <RefactorTable/>
-                        <FilterColumn columns={columns} user_id={user_id} page_name={page_name}
+                        <FilterColumn columns={columns} table_url={table_url} user_id={user_id} page_name={page_name}
                                       table_name={table_name}/>
                         <DataTable_ToolbarInternalButtons table={table}/>
                     </Box>