diff --git a/components/data-display.html b/components/data-display.html index 40e86b3..8566df6 100644 --- a/components/data-display.html +++ b/components/data-display.html @@ -72,5 +72,106 @@ + +
+ +

Component: Large Table

+ +
+
+
Large Table
+
+ +
+
Spalte 1
+
Spalte 2
+
Spalte 3
+
Spalte 4
+
Spalte 5
+
+ +
+
A1
+
B1
+
C1
+
D1
+
E1
+
+ +
+
A2
+
B2
+
C2
+
D2
+
E2
+
+ +
+
A3
+
B3
+
C3
+
D3
+
E3
+
+ +
+
A4
+
B4
+
C4
+
D4
+
E4
+
+ +
+
A5
+
B5
+
C5
+
D5
+
E5
+
+ +
+
A6
+
B6
+
C6
+
D6
+
E6
+
+ +
+
A7
+
B7
+
C7
+
D7
+
E7
+
+ +
+
A8
+
B8
+
C8
+
D8
+
E8
+
+ +
+
A9
+
B9
+
C9
+
D9
+
E9
+
+ +
+
A10
+
B10
+
C10
+
D10
+
E10
+
+
+ +
+ diff --git a/styles/42-components-data-display.css b/styles/42-components-data-display.css index bf6af2a..1b57a44 100644 --- a/styles/42-components-data-display.css +++ b/styles/42-components-data-display.css @@ -67,3 +67,26 @@ background: var(--surface-data-table-help-icon); } +.sg-large-table { + width: 100%; +} + +.sg-large-table__row { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + align-items: stretch; + gap: 0; + width: 100%; +} + +.sg-large-table__row--header { + font-weight: var(--font-weight-semibold); +} + +.sg-large-table__cell { + min-width: 0; + padding: 0 var(--spacing-small); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +}