Sample für Tabellen mit horizontalem Scrollen

[laske185]

Wir benötigen ein weiteres Sample in der react-sample App, welches den typischen Aufbau einer Anwendung demonstriert.

Die Anwendung soll eine große Tabelle mit vielen Spalten beinhalten. Dafür wird das horizontale Scrollen der Tabelle demonstriert. Dabei soll die Tabelle immer die komplette Breite des äußeren Containers einnehmen und intern horizontal scrollen, damit man alle Spalten sehen kann.

Die Tabelle sollte genug Spalten besitzen, damit sie horizontal scrollen kann. Bei jeder Spalte kann in der Header-Definition die Breite der Spalte angegeben werden, z. B. mit 10em. Dies soll in der Sampel gesetzt werden. An der Tabelle selbst muss die _minWidth gesetzt werden, beispielsweise mit 150em.

Die Tabelle soll innerhalb eines Tab-Controls (ein Tab genügt) platziert werden. Dieses wiederum soll sich die Seite mit einer Navigation teilen. Das Breitenverhältnis ist 1:2.

Akzeptanzkriterien

• Das Sample ist angelegt
• Platzierung im Projekt react-samples unterhalb der Szenarios
• Die Navigation nimmt die linke Seite der View ein
• Die Tabelle nimmt die komplette Breite des Tab-Panels ein und scrollt horizontal (bei HD-Auflösung)
• Das Tab-Panel rechts neben der Navigation den verfügbaren Platz in der View komplett ein

[Makko74]

Um das Sample zu verbessern wird folgende Dinge noch benötigt:

Ein Event in der KolNav um auf Collapsed Änderung reagieren zu können ( css var die das css grid steuert)

Das KolTab hat eine display grid und steht auf 1fr, was die dynamische Breitenerkennung etwas behindert, im gegensatz zu flex und block. Des Wegen ist momentan die Table nicht direkt im Tab drin