Add large table component preview
This commit is contained in:
@@ -72,5 +72,106 @@
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Component: Large Table -->
|
||||||
|
<section id="component-large-table">
|
||||||
|
|
||||||
|
<p class="sg-preview-label">Component: Large Table</p>
|
||||||
|
|
||||||
|
<article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="large-table-header">
|
||||||
|
<div class="sg-strong">Large Table</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
|
||||||
|
<div class="sg-large-table__cell" role="columnheader">Spalte 1</div>
|
||||||
|
<div class="sg-large-table__cell" role="columnheader">Spalte 2</div>
|
||||||
|
<div class="sg-large-table__cell" role="columnheader">Spalte 3</div>
|
||||||
|
<div class="sg-large-table__cell" role="columnheader">Spalte 4</div>
|
||||||
|
<div class="sg-large-table__cell" role="columnheader">Spalte 5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A1</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B1</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C1</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D1</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E1</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A2</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B2</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C2</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D2</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E2</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A3</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B3</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C3</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D3</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A4</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B4</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C4</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D4</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A5</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B5</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C5</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D5</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A6</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B6</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C6</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D6</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A7</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B7</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C7</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D7</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E7</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A8</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B8</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C8</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D8</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E8</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A9</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B9</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C9</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D9</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E9</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
|
||||||
|
<div class="sg-large-table__cell" role="cell">A10</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">B10</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">C10</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">D10</div>
|
||||||
|
<div class="sg-large-table__cell" role="cell">E10</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -67,3 +67,26 @@
|
|||||||
background: var(--surface-data-table-help-icon);
|
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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user