gitscope
/
← marzneshin / dashboard/src/libs/entity-table/components/table-pagination.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/libs/entity-table/components/table-pagination.tsx · master
Source
1 578311c Mrdn 2y ago import {
2 578311c Mrdn 2y ago ChevronLeftIcon,
3 578311c Mrdn 2y ago ChevronRightIcon,
4 578311c Mrdn 2y ago DoubleArrowLeftIcon,
5 578311c Mrdn 2y ago DoubleArrowRightIcon,
6 aec4bc7 Mrdn 2y ago } from "@radix-ui/react-icons";
7 578311c Mrdn 2y ago import {
8 578311c Mrdn 2y ago Button,
9 578311c Mrdn 2y ago Select,
10 578311c Mrdn 2y ago SelectContent,
11 578311c Mrdn 2y ago SelectItem,
12 578311c Mrdn 2y ago SelectTrigger,
13 578311c Mrdn 2y ago SelectValue,
14 7389ad0 Mardin 2y ago } from "@marzneshin/common/components";
15 aec4bc7 Mrdn 2y ago import { useTranslation } from "react-i18next";
16 65bbe9d Mardin 2y ago import { Table } from "@tanstack/react-table"
17 8b82d79 Mardin 1y ago import { useLocalStorage } from "@uidotdev/usehooks";
18 8b82d79 Mardin 1y ago import { useEntityTableContext } from "../contexts";
19 578311c Mrdn 2y ago
20 65bbe9d Mardin 2y ago export function DataTablePagination<TData>({ table }: { table: Table<TData> }) {
21 578311c Mrdn 2y ago const { t } = useTranslation();
22 8b82d79 Mardin 1y ago const { entityKey } = useEntityTableContext();
23 8b82d79 Mardin 1y ago const [,setRowPerPageLocal] = useLocalStorage<number>(`marzneshin-table-row-per-page-${entityKey}`, 10);
24 aec4bc7 Mrdn 2y ago
25 578311c Mrdn 2y ago return (
26 578311c Mrdn 2y ago <div className="flex justify-between items-center p-2 w-full">
27 aec4bc7 Mrdn 2y ago {table.options.onRowSelectionChange && (
28 578311c Mrdn 2y ago <div className="flex-1 text-sm text-muted-foreground">
29 578311c Mrdn 2y ago {table.getFilteredSelectedRowModel().rows.length} {"/"}
30 aec4bc7 Mrdn 2y ago {table.getFilteredRowModel().rows.length} {t("table.selected")}
31 aec4bc7 Mrdn 2y ago </div>
32 aec4bc7 Mrdn 2y ago )}
33 ded762d Mrdn 2y ago <div className="flex justify-between items-center space-x-6 w-full lg:space-x-8">
34 578311c Mrdn 2y ago <div className="flex items-center space-x-2">
35 4cebd65 Mardin 2y ago <label id="rows-per-page-label" htmlFor="rows-per-page-select" className="text-sm font-medium">
36 4cebd65 Mardin 2y ago {t("table.row-per-page")}
37 4cebd65 Mardin 2y ago </label>
38 578311c Mrdn 2y ago <Select
39 578311c Mrdn 2y ago value={`${table.getState().pagination.pageSize}`}
40 578311c Mrdn 2y ago onValueChange={(value) => {
41 aec4bc7 Mrdn 2y ago table.setPageSize(Number(value));
42 aec4bc7 Mrdn 2y ago table.setPageIndex(1);
43 8b82d79 Mardin 1y ago setRowPerPageLocal(Number(value));
44 578311c Mrdn 2y ago }}
45 4cebd65 Mardin 2y ago aria-labelledby="rows-per-page-label"
46 578311c Mrdn 2y ago >
47 4cebd65 Mardin 2y ago <SelectTrigger
48 4cebd65 Mardin 2y ago className="h-8 w-[70px]"
49 4cebd65 Mardin 2y ago aria-controls="rows-per-page-listbox"
50 4cebd65 Mardin 2y ago aria-labelledby="rows-per-page-label"
51 4cebd65 Mardin 2y ago >
52 578311c Mrdn 2y ago <SelectValue placeholder={table.getState().pagination.pageSize} />
53 578311c Mrdn 2y ago </SelectTrigger>
54 4cebd65 Mardin 2y ago <SelectContent
55 4cebd65 Mardin 2y ago id="rows-per-page-listbox"
56 4cebd65 Mardin 2y ago side="top"
57 4cebd65 Mardin 2y ago aria-labelledby="rows-per-page-label"
58 4cebd65 Mardin 2y ago >
59 578311c Mrdn 2y ago {[10, 20, 50, 100].map((pageSize) => (
60 4cebd65 Mardin 2y ago <SelectItem
61 4cebd65 Mardin 2y ago key={pageSize}
62 4cebd65 Mardin 2y ago value={`${pageSize}`}
63 4cebd65 Mardin 2y ago aria-selected={table.getState().pagination.pageSize === pageSize}
64 4cebd65 Mardin 2y ago >
65 578311c Mrdn 2y ago {pageSize}
66 578311c Mrdn 2y ago </SelectItem>
67 578311c Mrdn 2y ago ))}
68 578311c Mrdn 2y ago </SelectContent>
69 578311c Mrdn 2y ago </Select>
70 578311c Mrdn 2y ago </div>
71 ca9d44e Mardin 2y ago {(table.getPageCount() - 1) !== 0 &&
72 ca9d44e Mardin 2y ago <div className="flex justify-center items-center text-sm font-medium w-[100px]">
73 ca9d44e Mardin 2y ago Page {table.getState().pagination.pageIndex + 1} of{" "}
74 ca9d44e Mardin 2y ago {table.getPageCount() - 1}
75 ca9d44e Mardin 2y ago </div>
76 ca9d44e Mardin 2y ago }
77 578311c Mrdn 2y ago <div className="flex items-center space-x-2">
78 578311c Mrdn 2y ago <Button
79 578311c Mrdn 2y ago variant="outline"
80 578311c Mrdn 2y ago className="hidden p-0 w-8 h-8 lg:flex"
81 578311c Mrdn 2y ago onClick={() => table.setPageIndex(1)}
82 578311c Mrdn 2y ago disabled={!table.getCanPreviousPage()}
83 578311c Mrdn 2y ago >
84 578311c Mrdn 2y ago <span className="sr-only">Go to first page</span>
85 578311c Mrdn 2y ago <DoubleArrowLeftIcon className="w-4 h-4" />
86 578311c Mrdn 2y ago </Button>
87 578311c Mrdn 2y ago <Button
88 578311c Mrdn 2y ago variant="outline"
89 578311c Mrdn 2y ago className="p-0 w-8 h-8"
90 578311c Mrdn 2y ago onClick={() => table.previousPage()}
91 578311c Mrdn 2y ago disabled={!table.getCanPreviousPage()}
92 578311c Mrdn 2y ago >
93 578311c Mrdn 2y ago <span className="sr-only">Go to previous page</span>
94 578311c Mrdn 2y ago <ChevronLeftIcon className="w-4 h-4" />
95 578311c Mrdn 2y ago </Button>
96 578311c Mrdn 2y ago <Button
97 578311c Mrdn 2y ago variant="outline"
98 578311c Mrdn 2y ago className="p-0 w-8 h-8"
99 578311c Mrdn 2y ago onClick={() => table.nextPage()}
100 578311c Mrdn 2y ago disabled={!table.getCanNextPage()}
101 578311c Mrdn 2y ago >
102 578311c Mrdn 2y ago <span className="sr-only">Go to next page</span>
103 578311c Mrdn 2y ago <ChevronRightIcon className="w-4 h-4" />
104 578311c Mrdn 2y ago </Button>
105 578311c Mrdn 2y ago <Button
106 578311c Mrdn 2y ago variant="outline"
107 578311c Mrdn 2y ago className="hidden p-0 w-8 h-8 lg:flex"
108 578311c Mrdn 2y ago onClick={() => table.setPageIndex(table.getPageCount() - 1)}
109 578311c Mrdn 2y ago disabled={!table.getCanNextPage()}
110 578311c Mrdn 2y ago >
111 578311c Mrdn 2y ago <span className="sr-only">Go to last page</span>
112 578311c Mrdn 2y ago <DoubleArrowRightIcon className="w-4 h-4" />
113 578311c Mrdn 2y ago </Button>
114 578311c Mrdn 2y ago </div>
115 578311c Mrdn 2y ago </div>
116 578311c Mrdn 2y ago </div>
117 aec4bc7 Mrdn 2y ago );
118 578311c Mrdn 2y ago }