gitscope
/
← marzneshin / dashboard/src/components/entity-table/table-pagination.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/entity-table/table-pagination.tsx · v0.3.0-alpha7
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 578311c 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 578311c Mrdn 2y ago } from "@marzneshin/components"
15 578311c Mrdn 2y ago import { useTranslation } from "react-i18next"
16 578311c Mrdn 2y ago import { useEntityTableContext } from "./entity-table-provider";
17 578311c Mrdn 2y ago
18 578311c Mrdn 2y ago export interface DataTablePaginationProps { }
19 578311c Mrdn 2y ago
20 578311c Mrdn 2y ago export function DataTablePagination() {
21 578311c Mrdn 2y ago const { t } = useTranslation();
22 578311c Mrdn 2y ago const { table } = useEntityTableContext()
23 578311c Mrdn 2y ago return (
24 578311c Mrdn 2y ago <div className="flex justify-between items-center p-2 w-full">
25 578311c Mrdn 2y ago {table.options.onRowSelectionChange &&
26 578311c Mrdn 2y ago <div className="flex-1 text-sm text-muted-foreground">
27 578311c Mrdn 2y ago {table.getFilteredSelectedRowModel().rows.length} {"/"}
28 578311c Mrdn 2y ago {table.getFilteredRowModel().rows.length} {t('table.selected')}
29 578311c Mrdn 2y ago </div>}
30 ded762d Mrdn 2y ago <div className="flex justify-between items-center space-x-6 w-full lg:space-x-8">
31 578311c Mrdn 2y ago <div className="flex items-center space-x-2">
32 578311c Mrdn 2y ago <p className="text-sm font-medium">{t('table.row-per-page')}</p>
33 578311c Mrdn 2y ago <Select
34 578311c Mrdn 2y ago value={`${table.getState().pagination.pageSize}`}
35 578311c Mrdn 2y ago onValueChange={(value) => {
36 578311c Mrdn 2y ago table.setPageSize(Number(value))
37 ded762d Mrdn 2y ago table.setPageIndex(1)
38 578311c Mrdn 2y ago }}
39 578311c Mrdn 2y ago >
40 578311c Mrdn 2y ago <SelectTrigger className="h-8 w-[70px]">
41 578311c Mrdn 2y ago <SelectValue placeholder={table.getState().pagination.pageSize} />
42 578311c Mrdn 2y ago </SelectTrigger>
43 578311c Mrdn 2y ago <SelectContent side="top">
44 578311c Mrdn 2y ago {[10, 20, 50, 100].map((pageSize) => (
45 578311c Mrdn 2y ago <SelectItem key={pageSize} value={`${pageSize}`}>
46 578311c Mrdn 2y ago {pageSize}
47 578311c Mrdn 2y ago </SelectItem>
48 578311c Mrdn 2y ago ))}
49 578311c Mrdn 2y ago </SelectContent>
50 578311c Mrdn 2y ago </Select>
51 578311c Mrdn 2y ago </div>
52 578311c Mrdn 2y ago <div className="flex justify-center items-center text-sm font-medium w-[100px]">
53 578311c Mrdn 2y ago Page {table.getState().pagination.pageIndex + 1} of{" "}
54 578311c Mrdn 2y ago {table.getPageCount() - 1}
55 578311c Mrdn 2y ago </div>
56 578311c Mrdn 2y ago <div className="flex items-center space-x-2">
57 578311c Mrdn 2y ago <Button
58 578311c Mrdn 2y ago variant="outline"
59 578311c Mrdn 2y ago className="hidden p-0 w-8 h-8 lg:flex"
60 578311c Mrdn 2y ago onClick={() => table.setPageIndex(1)}
61 578311c Mrdn 2y ago disabled={!table.getCanPreviousPage()}
62 578311c Mrdn 2y ago >
63 578311c Mrdn 2y ago <span className="sr-only">Go to first page</span>
64 578311c Mrdn 2y ago <DoubleArrowLeftIcon className="w-4 h-4" />
65 578311c Mrdn 2y ago </Button>
66 578311c Mrdn 2y ago <Button
67 578311c Mrdn 2y ago variant="outline"
68 578311c Mrdn 2y ago className="p-0 w-8 h-8"
69 578311c Mrdn 2y ago onClick={() => table.previousPage()}
70 578311c Mrdn 2y ago disabled={!table.getCanPreviousPage()}
71 578311c Mrdn 2y ago >
72 578311c Mrdn 2y ago <span className="sr-only">Go to previous page</span>
73 578311c Mrdn 2y ago <ChevronLeftIcon className="w-4 h-4" />
74 578311c Mrdn 2y ago </Button>
75 578311c Mrdn 2y ago <Button
76 578311c Mrdn 2y ago variant="outline"
77 578311c Mrdn 2y ago className="p-0 w-8 h-8"
78 578311c Mrdn 2y ago onClick={() => table.nextPage()}
79 578311c Mrdn 2y ago disabled={!table.getCanNextPage()}
80 578311c Mrdn 2y ago >
81 578311c Mrdn 2y ago <span className="sr-only">Go to next page</span>
82 578311c Mrdn 2y ago <ChevronRightIcon className="w-4 h-4" />
83 578311c Mrdn 2y ago </Button>
84 578311c Mrdn 2y ago <Button
85 578311c Mrdn 2y ago variant="outline"
86 578311c Mrdn 2y ago className="hidden p-0 w-8 h-8 lg:flex"
87 578311c Mrdn 2y ago onClick={() => table.setPageIndex(table.getPageCount() - 1)}
88 578311c Mrdn 2y ago disabled={!table.getCanNextPage()}
89 578311c Mrdn 2y ago >
90 578311c Mrdn 2y ago <span className="sr-only">Go to last page</span>
91 578311c Mrdn 2y ago <DoubleArrowRightIcon className="w-4 h-4" />
92 578311c Mrdn 2y ago </Button>
93 578311c Mrdn 2y ago </div>
94 578311c Mrdn 2y ago </div>
95 578311c Mrdn 2y ago </div>
96 578311c Mrdn 2y ago )
97 578311c Mrdn 2y ago }