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 · 158 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159"use client";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@openstatus/ui/components/ui/table";import { type ColumnDef, type ColumnFiltersState, type Row, type SortingState, type VisibilityState, flexRender, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable,} from "@tanstack/react-table";import * as React from "react";import { Fragment } from "react";
interface DataTableToolbarProps<TData> { table: import("@tanstack/react-table").Table<TData>;}
// trimmed port of apps/dashboard data-table: no pagination/action bar —// play tools render a fixed, small set of rowsinterface DataTableProps<TData, TValue> { columns: ColumnDef<TData, TValue>[]; data: TData[]; rowComponent?: React.ComponentType<{ row: Row<TData> }>; toolbarComponent?: React.ComponentType<DataTableToolbarProps<TData>>; onRowClick?: (row: Row<TData>) => void; defaultSorting?: SortingState; defaultColumnVisibility?: VisibilityState; defaultColumnFilters?: ColumnFiltersState; emptyState?: React.ReactNode;}
export function DataTable<TData, TValue>({ columns, data, rowComponent, toolbarComponent, onRowClick, defaultSorting = [], defaultColumnVisibility = {}, defaultColumnFilters = [], emptyState = "No results.",}: DataTableProps<TData, TValue>) { const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(defaultColumnVisibility); const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters); const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);
const table = useReactTable({ data, columns, state: { sorting, columnVisibility, columnFilters, }, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), getExpandedRowModel: getExpandedRowModel(), getRowCanExpand: () => Boolean(rowComponent), });
return ( <div className="grid gap-2"> {toolbarComponent ? React.createElement(toolbarComponent, { table }) : null} <Table> <TableHeader> {table.getHeaderGroups().map((headerGroup) => ( <TableRow key={headerGroup.id}> {headerGroup.headers.map((header) => { return ( <TableHead key={header.id} colSpan={header.colSpan} className={header.column.columnDef.meta?.headerClassName} > {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} </TableHead> ); })} </TableRow> ))} </TableHeader> <TableBody> {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( <Fragment key={row.id}> <TableRow data-state={row.getIsExpanded() && "selected"} onClick={() => onRowClick?.(row)} className="data-[state=selected]:bg-muted/50" > {row.getVisibleCells().map((cell) => ( <TableCell key={cell.id} className={cell.column.columnDef.meta?.cellClassName} > {flexRender( cell.column.columnDef.cell, cell.getContext(), )} </TableCell> ))} </TableRow> {row.getIsExpanded() && ( <TableRow className="hover:bg-background"> <TableCell className="p-0" colSpan={row.getVisibleCells().length} > {rowComponent ? React.createElement(rowComponent, { row }) : null} </TableCell> </TableRow> )} </Fragment> )) ) : ( <TableRow> <TableCell colSpan={columns.length} className="h-24 text-center"> {emptyState} </TableCell> </TableRow> )} </TableBody> </Table> </div> );}