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.
1.8 kB · 59 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960"use client";
import { Button } from "@openstatus/ui/components/ui/button";import { Input } from "@openstatus/ui/components/ui/input";import type { Table } from "@tanstack/react-table";import { X } from "lucide-react";
import { DataTableFacetedFilter } from "@/components/ui/data-table/data-table-faceted-filter";import { DataTableViewOptions } from "@/components/ui/data-table/data-table-view-options";
export interface DataTableToolbarProps<TData> { table: Table<TData>;}
export function DataTableToolbar<TData>({ table,}: DataTableToolbarProps<TData>) { const isFiltered = table.getState().columnFilters.length > 0;
return ( <div className="flex items-center justify-between"> <div className="flex flex-1 items-center space-x-2"> <Input placeholder="Filter entries..." value={(table.getColumn("title")?.getFilterValue() as string) ?? ""} onChange={(event) => table.getColumn("title")?.setFilterValue(event.target.value) } className="h-8 w-[150px] lg:w-[250px]" /> {table.getColumn("status") && ( <DataTableFacetedFilter column={table.getColumn("status")} title="Status" options={[]} /> )} {table.getColumn("tags") && ( <DataTableFacetedFilter column={table.getColumn("tags")} title="Tags" options={[]} /> )} {isFiltered && ( <Button variant="ghost" onClick={() => table.resetColumnFilters()} className="h-8 px-2 lg:px-3" > Reset <X /> </Button> )} </div> <DataTableViewOptions table={table} /> </div> );}