From 2211c4803b6d0be3de075b2aeb838ca71dd5fcef Mon Sep 17 00:00:00 2001
From: mohammad <muhammad.art79@gmail.com>
Date: Sat, 5 Aug 2023 00:14:13 +0330
Subject: [PATCH] redesign datatable structure and usage

---
 src/core/components/DataTableNew.jsx | 75 ++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/core/components/DataTableNew.jsx

diff --git a/src/core/components/DataTableNew.jsx b/src/core/components/DataTableNew.jsx
new file mode 100644
index 0000000..4f6d7ec
--- /dev/null
+++ b/src/core/components/DataTableNew.jsx
@@ -0,0 +1,75 @@
+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;
\ No newline at end of file