List

44px-Zeilen auf dem Panel, ohne Linien, Metadaten rechts, Gruppenköpfe, Tastatur zuerst.

checkout-websk-kso-AbC123…wxyzInferencevor 8 Min.

checkout-workersk-kso-Xm91Lq…4f2aInferencevor 22 Min.

ci-runnersk-kso-Pz0Tt7…91cdPlatformvor 16 Std.

stagingsk-kso-Hq55Ra…0b7eInference2. Okt.

load-testsk-kso-Ty8Kc2…aa31Inference18. Sept.

<div className="w-full">
      <List
        aria-label="Keys"
        groups={groups}
        selectable
        selectionActions={
          <>
            <SelectionAction icon={icons.copy}>Copy ids</SelectionAction>
            <SelectionAction icon={icons.hide}>Disable</SelectionAction>
            <SelectionAction icon={icons.delete} danger>
              Delete
            </SelectionAction>
          </>
        }
      />
    </div>

import { List, ListRow, GroupHeader } from "@logicplanes/kaeso-ui";

Props

aria-label
string
Der zugängliche Name der Liste.
data-force-row
string
Erzwingt einen Zustand auf der ersten Zeile für Zustandsmatrizen: hover, focus, selected.
density
"default" | "compact" = default
Wie viel Platz jede Zeile bekommt.
empty
ReactNode
Wird gezeigt, wenn es keine Zeilen gibt und die Liste nicht lädt: meist ein Empty (size="md" in einer Einstellungsspalte, wo es in der Karte der Liste sitzt; size="compact" auf einer randlosen Seite).
groups
ListGroup[]
…Zeilen unter Gruppenköpfen.
idWidth
48 | 64 | 80 | 96 | 120
Eine feste Breite für die ID-Spalte, wenn IDs unterschiedlich lang sind, damit die Titel fluchten. Standardmäßig nimmt die ID ihre eigene Breite.
items
ListItemData[]
Zeilen ohne Gruppen, oder…
loading
boolean
Ladezeilen in der Form der Einträge, solange die Zeilen noch nicht bekannt sind.
onOpen
((item: ListItemData) => void)
Wird aufgerufen, wenn eine Zeile per Klick oder Eingabetaste geöffnet wird. Die Eingabetaste mit ⌘ oder Strg bleibt dem umgebenden Formular überlassen.
onSelectedChange
((selected: Set<string>) => void)
Wird mit den ausgewählten Zeilen aufgerufen; die Zeilen bekommen dann Kontrollkästchen.
selectable
boolean
Auswahl: Kontrollkästchen erscheinen beim Überfahren und auf jeder Zeile, sobald etwas ausgewählt ist.
selected
Set<string>
Die IDs der ausgewählten Zeilen.
selectionActions
ReactNode
Aktionen in der schwebenden Auswahlleiste.
selectionBar
boolean = true
Die schwebende Auswahlleiste; aus, wo der Host die Anzahl selbst zeigt, etwa in einem Dialog.
virtualizeAbove
number = 100
Ab so vielen Zeilen virtualisieren (100).