DataTable

The console's table: a 36px header, 40px rows without lines, numbers right, sorting, resizing, selection, virtualization.

View source

function Logs() {
  const [open, setOpen] = useState<LogRow | null>(null);
  const [n, setN] = useState(60);
  const data = useMemo(() => logs.slice(0, n), [n]);
  return (
    <div className="h-480 w-full overflow-y-auto scrollbar-quiet">
      <DataTable
        aria-label="Request logs"
        data={data}
        columns={columns}
        getRowId={(r) => r.id}
        selectable
        activeRowId={open?.id}
        onRowClick={setOpen}
        rowMenu={(r) => (
          <>
            <Menu.Item icon={icons.openExternal} onClick={() => setOpen(r)}>
              Open request
            </Menu.Item>
            <Menu.Item icon={icons.copy}>Copy request id</Menu.Item>
            <Menu.Item icon={icons.filter}>Filter by {r.model}</Menu.Item>
          </>
        )}
        hasMore={n < logs.length}
        onLoadMore={() => setN((x) => x + 60)}
      />
      <Sheet
        open={!!open}
        onOpenChange={(o) => !o && setOpen(null)}
        title={open ? `${open.method} ${open.endpoint}` : ""}
        subtitle={open?.id}
        size="md"
        modal={false}
      >
        {open && (
          <div className="flex flex-col gap-24">
            <RequestTimeline ttfbMs={open.ttfbMs} totalMs={open.latencyMs} />
            <KeyValue
              items={[
                { label: "Status", value: <StatusCode code={open.status} showText /> },
                { label: "Model", value: open.model, mono: true },
                { label: "Key", value: open.key },
                { label: "Cost", value: `$${open.cost}` },
              ]}
            />
          </div>
        )}
      </Sheet>
    </div>
  );
}

import { DataTable, col } from "@logicplanes/kaeso-ui";

Props

activeRowId
string
The id of a row to show as active (open in a sheet).
aria-label
string
The table's accessible name.
columns
ColumnDef<T, any>[]
The columns, as TanStack Table column definitions.
data
T[]
The rows.
density
"default" | "compact" | "comfortable"
How much room each row gets.
empty
ReactNode
What to show when there are no rows, usually an Empty.
error
ReactNode
The rows failed to load: the table says so where its rows would be and offers Try again (onRetry). Errors are toasts, so the value isn't shown; toast the message where the request fails.
freshRowIds
ReadonlySet<string>
Rows that just arrived (a live list): each shows a fill that fades out over a second.
getRowId
((row: T) => string)
Returns a row's stable id, for selection and keys.
hasMore
boolean
Whether more rows can be loaded.
loading
boolean
Shows skeleton rows while the first page loads.
loadingMore
boolean
Shows that more rows are loading.
manualSorting
boolean
Sorting happens on the server: the data arrives sorted.
onLoadMore
(() => void)
Called to load the next rows.
onRetry
(() => void)
Shows a Retry button when loading failed.
onRowClick
((row: T) => void)
Called when a row is clicked; rows then show that they can be opened.
onSelectionChange
((selection: RowSelectionState) => void)
Called with the selected rows.
onSortingChange
((sorting: SortingState) => void)
Called with the new sort order.
ref
Ref<HTMLDivElement>
A ref to the outer element.
rowMenu
((row: T) => ReactNode)
Items for a row's context menu (right-click).
selectable
boolean
Adds a checkbox to every row.
selection
RowSelectionState
The selected rows, when you control them.
sorting
SortingState
The sort order, when you control it.
stickyFirstColumn
boolean
Keeps the first column in view while scrolling sideways.
virtualizeAbove
number
Above this many rows, only the visible rows are rendered.