1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import React, { useEffect } from "react";
import {
PluginHook,
TableOptions,
usePagination,
useRowSelect,
useTable,
} from "react-table";
import { ScrollToTop } from "../../utilites";
import BaseTable, { TableStyleProps, useStyleAndOptions } from "./BaseTable";
import PageControl from "./PageControl";
import { useCustomSelection, useDefaultSettings } from "./plugins";
type Props<T extends object> = TableOptions<T> &
TableStyleProps<T> & {
canSelect?: boolean;
autoScroll?: boolean;
plugins?: PluginHook<T>[];
};
export default function PageTable<T extends object>(props: Props<T>) {
const { autoScroll, canSelect, plugins, ...remain } = props;
const { style, options } = useStyleAndOptions(remain);
const allPlugins: PluginHook<T>[] = [useDefaultSettings, usePagination];
if (canSelect) {
allPlugins.push(useRowSelect, useCustomSelection);
}
if (plugins) {
allPlugins.push(...plugins);
}
const instance = useTable(options, ...allPlugins);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
// page
page,
canNextPage,
canPreviousPage,
pageCount,
gotoPage,
nextPage,
previousPage,
state: { pageIndex, pageSize },
} = instance;
// Scroll to top when page is changed
useEffect(() => {
if (autoScroll) {
ScrollToTop();
}
}, [pageIndex, autoScroll]);
return (
<React.Fragment>
<BaseTable
{...style}
headers={headerGroups}
rows={page}
prepareRow={prepareRow}
tableProps={getTableProps()}
tableBodyProps={getTableBodyProps()}
></BaseTable>
<PageControl
count={pageCount}
index={pageIndex}
size={pageSize}
total={rows.length}
canPrevious={canPreviousPage}
canNext={canNextPage}
previous={previousPage}
next={nextPage}
goto={gotoPage}
></PageControl>
</React.Fragment>
);
}
|
