Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
3.5 kB · 114 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115"use no memo";
import type { Table } from "@tanstack/react-table";import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,} from "lucide-react";
import { Button } from "@/components/ui/button";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select";import { cn } from "@/lib/utils";
interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> { table: Table<TData>; pageSizeOptions?: number[];}
export function DataTablePagination<TData>({ table, pageSizeOptions = [10, 20, 30, 40, 50], className, ...props}: DataTablePaginationProps<TData>) { return ( <div className={cn( "flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8", className, )} {...props} > <div className="flex-1 whitespace-nowrap text-muted-foreground text-sm"> {table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected. </div> <div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8"> <div className="flex items-center space-x-2"> <p className="whitespace-nowrap font-medium text-sm">Rows per page</p> <Select value={`${table.getState().pagination.pageSize}`} onValueChange={(value) => { table.setPageSize(Number(value)); }} > <SelectTrigger className="h-8 w-18 data-size:h-8"> <SelectValue placeholder={table.getState().pagination.pageSize} /> </SelectTrigger> <SelectContent side="top"> {pageSizeOptions.map((pageSize) => ( <SelectItem key={pageSize} value={`${pageSize}`}> {pageSize} </SelectItem> ))} </SelectContent> </Select> </div> <div className="flex items-center justify-center font-medium text-sm"> Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()} </div> <div className="flex items-center space-x-2"> <Button aria-label="Go to first page" variant="outline" size="icon" className="hidden size-8 lg:flex" onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()} > <ChevronsLeft /> </Button> <Button aria-label="Go to previous page" variant="outline" size="icon" className="size-8" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} > <ChevronLeft /> </Button> <Button aria-label="Go to next page" variant="outline" size="icon" className="size-8" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} > <ChevronRight /> </Button> <Button aria-label="Go to last page" variant="outline" size="icon" className="hidden size-8 lg:flex" onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()} > <ChevronsRight /> </Button> </div> </div> </div> );}