implement base of Datatable_components

src/core/components/Datatable.jsx

@@ -0,0 +1,173 @@
+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";
+import { useTranslations } from "next-intl";
+import { useContext, useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+
+const DataTable = (props) => {
+  const { reloadDataTable, setReloadDataTable } = useContext(
+    ReloadDataTableContext
+  );
+  const fetcher = (...args) => {
+    return axios
+      .get(args, {
+        headers: {
+          Authorization: `Bearer ${props.token}`,
+        },
+      })
+      .then((res) => {
+        setRowCount(res.data.meta.totalRowCount);
+        return res.data.data;
+      });
+  };
+  const t = useTranslations();
+  const { languageApp, languageList } = useLanguage();
+  const [columnFilters, setColumnFilters] = useState([]);
+  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 [sorting, setSorting] = useState([]);
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [rowCount, setRowCount] = useState(0);
+  const [updateTime, setupdateTime] = useState(
+    moment().locale(languageApp).format("LL (HH:mm:ss)")
+  );
+
+  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,
+  });
+
+  useEffect(() => {
+    if (reloadDataTable) {
+      mutate(fetchUrl).then(() => {
+        setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete
+      });
+    }
+  }, [reloadDataTable, setReloadDataTable]);
+
+  useEffect(() => {
+    setupdateTime(moment().locale(languageApp).format("LL (HH:mm:ss)"));
+  }, [isValidating, languageApp]);
+
+  return (
+    <MaterialReactTable
+      localization={tableLocalization}
+      columns={props.columns} /* columns you send */
+      data={data ?? []}
+      manualFiltering
+      manualPagination
+      manualSorting
+      enableRowSelection={props.selectableRow} /* send condition */
+      enablePinning={props.enablePinning} /* send condition */
+      enableColumnFilters={props.enableColumnFilters} /* send condition */
+      enableDensityToggle={props.enableDensityToggle} /* send condition */
+      enableHiding={props.enableHiding} /* send condition */
+      enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
+      enableColumnResizing={props.enableColumnResizing}
+      muiTableHeadCellProps={{
+        sx: {
+          color: "primary.main",
+          "& .Mui-TableHeadCell-Content": { justifyContent: "space-between" },
+        },
+      }}
+      enableColumnFilterModes
+      muiTablePaperProps={{ elevation: 0 }}
+      rowCount={rowCount}
+      onColumnFilterFnsChange={setColumnFilterFns}
+      onColumnFiltersChange={setColumnFilters}
+      onPaginationChange={setPagination}
+      onSortingChange={setSorting}
+      positionToolbarAlertBanner="bottom"
+      renderTopToolbarCustomActions={({ table }) => (
+        <>
+          {props.enableCustomToolbar /* send condition */
+            ? props.CustomToolbar /* send component */
+            : ""}
+        </>
+      )}
+      renderBottomToolbarCustomActions={({ table }) => (
+        <>
+          {props.enableLastUpdate /* send condition */ ? (
+            <Typography
+              sx={{
+                color: "primary.main",
+                alignSelf: "center",
+                whiteSpace: "nowrap",
+                maxWidth: { xs: 100, sm: "100%" },
+                overflowX: "scroll",
+              }}
+              variant="caption"
+            >
+              {t("last_updated_at")}: {updateTime}
+            </Typography>
+          ) : (
+            ""
+          )}
+        </>
+      )}
+      state={{
+        isLoading,
+        columnFilters,
+        columnFilterFns,
+        pagination,
+        sorting,
+      }}
+      positionActionsColumn={"last"}
+      enableRowActions={props.enableRowActions}
+      {...props}
+    />
+  );
+};
+
+export default DataTable;

src/core/components/DatatableStructure.jsx

@@ -0,0 +1,15 @@
+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;