Datentabellen mit Sortierung, Filter und Seiten
Tabellen, die lesbar bleiben: Suche, Filter, Auswahl, Sortierung, Seiten und Details. Telefone bekommen eine kompakte Liste.
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Tabellen, die lesbar bleiben
Die Datentabelle ist das Arbeitspferd jedes Backoffice. Die sechs Tabellen hier behalten echtes Tabellen-Markup mit Kopfzellen für Screenreader, sortieren und filtern im Client und werden am Handy zu einer kompakten Liste, statt seitlich zu scrollen.
„Schlicht“ zeigt eine kurze Liste von Einträgen. „Suche und Filter“ ergänzt Suchfeld und Filter-Chips für größere Mengen. „Auswahl“ lässt Zeilen anhaken und mehrere zugleich bearbeiten, mit einer Leiste, die die Anzahl zeigt. „Sortierbar mit Seiten“ trägt Hunderte Zeilen, „Kompakt“ bringt mehr auf den Bildschirm, für Profis, „Aufklappbare Zeilen“ öffnet Details unter einer Zeile, ohne die Seite zu verlassen.
Richte Zahlen rechts und Text links aus und stell Einheiten in den Kopf statt in jede Zelle. Sortiere standardmäßig nach der Spalte, die am meisten gebraucht wird. Bei Tausenden Zeilen sortierst und blätterst du auf dem Server, die Tabellen nehmen aktuelle Seite und Gesamtzahl als Props.
Details
Was Datentabelle mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- App
- Variants
- 6
- Version
- 1.0.0 · seit 1.0.0
- Datei
- components/ui/data-table.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 23 eigene Texte
- Studio
- Im Code anpassen
- In Sammlungen
- App-Dashboard
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle DataTableProps aus components/ui/data-table.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
idPflichtstring
Eingebaute Texte
Diese Texte schreibt Datentabelle selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 23 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| search | Englisch Search | Deutsch Suchen |
| clear | Englisch Clear search | Deutsch Suche leeren |
| all | Englisch All | Deutsch Alle |
| results | Englisch {n} results | Deutsch {n} Treffer |
| result | Englisch 1 result | Deutsch 1 Treffer |
| empty | Englisch Nothing matches “{q}”. | Deutsch Nichts passt zu „{q}“. |
| emptyHint | Englisch Try another word or reset the filters. | Deutsch Versuch ein anderes Wort oder setz die Filter zurück. |
| reset | Englisch Reset filters | Deutsch Filter zurücksetzen |
| selectAll | Englisch Select all rows | Deutsch Alle Zeilen auswählen |
| selectRow | Englisch Select {name} | Deutsch {name} auswählen |
| selected | Englisch {n} selected | Deutsch {n} ausgewählt |
| clearSelection | Englisch Clear selection | Deutsch Auswahl aufheben |
| sortAsc | Englisch Sort ascending | Deutsch Aufsteigend sortieren |
| sortDesc | Englisch Sort descending | Deutsch Absteigend sortieren |
| showing | Englisch {from} to {to} of {total} | Deutsch {from} bis {to} von {total} |
| prev | Englisch Previous page | Deutsch Vorherige Seite |
| next | Englisch Next page | Deutsch Nächste Seite |
| page | Englisch Page {n} | Deutsch Seite {n} |
| perPage | Englisch Rows per page | Deutsch Zeilen je Seite |
| expand | Englisch Show details for {name} | Deutsch Details zu {name} zeigen |
| collapse | Englisch Hide details for {name} | Deutsch Details zu {name} verbergen |
| total | Englisch Total | Deutsch Summe |
| details | Englisch Details | Deutsch Details |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Datentabelle reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
- Setzt aria-checked, aria-controls, aria-current, aria-expanded, aria-label, aria-live und aria-sort, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen radio, radiogroup und region.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Jedes Feld hat ein Label, sichtbar oder für Screenreader.
- Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
- Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.
Bewegung
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Datentabelle?
Mit aiw add @ai-website/data-table. Der Befehl legt die Datei components/ui/data-table.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button und icon. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Datentabelle?
6 Varianten, Schlicht, Suche und Filter, Auswahl, Sortierbar mit Seiten, Kompakt und Aufklappbare Zeilen. Du wählst sie mit der Prop variant, zum Beispiel variant="search-filter".
Kann ich die Texte von Datentabelle übersetzen?
Ja. Datentabelle bringt 23 eigene Texte auf Deutsch und Englisch mit, etwa „Suchen“, „Suche leeren“ und „Alle“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Datentabelle einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Datentabelle mit aiw_components und installieren sie mit aiw_add @ai-website/data-table. Nenn im Prompt die Variante, etwa variant="simple", dann schreibt der Assistent deine Inhalte direkt in die Props.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus App, demselben Bereich des Kits.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Tables stehen.
Quellcode lädt