List

const List: React.FC<IListProps>

Bedienbare Liste über einer Datenquelle: Tabelle oder Karten, mit Freitextsuche, Spaltenfiltern und Sortierung.

Reihenfolge der Verarbeitung: dataSource() → eigene filter-Funktion → Spaltenfilter → Freitextsuche → Sortierung (eigene sort-Funktion oder die eingebaute, typbewusste).

Während des Ladens erscheinen 5 Skeleton-Zeilen, bei leerem Ergebnis „Keine Einträge gefunden.". Sortier- und Filterauswahl werden im localStorage gemerkt, unter Schlüsseln aus den Spaltenpfaden (akten-sort-…, akten-filter-…) — zwei Listen mit identischen Pfaden teilen sich diesen Zustand.

<List
  dataSource={useFiles}
  columns={[{ path: "title.de", label: "Betreff", width: 2 }]}
  onItemClick={(item) => navigate(item.$apiId)}
/>

Vorschau

Vorschau

Code

import { List } from '@gentics/cockpit/widgets';

const columns = [
  { label: 'Titel', path: 'title', width: 3, hasFilter: true },
  {
    label: 'Status', path: 'status', width: 2, type: 'badge', hasFilter: true,
    badgeConfig: {
      open: { label: 'Offen', color: '#137DFF' },
      done: { label: 'Erledigt', color: '#1A7F37' },
    },
  },
  { label: 'Erstellt', path: 'created', width: 2, type: 'date' },
];

// Im echten Sachbearbeiter-Cockpit einen Query-Hook übergeben:
//   <List columns={columns} dataSource={() => useFiles()} />
<List
  columns={columns}
  dataSource={() => useFiles()}
  defaultSort={{ path: 'created', direction: 'desc' }}
/>

Im Sachbearbeiter-Cockpit verwenden

Suche, Spaltenfilter, Sortierung, Karten-Ansicht und der Klick in die Detailansicht sind samt vollständigem Beispiel mit Navigation unter Erste App bauen → Die Liste beschrieben; woher die Daten kommen, steht unter Datenquellen.

Props

Props für das List Component.

Properties

cardsClassName?

optional cardsClassName?: string

Nur in viewMode="cards": zusätzliche Klassen für den Karten-Container.

---

className?

optional className?: string

Klassen für den äußeren Container — er umfasst Suchleiste und Liste.

---

columns

columns: IListColumns[]

Spalten in Anzeigereihenfolge. In viewMode="cards" wird die erste Spalte zur Kartenüberschrift, die übrigen zu Label-Wert-Zeilen.

---

dataSource

dataSource: () => UseQueryResult<any[], Error>

Datenquelle als Query-Funktion. Wird bei jedem Render aufgerufen; die Liste liest daraus data (ein Array), isPending und isPlaceholderData.

Weil in der Funktion Hooks stecken, gelten die Hook-Regeln: immer dieselben Hooks in derselben Reihenfolge, keine bedingten Aufrufe.

Returns

UseQueryResult<any[], Error>

---

defaultSort?

optional defaultSort?: object

Startsortierung. Greift nur, solange für diese Spaltenkombination noch keine Sortierung im localStorage liegt — eine Klick-Sortierung des Users hat also Vorrang. Ohne Angabe wird nach der ersten Spalte aufsteigend sortiert.

direction

direction: "asc" | "desc"

Richtung: "asc" aufsteigend, "desc" absteigend.

path

path: string

Pfad der Spalte, nach der sortiert wird (wie IListColumns.path).

---

filter?

optional filter?: (item) => boolean

Optionale benutzerdefinierte Filterfunktion zum Filtern von Elementen vor anderen Filtern

Parameters

item

any

Returns

boolean

---

hideSearch?

optional hideSearch?: boolean

Blendet die komplette Leiste über der Liste aus — Freitextsuche und Spaltenfilter, da beide in derselben Zeile sitzen.

---

isLoading?

optional isLoading?: boolean

Optionales Loading-Override

---

onItemClick?

optional onItemClick?: (item) => void

Optionaler Click-Handler für Listenelemente

Parameters

item

any

Returns

void

---

renderItem?

optional renderItem?: (item) => ReactNode

Nur in viewMode="cards": rendert eine Karte komplett selbst und ersetzt damit die Standardkarte. Achtung — der Klick-Wrapper entfällt dabei, onItemClick wird also nicht mehr automatisch ausgelöst; verdrahte den Klick in diesem Fall selbst.

Parameters

item

any

Returns

ReactNode

---

sort?

optional sort?: (a, b) => number

Optionale benutzerdefinierte Sortierfunktion zum Überschreiben der Standardsortierung

Parameters

a

any

b

any

Returns

number

---

style?

optional style?: CSSProperties

Inline-Styles für denselben äußeren Container.

---

viewMode?

optional viewMode?: "table" | "cards"

Darstellung: "table" (Default) rendert eine Tabelle mit sortierbaren Spaltenköpfen, "cards" eine Karte pro Datensatz.

IListColumns

Die Spaltenkonfiguration stammt aus @gentics/cockpit/core (nicht Teil des Widgets-Entrypoints) und ist daher hier manuell aufgeführt:

Feld	Typ	Beschreibung
label	string	Spaltenüberschrift.
path	string	JSON-Pfad zum Wert (z. B. "user.name").
width	number	Relative Breite (Flex-Faktor).
type	'text' | 'date' | 'badge' | 'custom'	Zellendarstellung.
hasFilter	boolean	Spaltenfilter anzeigen.
badgeConfig	Record<string, …>	Farb-/Label-Zuordnung bei type: 'badge'.
dateFormat	string	Datumsformat bei type: 'date'.

createList

createList(dataSource): FC<BoundListProps>

Factory: erzeugt eine List-Variante mit fest verdrahteter dataSource.

Der Aufruf gehört auf Modulebene. Innerhalb einer Render-Funktion entstünde bei jedem Render ein neuer Komponententyp, wodurch React den Teilbaum neu aufbaut und dessen State verliert.

Braucht die Quelle einen Parameter, holt sie ihn selbst — sie ist ein Hook und darf useParams, Context o. Ä. verwenden.

Parameters

dataSource

() => UseQueryResult<any[], Error>

Query-Funktion, die für jede Instanz verwendet wird.

Returns

FC<BoundListProps>

Eine Komponente, die alle BoundListProps annimmt.

Example

const AktenListe = createList(useFiles);
<AktenListe columns={columns} />