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