openstatus.dev
Openstatus
www.openstatus.dev
1import type { Table } from "@tanstack/react-table";
2import {
3 ChevronLeft,
4 ChevronRight,
5 ChevronsLeft,
6 ChevronsRight,
7} from "lucide-react";
8
9import { Button } from "@/components/ui/button";
10import {
11 Select,
12 SelectContent,
13 SelectItem,
14 SelectTrigger,
15 SelectValue,
16} from "@/components/ui/select";
17
18export interface DataTablePaginationProps<TData> {
19 table: Table<TData>;
20}
21
22export function DataTablePagination<TData>({
23 table,
24}: DataTablePaginationProps<TData>) {
25 return (
26 <div className="flex flex-wrap items-center justify-between gap-2">
27 <div className="flex-1 text-muted-foreground text-sm">
28 {table.getFilteredSelectedRowModel().rows.length} of{" "}
29 {table.getFilteredRowModel().rows.length} row(s) selected.
30 </div>
31 <div className="flex items-center space-x-6 lg:space-x-8">
32 <div className="flex items-center space-x-2">
33 <p className="font-medium text-sm">Rows per page</p>
34 <Select
35 value={`${table.getState().pagination.pageSize}`}
36 onValueChange={(value) => {
37 table.setPageSize(Number(value));
38 }}
39 >
40 <SelectTrigger className="h-8 w-[70px]">
41 <SelectValue placeholder={table.getState().pagination.pageSize} />
42 </SelectTrigger>
43 <SelectContent side="top">
44 {[10, 20, 30, 40, 50].map((pageSize) => (
45 <SelectItem key={pageSize} value={`${pageSize}`}>
46 {pageSize}
47 </SelectItem>
48 ))}
49 </SelectContent>
50 </Select>
51 </div>
52 <div className="flex items-center justify-center font-medium text-sm">
53 Page {table.getState().pagination.pageIndex + 1} of{" "}
54 {table.getPageCount()}
55 </div>
56 <div className="flex items-center space-x-2">
57 <Button
58 variant="outline"
59 className="hidden h-8 w-8 p-0 lg:flex"
60 onClick={() => table.setPageIndex(0)}
61 disabled={!table.getCanPreviousPage()}
62 >
63 <span className="sr-only">Go to first page</span>
64 <ChevronsLeft />
65 </Button>
66 <Button
67 variant="outline"
68 className="h-8 w-8 p-0"
69 onClick={() => table.previousPage()}
70 disabled={!table.getCanPreviousPage()}
71 >
72 <span className="sr-only">Go to previous page</span>
73 <ChevronLeft />
74 </Button>
75 <Button
76 variant="outline"
77 className="h-8 w-8 p-0"
78 onClick={() => table.nextPage()}
79 disabled={!table.getCanNextPage()}
80 >
81 <span className="sr-only">Go to next page</span>
82 <ChevronRight />
83 </Button>
84 <Button
85 variant="outline"
86 className="hidden h-8 w-8 p-0 lg:flex"
87 onClick={() => table.setPageIndex(table.getPageCount() - 1)}
88 disabled={!table.getCanNextPage()}
89 >
90 <span className="sr-only">Go to last page</span>
91 <ChevronsRight />
92 </Button>
93 </div>
94 </div>
95 </div>
96 );
97}
98
99export function DataTablePaginationSimple<TData>({
100 table,
101}: DataTablePaginationProps<TData>) {
102 return (
103 <div className="flex items-center justify-between">
104 <div className="flex-1 text-muted-foreground text-sm">
105 {table.getFilteredRowModel().rows.length} of{" "}
106 {table.getPreFilteredRowModel().rows.length} row(s) filtered.
107 </div>
108 <div className="flex items-center space-x-2">
109 <Button
110 variant="outline"
111 className="hidden h-8 w-8 p-0 lg:flex"
112 onClick={() => table.setPageIndex(0)}
113 disabled={!table.getCanPreviousPage()}
114 >
115 <span className="sr-only">Go to first page</span>
116 <ChevronsLeft />
117 </Button>
118 <Button
119 variant="outline"
120 className="h-8 w-8 p-0"
121 onClick={() => table.previousPage()}
122 disabled={!table.getCanPreviousPage()}
123 >
124 <span className="sr-only">Go to previous page</span>
125 <ChevronLeft />
126 </Button>
127 <Button
128 variant="outline"
129 className="h-8 w-8 p-0"
130 onClick={() => table.nextPage()}
131 disabled={!table.getCanNextPage()}
132 >
133 <span className="sr-only">Go to next page</span>
134 <ChevronRight />
135 </Button>
136 <Button
137 variant="outline"
138 className="hidden h-8 w-8 p-0 lg:flex"
139 onClick={() => table.setPageIndex(table.getPageCount() - 1)}
140 disabled={!table.getCanNextPage()}
141 >
142 <span className="sr-only">Go to last page</span>
143 <ChevronsRight />
144 </Button>
145 </div>
146 </div>
147 );
148}