redesign datatable structure and usage

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;