DataTable

Die Tabelle der Konsole: 36px Kopf, 40px Zeilen ohne Linien, Zahlen rechts, Sortieren, Größe ändern, Auswahl, Virtualisierung.

Quelltext

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
Die ID einer Zeile, die als aktiv gilt (in einem Sheet geöffnet).
aria-label
string
Der zugängliche Name der Tabelle.
columns
ColumnDef<T, any>[]
Die Spalten, als Spaltendefinitionen von TanStack Table.
data
T[]
Die Zeilen.
density
"default" | "compact" | "comfortable"
Wie viel Platz jede Zeile bekommt.
empty
ReactNode
Was angezeigt wird, wenn es keine Zeilen gibt, meist ein Empty.
error
ReactNode
Die Zeilen ließen sich nicht laden: Die Tabelle sagt es dort, wo ihre Zeilen stünden, und bietet „Erneut versuchen“ an (onRetry). Fehler sind Toasts, daher wird der Wert nicht angezeigt; zeige die Meldung dort als Toast, wo die Anfrage fehlschlägt.
freshRowIds
ReadonlySet<string>
Gerade eingetroffene Zeilen (eine Live-Liste): Jede zeigt eine Fläche, die über eine Sekunde ausblendet.
getRowId
((row: T) => string)
Gibt die stabile ID einer Zeile zurück, für Auswahl und Schlüssel.
hasMore
boolean
Ob sich weitere Zeilen laden lassen.
loading
boolean
Zeigt Skelettzeilen, während die erste Seite lädt.
loadingMore
boolean
Zeigt, dass weitere Zeilen geladen werden.
manualSorting
boolean
Sortiert wird auf dem Server: Die Daten kommen sortiert an.
onLoadMore
(() => void)
Wird aufgerufen, um die nächsten Zeilen zu laden.
onRetry
(() => void)
Zeigt einen Button „Erneut versuchen“, wenn das Laden fehlschlug.
onRowClick
((row: T) => void)
Wird beim Klick auf eine Zeile aufgerufen; die Zeilen zeigen dann, dass sie sich öffnen lassen.
onSelectionChange
((selection: RowSelectionState) => void)
Wird mit den ausgewählten Zeilen aufgerufen.
onSortingChange
((sorting: SortingState) => void)
Wird mit der neuen Sortierung aufgerufen.
ref
Ref<HTMLDivElement>
Eine Ref auf das äußere Element.
rowMenu
((row: T) => ReactNode)
Einträge für das Kontextmenü einer Zeile (Rechtsklick).
selectable
boolean
Ergänzt jede Zeile um ein Kontrollkästchen.
selection
RowSelectionState
Die ausgewählten Zeilen, bei gesteuerter Auswahl.
sorting
SortingState
Die Sortierung, bei gesteuerter Sortierung.
stickyFirstColumn
boolean
Hält die erste Spalte beim seitlichen Scrollen sichtbar.
virtualizeAbove
number
Ab dieser Zeilenzahl werden nur die sichtbaren Zeilen gerendert.