Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
4.3 kB · 147 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148"use client";"use no memo";
import type { Column, Table } from "@tanstack/react-table";import { X } from "lucide-react";import * as React from "react";
import { DataTableDateFilter } from "@/components/data-table/data-table-date-filter";import { DataTableFacetedFilter } from "@/components/data-table/data-table-faceted-filter";import { DataTableSliderFilter } from "@/components/data-table/data-table-slider-filter";import { DataTableViewOptions } from "@/components/data-table/data-table-view-options";import { Button } from "@/components/ui/button";import { Input } from "@/components/ui/input";import { cn } from "@/lib/utils";
interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> { table: Table<TData>;}
export function DataTableToolbar<TData>({ table, children, className, ...props}: DataTableToolbarProps<TData>) { const isFiltered = table.getState().columnFilters.length > 0;
const columns = table.getAllColumns().filter((column) => column.getCanFilter());
const onReset = React.useCallback(() => { table.resetColumnFilters(); }, [table]);
return ( <div role="toolbar" aria-orientation="horizontal" className={cn( "flex w-full items-start justify-between gap-2 p-1", className, )} {...props} > <div className="flex flex-1 flex-wrap items-center gap-2"> {columns.map((column) => ( <DataTableToolbarFilter key={column.id} column={column} /> ))} {isFiltered && ( <Button aria-label="Reset filters" variant="outline" size="sm" className="border-dashed" onClick={onReset} > <X /> Reset </Button> )} </div> <div className="flex items-center gap-2"> {children} <DataTableViewOptions table={table} align="end" /> </div> </div> );}interface DataTableToolbarFilterProps<TData> { column: Column<TData>;}
function DataTableToolbarFilter<TData>({ column,}: DataTableToolbarFilterProps<TData>) { { const columnMeta = column.columnDef.meta;
const onFilterRender = React.useCallback(() => { if (!columnMeta?.variant) return null;
switch (columnMeta.variant) { case "text": return ( <Input placeholder={columnMeta.placeholder ?? columnMeta.label} value={(column.getFilterValue() as string) ?? ""} onChange={(event) => column.setFilterValue(event.target.value)} className="h-8 w-40 lg:w-56" /> );
case "number": return ( <div className="relative"> <Input type="number" inputMode="numeric" placeholder={columnMeta.placeholder ?? columnMeta.label} value={(column.getFilterValue() as string) ?? ""} onChange={(event) => column.setFilterValue(event.target.value)} className={cn("h-8 w-[120px]", columnMeta.unit && "pr-8")} /> {columnMeta.unit && ( <span className="absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm"> {columnMeta.unit} </span> )} </div> );
case "range": return ( <DataTableSliderFilter column={column} title={columnMeta.label ?? column.id} /> );
case "date": case "dateRange": return ( <DataTableDateFilter column={column} title={columnMeta.label ?? column.id} multiple={columnMeta.variant === "dateRange"} /> );
case "select": case "multiSelect": return ( <DataTableFacetedFilter column={column} title={columnMeta.label ?? column.id} options={columnMeta.options ?? []} multiple={columnMeta.variant === "multiSelect"} /> );
default: return null; } }, [column, columnMeta]);
return onFilterRender(); }}