cleaning datatable component and make it more flexible/ debug notification and add pending/ add some extra to datatable.

src/core/components/DataTable.jsx

@@ -1,23 +1,21 @@
-import {ReloadDataTableContext} from "@/lib/app/contexts/ReloadDatatableContext";
-import useLanguage from "@/lib/app/hooks/useLanguage";
-import {Typography} from "@mui/material";
-import axios from "axios";
-import MaterialReactTable from "material-react-table";
-import moment from "moment-jalaali";
 import {useTranslations} from "next-intl";
-import {useContext, useEffect, useMemo, useState} from "react";
+import useLanguage from "@/lib/app/hooks/useLanguage";
+import {useEffect, useMemo, useState} from "react";
+import moment from "moment-jalaali";
 import useSWR from "swr";
+import {Typography} from "@mui/material";
+import MaterialReactTable from "material-react-table";
+import axios from "axios";
+import useUser from "@/lib/app/hooks/useUser";
+import {css} from "@emotion/react";
 
-const DataTable = (props) => {
-    const {reloadDataTable, setReloadDataTable} = useContext(
-        ReloadDataTableContext
-    );
-
+function DataTable(props) {
+    const {token} = useUser();
     const fetcher = (...args) => {
         return axios
             .get(args, {
                 headers: {
-                    Authorization: `Bearer ${props.token}`,
+                    Authorization: `Bearer ${token}`,
                 },
             })
             .then((res) => {
@@ -28,6 +26,9 @@ const DataTable = (props) => {
     const t = useTranslations();
     const {languageApp, languageList} = useLanguage();
     const [columnFilters, setColumnFilters] = useState([]);
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
+    const [rowCount, setRowCount] = useState(0);
     const [columnFilterFns, setColumnFilterFns] = useState(() => {
         let output = {};
         const list = props.columns.map((item) =>
@@ -41,9 +42,7 @@ const DataTable = (props) => {
         }
         return output;
     });
-    const [sorting, setSorting] = useState([]);
-    const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
-    const [rowCount, setRowCount] = useState(0);
+
     const [updateTime, setupdateTime] = useState(
         moment().format("HH:mm | jYYYY/jM/jD")
     );
@@ -55,7 +54,7 @@ const DataTable = (props) => {
     );
 
     const fetchUrl = useMemo(() => {
-        const url = new URL(props.tableUrl /* send your api */);
+        const url = new URL(props.tableUrl);
         url.searchParams.set(
             "start",
             `${pagination.pageIndex * pagination.pageSize}`
@@ -85,18 +84,11 @@ const DataTable = (props) => {
         sorting,
         props.columns,
     ]);
-    const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
+
+    const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
         revalidateOnFocus: false,
     });
 
-    useEffect(() => {
-        if (reloadDataTable) {
-            mutate(fetchUrl).then(() => {
-                setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete
-            });
-        }
-    }, [reloadDataTable, setReloadDataTable]);
-
     useEffect(() => {
         setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
     }, [isValidating, languageApp]);
@@ -104,7 +96,6 @@ const DataTable = (props) => {
     return (
         <MaterialReactTable
             localization={tableLocalization}
-            columns={props.columns} /* columns you send */
             data={data ?? []}
             manualFiltering
             manualPagination
@@ -112,16 +103,28 @@ const DataTable = (props) => {
             enableRowSelection={props.selectableRow} /* send condition */
             enablePinning={props.enablePinning} /* send condition */
             enableColumnFilters={props.enableColumnFilters} /* send condition */
-            enableDensityToggle={props.enableDensityToggle} /* send condition */
+            enableDensityToggle={props.enableDensityToggle}
             enableHiding={props.enableHiding} /* send condition */
             enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
             enableColumnResizing={props.enableColumnResizing}
             muiTableHeadCellProps={{
                 sx: {
                     color: "primary.main",
+                    borderLeft: "1px solid #e1e1e1",
+                    "&:first-of-type": {
+                        borderLeft: "unset"
+                    },
                     "& .Mui-TableHeadCell-Content": {justifyContent: "space-between"},
                 },
             }}
+            muiTableBodyCellProps={{
+                sx: {
+                    borderLeft: "1px solid #e1e1e1",
+                    "&:first-of-type": {
+                        borderLeft: "unset"
+                    }
+                },
+            }}
             enableColumnFilterModes
             muiTablePaperProps={{elevation: 0}}
             rowCount={rowCount}
@@ -158,7 +161,7 @@ const DataTable = (props) => {
                 </>
             )}
             state={{
-                isLoading,
+                isLoading: isValidating,
                 columnFilters,
                 columnFilterFns,
                 pagination,
@@ -166,9 +169,10 @@ const DataTable = (props) => {
             }}
             positionActionsColumn={"last"}
             enableRowActions={props.enableRowActions}
+            renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
             {...props}
         />
     );
-};
+}
 
-export default DataTable;
+export default DataTable;

src/core/components/DataTableNew.jsx

@@ -1,75 +0,0 @@
-import {useTranslations} from "next-intl";
-import useLanguage from "@/lib/app/hooks/useLanguage";
-import {useMemo, useState} from "react";
-import moment from "moment-jalaali";
-import useSWR from "swr";
-
-function DataTableNew(props) {
-    const t = useTranslations();
-    const {languageApp, languageList} = useLanguage();
-    const [columnFilters, setColumnFilters] = useState([]);
-    const [sorting, setSorting] = useState([]);
-    const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
-    const [rowCount, setRowCount] = useState(0);
-    const [columnFilterFns, setColumnFilterFns] = useState(() => {
-        let output = {};
-        const list = props.columns.map((item) =>
-            item.enableColumnFilter ? {[item.id]: item.filterFn} : {[item.id]: ""}
-        );
-        for (var key in list) {
-            var nestedObj = list[key];
-            for (var nestedKey in nestedObj) {
-                output[nestedKey] = nestedObj[nestedKey];
-            }
-        }
-        return output;
-    });
-    const [updateTime, setupdateTime] = useState(
-        moment().format("HH:mm | jYYYY/jM/jD")
-    );
-    const tableLocalization = useMemo(
-        () =>
-            languageList.find((item) => item.key == languageApp).tableLocalization,
-        [languageApp, languageList]
-    );
-    const fetchUrl = useMemo(() => {
-        const url = new URL(props.tableUrl /* send your api */);
-        url.searchParams.set(
-            "start",
-            `${pagination.pageIndex * pagination.pageSize}`
-        );
-        const filters = columnFilters.map((filter) => {
-            let datatype;
-            for (const i in props.columns) {
-                if (props.columns[i].id == filter.id) {
-                    datatype = props.columns[i].datatype;
-                }
-            }
-            return {
-                ...filter,
-                fn: columnFilterFns[filter.id],
-                datatype: datatype,
-            };
-        });
-        url.searchParams.set("size", pagination.pageSize);
-        url.searchParams.set("filters", JSON.stringify(filters ?? []));
-        url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
-        return url;
-    }, [
-        props.tableUrl,
-        columnFilters,
-        columnFilterFns,
-        pagination,
-        sorting,
-        props.columns,
-    ]);
-    const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
-        revalidateOnFocus: false,
-    });
-
-    return (
-        <p>datatable</p>
-    );
-}
-
-export default DataTableNew;

src/core/components/DatatableStructure.jsx

@@ -1,15 +0,0 @@
-import {DataTableProvider} from "@/lib/app/contexts/DatatableContext";
-import DataTable from "./Datatable";
-import {ReloadDataTableProvider} from "@/lib/app/contexts/ReloadDatatableContext";
-
-function DataTableStructure(props) {
-    return (
-        <ReloadDataTableProvider>
-            <DataTableProvider>
-                <DataTable {...props} token={localStorage.getItem("_token")}/>
-            </DataTableProvider>
-        </ReloadDataTableProvider>
-    );
-}
-
-export default DataTableStructure;

src/core/components/notifications/ErrorNotification.jsx

@@ -2,7 +2,7 @@ import DangerousIcon from "@mui/icons-material/Dangerous";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const ErrorNotification = (directionApp, status, t, message) => {
+const ErrorNotification = (directionApp, t, status, message) => {
     toast(
         () => (
             <>

src/core/components/notifications/SuccessNotification.jsx

@@ -2,7 +2,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const SuccessNotification = (directionApp, status, t) => {
+const SuccessNotification = (directionApp, t, status) => {
     toast(
         () => (
             <>

src/core/components/notifications/WarningNotification.jsx

@@ -2,7 +2,7 @@ import ReportIcon from "@mui/icons-material/Report";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const WarningNotification = (directionApp, status, t) => {
+const WarningNotification = (directionApp, t, status) => {
     toast(
         () => (
             <>

src/core/components/notifications/index.jsx

@@ -1,39 +1,55 @@
+import {toast} from "react-toastify";
 import ErrorNotification from "./ErrorNotification";
 import WarningNotification from "./WarningNotification";
 import SuccessNotification from "./SuccessNotification";
 
-const Notifications = async (directionApp, response, t) => {
-    const {status, data} = response;
-
+const Notifications = async (directionApp, t, response) => {
+    const {status, data} = response != undefined ? response : ""
+    toast.dismiss();
     switch (status) {
         case 200:
-            SuccessNotification(directionApp, status, t);
+            SuccessNotification(directionApp, t, status);
             break;
         case 400:
-            ErrorNotification(directionApp, status, t);
+            ErrorNotification(directionApp, t, status);
             break;
         case 401:
-            ErrorNotification(directionApp, status, t);
+            ErrorNotification(directionApp, t, status);
             break;
         case 403:
-            ErrorNotification(directionApp, status, t);
+            ErrorNotification(directionApp, t, status);
             break;
         case 422:
-            ErrorNotification(directionApp, status, t, data.message);
+            ErrorNotification(directionApp, t, status, data.message);
             break;
         case 500:
-            WarningNotification(directionApp, status, t);
+            WarningNotification(directionApp, t, status);
             break;
         case 503:
-            WarningNotification(directionApp, status, t);
+            WarningNotification(directionApp, t, status);
             break;
         case 504:
-            WarningNotification(directionApp, status, t);
+            WarningNotification(directionApp, t, status);
             break;
         default:
-            // Handle other cases if needed
+            toast(t("notifications.pending"), {
+                position: directionApp === "ltr" ? "top-left" : "top-right",
+                autoClose: false,
+                closeOnClick: false,
+                draggable: false,
+            });
             break;
     }
 };
 
 export default Notifications;
+
+/*
+usage document
+
+** for pending use ( Notifications(directionApp, t, undefined) ) this before your request.
+** for success use ( Notifications(directionApp, t, response) ) this inside .then() of your request.
+** for Error and Warning use ( Notifications(directionApp, t, error.response) ) this inside .catche() of your request.
+
+end usage document
+*/