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