66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React, { lazy, Suspense } from "react";
|
|
import { useAddKeyToData, Table, useTranslation, usePagination } from ".";
|
|
import { DataTableProps } from "../../../types/Table";
|
|
const NotFoundLottie = React.lazy(
|
|
() => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
|
|
);
|
|
const LoadingLottie = React.lazy(
|
|
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
|
|
);
|
|
|
|
const DataTable: React.FC<DataTableProps> = ({
|
|
response,
|
|
useColumns,
|
|
...props
|
|
}) => {
|
|
const data: any[] = response?.data?.data || [];
|
|
const dataSource = useAddKeyToData(data);
|
|
const columns = useColumns();
|
|
const { pagination, handlePageChange } = usePagination(response?.data);
|
|
const [t] = useTranslation();
|
|
const getRowClassName = (record: any, index: number): string => {
|
|
return index % 2 === 0 ? "even-row" : "odd-row";
|
|
};
|
|
const isRefetching = response?.isRefetching;
|
|
const isLoading = response?.isLoading;
|
|
|
|
return (
|
|
<Table
|
|
style={{ minHeight: "300px" }}
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
rowClassName={(record, index) => getRowClassName(record, index)}
|
|
className="DataTable"
|
|
loading={{
|
|
spinning: isLoading || isRefetching ,
|
|
indicator: (
|
|
<Suspense fallback={<></>}>
|
|
<LoadingLottie />
|
|
</Suspense>
|
|
),
|
|
size: "large",
|
|
}}
|
|
locale={{
|
|
emptyText:
|
|
isLoading || isRefetching ? (
|
|
<></>
|
|
) : (
|
|
<Suspense fallback={<></>}>
|
|
<NotFoundLottie />
|
|
</Suspense>
|
|
),
|
|
}}
|
|
pagination={{
|
|
...pagination,
|
|
onChange: handlePageChange,
|
|
nextIcon: <>{t("practical.next")}</>,
|
|
prevIcon: <> {t("practical.prev")} </>,
|
|
className: "pagination_antd",
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DataTable;
|