Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
4.9 kB · 147 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148import { Button } from "@openstatus/ui/components/ui/button";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@openstatus/ui/components/ui/select";import type { Table } from "@tanstack/react-table";import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,} from "lucide-react";
export interface DataTablePaginationProps<TData> { table: Table<TData>;}
export function DataTablePagination<TData>({ table,}: DataTablePaginationProps<TData>) { return ( <div className="flex flex-wrap items-center justify-between gap-2"> <div className="text-muted-foreground flex-1 text-sm"> {table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected. </div> <div className="flex items-center space-x-6 lg:space-x-8"> <div className="flex items-center space-x-2"> <p className="text-sm font-medium">Rows per page</p> <Select value={`${table.getState().pagination.pageSize}`} onValueChange={(value) => { table.setPageSize(Number(value)); }} > <SelectTrigger className="h-8 w-[70px]"> <SelectValue placeholder={table.getState().pagination.pageSize} /> </SelectTrigger> <SelectContent side="top"> {[10, 20, 30, 40, 50].map((pageSize) => ( <SelectItem key={pageSize} value={`${pageSize}`}> {pageSize} </SelectItem> ))} </SelectContent> </Select> </div> <div className="flex items-center justify-center text-sm font-medium"> Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()} </div> <div className="flex items-center space-x-2"> <Button variant="outline" className="hidden h-8 w-8 p-0 lg:flex" onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()} > <span className="sr-only">Go to first page</span> <ChevronsLeft /> </Button> <Button variant="outline" className="h-8 w-8 p-0" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} > <span className="sr-only">Go to previous page</span> <ChevronLeft /> </Button> <Button variant="outline" className="h-8 w-8 p-0" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} > <span className="sr-only">Go to next page</span> <ChevronRight /> </Button> <Button variant="outline" className="hidden h-8 w-8 p-0 lg:flex" onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()} > <span className="sr-only">Go to last page</span> <ChevronsRight /> </Button> </div> </div> </div> );}
export function DataTablePaginationSimple<TData>({ table,}: DataTablePaginationProps<TData>) { return ( <div className="flex items-center justify-between"> <div className="text-muted-foreground flex-1 text-sm"> {table.getFilteredRowModel().rows.length} of{" "} {table.getPreFilteredRowModel().rows.length} row(s) filtered. </div> <div className="flex items-center space-x-2"> <Button variant="outline" className="hidden h-8 w-8 p-0 lg:flex" onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()} > <span className="sr-only">Go to first page</span> <ChevronsLeft /> </Button> <Button variant="outline" className="h-8 w-8 p-0" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} > <span className="sr-only">Go to previous page</span> <ChevronLeft /> </Button> <Button variant="outline" className="h-8 w-8 p-0" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} > <span className="sr-only">Go to next page</span> <ChevronRight /> </Button> <Button variant="outline" className="hidden h-8 w-8 p-0 lg:flex" onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()} > <span className="sr-only">Go to last page</span> <ChevronsRight /> </Button> </div> </div> );}