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.
7.5 kB · 215 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216"use client";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@openstatus/ui/components/ui/table";import { type ColumnDef, type ColumnFiltersState, type PaginationState, type Row, type SortingState, type VisibilityState, flexRender, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable,} from "@tanstack/react-table";import * as React from "react";import { Fragment } from "react";
import type { DataTableActionBarProps } from "./data-table-action-bar";import type { DataTablePaginationProps } from "./data-table-pagination";import type { DataTableToolbarProps } from "./data-table-toobar";
export interface DataTableProps<TData, TValue> { columns: ColumnDef<TData, TValue>[]; data: TData[]; rowComponent?: React.ComponentType<{ row: Row<TData> }>; toolbarComponent?: React.ComponentType<DataTableToolbarProps<TData>>; actionBar?: React.ComponentType<DataTableActionBarProps<TData>>; paginationComponent?: React.ComponentType<DataTablePaginationProps<TData>>; onRowClick?: (row: Row<TData>) => void; defaultSorting?: SortingState; defaultColumnVisibility?: VisibilityState; defaultColumnFilters?: ColumnFiltersState; defaultPagination?: PaginationState; autoResetPageIndex?: boolean;
/** access the state from the parent component */ columnFilters?: ColumnFiltersState; setColumnFilters?: React.Dispatch<React.SetStateAction<ColumnFiltersState>>; sorting?: SortingState; setSorting?: React.Dispatch<React.SetStateAction<SortingState>>; pagination?: PaginationState; setPagination?: React.Dispatch<React.SetStateAction<PaginationState>>; columnVisibility?: VisibilityState; setColumnVisibility?: React.Dispatch<React.SetStateAction<VisibilityState>>;}
export function DataTable<TData, TValue>({ columns, data, rowComponent, toolbarComponent, actionBar, paginationComponent, onRowClick, defaultSorting = [], defaultColumnVisibility = {}, defaultColumnFilters = [], defaultPagination = { pageIndex: 0, pageSize: 20 }, autoResetPageIndex = true, columnFilters, setColumnFilters, sorting, setSorting, pagination, setPagination, columnVisibility, setColumnVisibility,}: DataTableProps<TData, TValue>) { // oxlint-disable-next-line typescript/no-explicit-any const [globalFilter, setGlobalFilter] = React.useState<any>(); const [rowSelection, setRowSelection] = React.useState({}); const [internalColumnVisibility, setInternalColumnVisibility] = React.useState<VisibilityState>(defaultColumnVisibility); const [internalPagination, setInternalPagination] = React.useState<PaginationState>(defaultPagination); const [internalColumnFilters, setInternalColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters); const [internalSorting, setInternalSorting] = React.useState<SortingState>(defaultSorting);
// Use controlled or uncontrolled column filters const columnFiltersState = columnFilters ?? internalColumnFilters; const setColumnFiltersState = setColumnFilters ?? setInternalColumnFilters; const sortingState = sorting ?? internalSorting; const setSortingState = setSorting ?? setInternalSorting; const paginationState = pagination ?? internalPagination; const setPaginationState = setPagination ?? setInternalPagination; const columnVisibilityState = columnVisibility ?? internalColumnVisibility; const setColumnVisibilityState = setColumnVisibility ?? setInternalColumnVisibility;
const table = useReactTable({ data, columns, state: { sorting: sortingState, columnVisibility: columnVisibilityState, rowSelection, pagination: paginationState, columnFilters: columnFiltersState, globalFilter, }, enableRowSelection: true, onRowSelectionChange: setRowSelection, onSortingChange: setSortingState, onColumnFiltersChange: setColumnFiltersState, onColumnVisibilityChange: setColumnVisibilityState, onPaginationChange: setPaginationState, onGlobalFilterChange: setGlobalFilter, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), getExpandedRowModel: getExpandedRowModel(), autoResetPageIndex, // @ts-expect-error as we have an id in the data getRowCanExpand: (row) => Boolean(row.original.id), });
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.getIsSelected() || 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"> No results. </TableCell> </TableRow> )} </TableBody> {actionBar ? React.createElement(actionBar, { table }) : null} </Table> {paginationComponent ? React.createElement(paginationComponent, { table }) : null} </div> );}