2022-03-16 06:26:15 +00:00
|
|
|
import { ScrollToTop } from "@/utilities";
|
2022-05-31 15:49:04 +00:00
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import { TableInstance, usePagination } from "react-table";
|
2021-03-25 14:22:43 +00:00
|
|
|
import PageControl from "./PageControl";
|
2022-03-16 06:26:15 +00:00
|
|
|
import { useDefaultSettings } from "./plugins";
|
2022-05-31 15:49:04 +00:00
|
|
|
import SimpleTable, { SimpleTableProps } from "./SimpleTable";
|
2021-03-25 14:22:43 +00:00
|
|
|
|
2022-05-31 15:49:04 +00:00
|
|
|
type Props<T extends object> = SimpleTableProps<T> & {
|
|
|
|
autoScroll?: boolean;
|
|
|
|
};
|
|
|
|
|
|
|
|
const tablePlugins = [useDefaultSettings, usePagination];
|
2021-03-25 14:22:43 +00:00
|
|
|
|
|
|
|
export default function PageTable<T extends object>(props: Props<T>) {
|
2022-03-16 06:26:15 +00:00
|
|
|
const { autoScroll, plugins, ...remain } = props;
|
2021-03-25 14:22:43 +00:00
|
|
|
|
2022-05-31 15:49:04 +00:00
|
|
|
const instance = useRef<TableInstance<T> | null>(null);
|
2021-03-25 14:22:43 +00:00
|
|
|
|
|
|
|
// Scroll to top when page is changed
|
|
|
|
useEffect(() => {
|
|
|
|
if (autoScroll) {
|
|
|
|
ScrollToTop();
|
|
|
|
}
|
2022-05-31 15:49:04 +00:00
|
|
|
}, [instance.current?.state.pageIndex, autoScroll]);
|
2021-03-25 14:22:43 +00:00
|
|
|
|
|
|
|
return (
|
2022-03-16 06:26:15 +00:00
|
|
|
<>
|
2022-05-31 15:49:04 +00:00
|
|
|
<SimpleTable
|
|
|
|
{...remain}
|
|
|
|
instanceRef={instance}
|
|
|
|
plugins={[...tablePlugins, ...(plugins ?? [])]}
|
|
|
|
></SimpleTable>
|
|
|
|
{instance.current && (
|
|
|
|
<PageControl
|
|
|
|
count={instance.current.pageCount}
|
|
|
|
index={instance.current.state.pageIndex}
|
|
|
|
size={instance.current.state.pageSize}
|
|
|
|
total={instance.current.rows.length}
|
|
|
|
goto={instance.current.gotoPage}
|
|
|
|
></PageControl>
|
|
|
|
)}
|
2022-03-16 06:26:15 +00:00
|
|
|
</>
|
2021-03-25 14:22:43 +00:00
|
|
|
);
|
|
|
|
}
|