Wir sind in einem frühen Stadium — melde dich bei uns!
Scroll-Jacking-Demo

Die Entitäten-Listentabelle

Eine Tabellenkomponente — jede Funktion, die ein Backoffice braucht, null Konfiguration pro Seite

↓ Scrollen, um die Animation zu steuern
Die Entitäten-Listentabelle
Jede Funktion.
Eine Komponente.
Suche, Filter, Sortierung, Auswahl, Paginierung, Vorschau, Bulk-Aktionen, Ansichtsmodi — alles aus einer einzigen metadata-driven Tabelle.
Die Tabelle
Eine Tabelle,
metadata-driven.
Spalten, Typen und Reihenfolge kommen vom Entity-Meta-Endpoint. Setze die Komponente auf jede Seite — sie rendert sich selbst.
Paginierung
Serverseitiges Paging,
eingebaut.
Navigiere große Datensätze ohne alles zu laden. Seitengröße, Gesamtdatensätze und Navigation — alles vom Server verwaltet.
Metadata-BeispielJSON
1{
2 "entity": "customers",
3 "columns": [
4 {
5 "key": "name",
6 "label": "Name",
7 "type": "text",
8 "sticky": true
9 },
10 {
11 "key": "status",
12 "label": "Status",
13 "type": "badge",
14 "options": ["Active", "Lead", …]
15 },
16 … 3 more columns
17 ]
18}
Suche & Filter
Finde alles,
filtere alles.
Globale Suche mit Feld-Scoping, Standardfiltern und einem vollständigen Advanced Builder mit type-aware Operatoren.
Spaltenverwaltung
Deine Spalten,
deine Regeln.
Spalten neu ordnen, ausblenden und fixieren. IANA-Zeitzonen pro Datensatz. Alles pro Benutzer gespeichert.
Auswahl & Seitenübergreifend
Seitenübergreifend auswählen.
Nichts geht verloren.
Auswahlen überleben serverseitige Paginierung. Nur Ausgewählte anzeigen mit clientseitigem Paging. Horizontales Scrollen bleibt über Reloads erhalten.
Sortierung & Zeilen-Aktionen
Sortiere in drei Zuständen.
Handle auf jede Zeile.
Auf, ab, null — ein Drei-Zustands-Zyklus. Zeilen-Aktionen erscheinen beim Hover: Bearbeiten, Vorschau, Duplizieren, Löschen und Custom.
Ansichtsmodi & Löschung
Sieh es deine Art.
Auch die Gelöschten.
Tabelle, Kartenraster oder Kartenliste. Aktiv, gelöscht oder alle umschalten — soft-deleted Zeilen mit roter Optik.
Bulk-Operationen & Vorschau
Handle auf Hunderte.
Inspeziere einen.
Bulk Löschen, Wiederherstellen, Duplizieren und Exportieren. Slide-out Vorschau-Panel mit Vor/Zurück-Navigation.
Eine Tabelle.
Jede Funktion.
Zero Config.
Intro
🔒https://backoffice.acme.org/customers
AC
JD
Europe/Rome
System / Einstellungen / Kunden
E-Mailendet mit.com
Name E-Mail Status
Onboarded Am
Erstellt
Acme Corpinfo@acme.comAktiv16 May 2026, 19:0015 Mar 2024
Globex Inchello@globex.comAktiv16 May 2026, 19:0002 Apr 2024
Initechcontact@initech.comLead16 May 2026, 19:0010 May 2024
Umbrella Coadmin@umbrella.comInaktiv20 Jun 2024
Stark Industriestony@stark.comAktiv01 Jul 2024
1-8 / 247
Seitengröße
1 / 31
System / Settings / Customers
NameE-MailStatusErstellt
Acme Corpinfo@acme.comAktiv15 Mar 2024
Globex Inchello@globex.comAktiv02 Apr 2024
Initechcontact@initech.comLead10 May 2024
Umbrella Coadmin@umbrella.comInaktiv20 Jun 2024
1-25 / 247
Seitengröße
1 / 10
Suchen In
All fields
Code
Vorname
Nachname
Firma
E-Mail
Telefon
UUID
Statusgrund
Adresse
Stadt
Bundesland/Region
Land
PLZ
E-Mailendet mit.com
Erweiterte Filter
Standard
Erweitert
Alle Kriterien
Beliebiges Kriterium
E-Mailendet mit.com
Onboarded At
16 May 2026, 19:00
16 May 2026, 19:00
16 May 2026, 19:00
Spalten
Fixierte Felder
Name
Datenfelder
Code
E-Mail
Status
Telefon
Audit-Felder
Erstellt Am
Erstellt Von
Name
Acme Corp
Globex Inc
Initech
Umbrella Co
Stark Industries
Edit
Duplizieren
Version history
Vorschau
Löschen
NameStatusGelöscht Am
Acme OldGelöscht01 Jun 2024
Beta CorpGelöscht2024-07-15
Vorschau
1 / 124
Fixierte Felder
FirmaAcme Corp
CodeACM-001
Datenfelder
VornameJohn
NachnameDoe
E-Mailinfo@acme.com
Telefon+1 555-0100
StatusAktiv
Audit-Felder
Aktualisiert am16 May 2026, 19:00
Version42
Metadata-driven Rendering
Spalten, Typen und Reihenfolge kommen aus der Entity-Definition. Setze die Tabelle auf jede Seite — sie baut sich selbst.
Serverseitige Paginierung
Navigiere große Datensätze ohne alles zu laden. Der Server verwaltet das Paging — dein Browser sieht nur die aktuelle Seite.
Gesamtdatensätze
Zeigt immer welche Zeilen du ansiehst und wie viele insgesamt existieren. Aktualisiert sich sofort beim Blättern oder Filtern.
Zeilen pro Seite
Wähle, wie viele Zeilen auf den Bildschirm passen. Deine Preferenz wird pro Entity gespeichert.
Suchen-In-Panel
Öffne das rechte Seitenpanel, um die Suche auf bestimmte Spalten einzugrenzen. Alle Textfelder sind standardmäßig enthalten. Deine Auswahl wird pro Entity gespeichert.
Filter & Bulk-Aktionen Toolbar
Eine zweite Toolbar unter der Haupttoolbar. Bulk-Aktionen umschalten, alle Filter löschen oder aktive Filter-Badges überprüfen — alles in einer Zeile.
Alle Filter löschen
Entferne alle aktiven Filter mit einem Klick.
Aktive Filter-Badges
Jedes Badge zeigt ein Feld, Operator und Wert. Klicke das × auf einem Badge, um diesen Filter sofort zu entfernen.
Erweiterte Filter-Builder
Ein rechtes Seitenpanel zum Erstellen komplexer Multi-Condition-Filter, die über die Standardfilter hinausgehen.
Alle Filter zurücksetzen
Lösche alle erweiterten Filter mit einem Klick. Wie Alle löschen in der Toolbar — setzt auf keine angewendeten Filter zurück.
AND / OR Kriterien
Schalte um, ob alle Bedingungen erfüllt sein müssen (AND) oder eine beliebige (OR).
Filter-Vorschau
Jeder aktive Filter wird als lesbare Zeile gezeigt: Feld, Operator und Wert. Bearbeite oder entferne einen einzelnen Filter ohne neu zu beginnen.
Dynamisches Filter-Formular
Wähle ein Feld und das Formular passt sich automatisch an — Operatoren entsprechen dem Spaltentyp und das Wert-Eingabefeld wird zu Date-Picker, Badge-Selektor oder Text-Input.
Standardfilter
Eine einfache Liste aller filterbaren Felder. Jedes Textfeld verwendet einen contains-Operator — tippe eine beliebige Teilzeichenfolge und die Tabelle filtert sofort.
Contains-Operator
Jedes Textfeld filtert mit einem contains-Match. Keine Operator-Auswahl nötig — einfach tippen und Ergebnisse aktualisieren live.
Browser-Zeitzone
Alle Datetime-Werte werden mit deiner Browser-Zeitzone formatiert (in der Topbar gezeigt). Derselbe UTC-Wert wird in allen Zeilen identisch angezeigt.
IANA-Datensatzmodus
Umschalten, um jeden Wert in seiner originalen lokalen Zeitzone zu sehen. Zeiten unterscheiden sich pro Datensatz. Ein Badge zeigt die IANA-Zeitzone, die beim Eintragen lokal war.
Spaltenauswahl
Spalten anzeigen, ausblenden und neu ordnen durch Ziehen innerhalb ihrer Sektion. Reihenfolge ändert sich in Echtzeit. Dein Layout wird gespeichert.
Fixierte Felder
Fixierte Spalten bleiben beim horizontalen Scrollen sichtbar. Die ganz rechte Spalte für Zeilen-Aktionen ist immer fixiert und kann nicht ausgeblendet oder verschoben werden.
Audit-Felder
Audit-Felder verfolgen, wer einen Datensatz erstellt oder geändert hat. Eine Entity kann auditable sein oder nicht — es hängt von der Entity-Definition in den Metadata ab.
Fixierte Spalten
Name (links) und Aktionen (rechts) bleiben beim horizontalen Scrollen sichtbar. Die ganz rechte Aktions-Spalte ist immer fixiert und kann nicht ausgeblendet oder verschoben werden.
Links fixiert
Die Name-Spalte ist in der Spaltenauswahl als fixiert markiert. Sie bleibt am linken Rand fixiert, während andere Spalten darunter scrollen.
Rechts fixiert
Zeilen-Aktionen sind immer am rechten Rand fixiert. Diese Spalte kann nicht ausgeblendet oder neu geordnet werden.
Zeilenauswahl
Klicke Checkboxen, um Zeilen auszuwählen. Deine Auswahl bleibt über serverseitige Paginierung erhalten — ausgewählte Zeilen bleiben ausgewählt, auch wenn du blätterst oder neu lädst.
Alle auswählen
Die Header-Checkbox wählt alle Zeilen der aktuellen Seite gleichzeitig aus oder ab.
Auswahl-Zähler
Der Footer zeigt, wie viele Zeilen ausgewählt sind. Verwende den Toggle, um nur ausgewählte Zeilen mit clientseitigem Paging anzuzeigen.
Sortierung — 3-Zustands-Zyklus
Klicke eine Spalte, um zwischen aufsteigend, absteigend und keine Sortierung zu wechseln. Eine Default-Sortierung aus Metadata wird immer angewendet, wenn keine Benutzer-Sortierung aktiv ist.
Keine Benutzer-Sortierung
Die Default-Sortierung aus den Entity-Metadata wird immer angewendet. Spalten zeigen ein neutrales Pfeil-Icon, bis du klickst.
Aufsteigend
Erster Klick sortiert aufsteigend. Der Pfeil zeigt nach oben und der Spalten-Header wird hervorgehoben.
Absteigend
Zweiter Klick kehrt zu absteigend um. Ein dritter Klick löscht die Benutzer-Sortierung und kehrt zum Metadata-Default zurück.
Zeilen-Aktionen
Bearbeiten, Duplizieren, Versionshistorie, Vorschau, Löschen und Wiederherstellen — plus Custom-Aktionen aus den Entity-Metadata. Jede Aktion ist unter RBAC-Kontrolle. Admin-Level-Aktionen erfordern Step-up MFA-Authentifizierung pro Aktion, bevor sie ausgeführt werden können.
Ansichtsmodi
Wechsle zwischen Tabelle, Kartenraster oder kompakter Liste. Deine Preferenz wird über Sessions gespeichert.
Kartenraster-Ansicht
Jede Zeile wird zu einer Karte in einem responsiven Raster. Gleiche Metadata, Sortierung, Filterung und Auswahl — nur ein anderes Layout.
Kartenansicht-Toolbar
Alle Tabellenfunktionen sind hier noch verfügbar — alle auswählen, nach Spalte sortieren und Sortierrichtung — angepasst für den aktiven Ansichtsmodus. IANA-Zeitzonen-Toggles werden auch automatisch erkannt und für jede Datetime-Spalte gerendert, die sie deklariert.
Kartenlisten-Ansicht
Horizontale Karten stapeln sich vertikal und zeigen mehr Felder pro Karte. Ideal zum Scannen detaillierter Datensätze ohne horizontales Scrollen.
Soft-Deleted Entitäten
Schalte zwischen aktiv, gelöscht und alle Datensätze um. Soft-deleted Zeilen bleiben mit rosafarbenem Hintergrund und gedämpfter Deckkraft erhalten, nie wirklich entfernt bis explizit gepurged.
Nur gelöschte Datensätze
Beim Filter auf gelöscht werden nur soft-deleted Einträge gezeigt. Jede Zeile zeigt rosafarbenen Hintergrund, gedämpfte Deckkraft und ein Gelöscht-Badge mit Lösch-Zeitstempel.
Alle Datensätze
Die Alle-Datensätze-Ansicht vereint aktive und soft-deleted Einträge in einer einzigen Liste. Gelöschte Zeilen bleiben visuell durch ihren rosa Hintergrund unterschieden, leicht zu identifizieren und wiederherzustellen.
Bulk-Aktionen-Modus
Dieselbe Toolbar schaltet in den Bulk-Modus, wenn Zeilen ausgewählt sind. Operiere auf ausgewählte Datensätze — sogar seitenübergreifend — oder auf den gesamten Datensatz, wenn RBAC-Berechtigungen es erlauben. Die Toolbar schaltet automatisch zurück zu Filtern, wenn Filter angewendet werden.
Modus-Umschalter
Klicke, um zwischen Filtern und Bulk-Aktionen zu wechseln. Wenn Zeilen ausgewählt sind, schaltet die Toolbar automatisch in den Bulk-Modus. Wenn Filter angewendet werden, schaltet sie zurück zu Filtern.
Export-Formate
Exportiere ausgewählte Zeilen oder den gesamten Datensatz in XLSX oder CSV — echte server-generierte Dateien, keine clientseitigen Fakes. HTML-Export unterstützt Custom-Templates mit Live-Vorschau, PDF-Generierung und Email-ready-Output.
Datensätze duplizieren
Erstellt eine exakte Kopie des ausgewählten Datensatzes — alle Felder serverseitig über einen einzigen API-Aufruf geklont. Funktioniert mit einer Zeile oder vielen gleichzeitig.
Coming soon
Field-level control: choose which fields to copy, which to exclude, and which to manually set before duplicating.
Vorschau-Panel
Ein in der Größe veränderbares Panel im Tabellenbereich. Inspeziere die vollen Details jeder Zeile, ohne die Liste zu verlassen. Navigiere zwischen Datensätzen mit Vor/Zurück — sogar seitenübergreifend. Bearbeitungsmodus umschalten, Zeilen-Aktionen aufrufen oder schließen — alles vom Header.