Data table Download - Data table Quellcode herunterladen

Data table

Anderer Quellcode

1.0.0

Herunterladen

Datentabelle

Dies ist eine Datentabelle, die mit Shadcn UI -Komponenten und TanStack -Tabelle erstellt wurde.

Tanstack-Tisch
Shadcn-ui

Die Tabelle wurde nach dem ausgezeichneten Tutorial und Beispielen für die Shadcn -Dokumentation erstellt und erweitert.

Screenshot

Konfiguration

Das Projekt basiert auf React-Vite und verwendet TypeScript .

React Vite installieren und Anweisungen befolgen. Erstellen Sie das Projekt:

 $ npm create vite@latest

Installieren Sie Shadcn und Tailwind: Befolgen Sie die Anweisungen für Anweisungen
Jede Shadcn -Komponente wird dann separat installiert:

 $ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button

Daten

Die Tabelle zeigt eine fiktive Liste von Mitarbeitern.

Daten sind einfach gefälschte Daten in einem Array im Projekt selbst, anstatt aus einer realen Datenbank abgerufen zu werden.

Merkmale

Dies sind Merkmale der Tabelle:

Symbolleiste:

Suchfeld: Dynamische Suche nach Namen.
Facettenfilter: Filterung nach Spaltenwerten ( Ort , Status ); Die Werte werden basierend auf Spaltenwerten dynamisch aufgeführt.
- Filter -Tags zum Anzeigen von aktiven Filtern und Löschen von Filtern - Taste.
Sichtbarkeit der Spalten: Eine Schaltfläche zur Auswahl, welche Spalten sichtbar sind.
Zurücksetzen: Löscht alle Filter und Auswahl.

TISCH:

Sortierung: Ausgewählte Spalten können aufsteigend oder absteigend sortiert werden.
Zeilenwählen: Das Kontrollkästchen der ersten Spalte wählt die Zeile aus.
Dropdown für zusätzliche Aktionen: Jede Zeile zeigt zusätzliche Aktionen am Ende der Zeile an. Nur die erste ist derzeit funktional und kopiert die Mitarbeiter-ID in die Zwischenablage und zeigt einen Toast-Message an.
Spaltenrekorder: Die letzte Zeile verfügt über Pfeile, die Spalten nach rechts oder links verschieben.

FUSSZEILE:

Informationen zu ausgewählten Zeilen : Zeigt an, wie viele Zeilen ausgewählt wurden.
Dynamische Zeilen pro Seite Schaltfläche : Die Verwendung kann die Zeilen pro Seite durch Schritte von 5 erhöhen oder verringern.
Paginierungsschaltflächen : Vorwärts, rückwärts, um die letzte oder erste Seite voranzutreiben.

Spaltensichtbarkeit: Screenshot

Facettenfilter Dropdown:

Filter -Tags und Schaltfläche Löschen:

Weitere Aktionen:

Fußzeile:
Screenshot

Struktur?

Der Tisch besteht aus 3 Hauptteilen:

Seitenkomponente, die Daten abrufen und die Tabellenkomponente rendern.
Tabellenkomponente.
Spaltenvariable, die die Struktur und das Styling einzelner Spalteninhalte enthält.

Wiederverwendbare Komponenten:

Pagination ist die Komponente und kann für andere Tabellen wiederverwendet werden.
Die facettierten Filter benötigen einen langen Code und sind in seine eigene Komponente unterteilt. Es kann für andere Tische wiederverwendet werden.
Little Pop-up-Toast ist seine eigene wiederverwendbare Komponente.

Nächste Schritte ?

➡️ Die Tabellenkomponente in eine wiederverwendbare Zusammenfassung und teilen Sie sie in kleinere Komponenten auf.

➡️ Einführen Sie den Kontext ein, um das Übergeben von Tabellendaten als Prop -> Leichter zu verarbeiten Datenmanipulationsmethoden, da diese in verschiedenen Komponenten auftreten können.