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

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,