A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
3.7 kB · 118 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119"use no memo";
import { flexRender, type Table as TanstackTable } from "@tanstack/react-table";import type * as React from "react";
import { DataTablePagination } from "@/components/data-table/data-table-pagination";import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table";import { getColumnPinningStyle } from "@/lib/data-table";import { cn } from "@/lib/utils";
interface DataTableProps<TData> extends React.ComponentProps<"div"> { table: TanstackTable<TData>; actionBar?: React.ReactNode; showPagination?: boolean; onRowClick?: (row: TData) => void;}
export function DataTable<TData>({ table, actionBar, showPagination = true, onRowClick, children, className, ...props}: DataTableProps<TData>) { return ( <div className={cn("flex w-full flex-col gap-2.5 overflow-auto", className)} {...props} > {children} <div className="overflow-clip rounded-md border"> <Table> <TableHeader> {table.getHeaderGroups().map((headerGroup) => ( <TableRow key={headerGroup.id}> {headerGroup.headers.map((header) => ( <TableHead key={header.id} colSpan={header.colSpan} className={cn(header.column.getIsPinned() && "bg-inherit")} style={{ ...getColumnPinningStyle({ column: header.column }), }} > {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} </TableHead> ))} </TableRow> ))} </TableHeader> <TableBody> {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( <TableRow key={row.id} data-state={row.getIsSelected() && "selected"} className={cn( "bg-background", onRowClick ? "cursor-pointer" : undefined, )} onClick={ onRowClick ? () => onRowClick(row.original) : undefined } > {row.getVisibleCells().map((cell) => ( <TableCell key={cell.id} className={cn(cell.column.getIsPinned() && "bg-inherit")} style={{ ...getColumnPinningStyle({ column: cell.column }), }} > {flexRender( cell.column.columnDef.cell, cell.getContext(), )} </TableCell> ))} </TableRow> )) ) : ( <TableRow> <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center" > No results. </TableCell> </TableRow> )} </TableBody> </Table> </div> {showPagination && ( <div className="flex flex-col gap-2.5"> <DataTablePagination table={table} /> {actionBar && table.getFilteredSelectedRowModel().rows.length > 0 && actionBar} </div> )} </div> );}