feat: add optional large table column resizing
This commit is contained in:
gitea_admin committed
1 parent
4edff9e222
commit
f21c0a140f
3 files changed
+311
-7
No files matched your search
@@ -77,8 +77,9 @@
|
||||
|
||||
<p class="sg-preview-label">Component: Large Table</p>
|
||||
<p>Suche, Sortierung und „Mehr laden“ sind hier Demo-Markup. Produktions-Implementierungen müssen Treffer serverseitig neu rendern.</p>
|
||||
<p>Optionale Spaltenbreiten-Anpassung: <code>data-column-resize="true"</code> aktiviert die Funktion. Die Tabelle benötigt dafür eine stabile, portalweit eindeutige <code>data-column-resize-key</code>. Die Header-Zellen können mit <code>data-default-width</code> (Prozent, Pixel oder relative <code>fr</code>-Werte) und die Tabelle mit <code>data-column-min-width</code> konfiguriert werden. Die Runtime wird nach dynamischem Nachladen über <code>window.sgInitLargeTableColumnResize({ root })</code> erneut aufgerufen. Gespeicherte Werte liegen als <code>{ version: 1, widths: number[] }</code> unter <code>sg:large-table:column-widths:<key></code> in <code>localStorage</code>.</p>
|
||||
|
||||
<article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
|
||||
<article id="styleguide-large-table" class="sg-card sg-large-table" data-component="large-table" data-column-resize="true" data-column-resize-key="styleguide-large-table" data-column-min-width="8rem" role="table" aria-label="Beispiel Large Table">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
|
||||
<div class="sg-strong">Large Table</div>
|
||||
<span class="sg-search-field-row" data-component="search-field">
|
||||
@@ -93,34 +94,39 @@
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
|
||||
</span>
|
||||
</span>
|
||||
<button class="sg-large-table__reset-widths" type="button" data-large-table-reset-widths>Standardbreiten</button>
|
||||
</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 sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0">
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0" data-default-width="20%">
|
||||
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 1 sortieren">
|
||||
<span class="sg-large-table__sort-label">Spalte 1</span>
|
||||
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
|
||||
</button>
|
||||
<span class="sg-large-table__resize-handle" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Breite von Spalte 1 anpassen" data-large-table-resize-handle="0"></span>
|
||||
</div>
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1">
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1" data-default-width="20%">
|
||||
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 2 sortieren">
|
||||
<span class="sg-large-table__sort-label">Spalte 2</span>
|
||||
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
|
||||
</button>
|
||||
<span class="sg-large-table__resize-handle" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Breite von Spalte 2 anpassen" data-large-table-resize-handle="1"></span>
|
||||
</div>
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2">
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2" data-default-width="20%">
|
||||
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 3 sortieren">
|
||||
<span class="sg-large-table__sort-label">Spalte 3</span>
|
||||
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
|
||||
</button>
|
||||
<span class="sg-large-table__resize-handle" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Breite von Spalte 3 anpassen" data-large-table-resize-handle="2"></span>
|
||||
</div>
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3">
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3" data-default-width="20%">
|
||||
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 4 sortieren">
|
||||
<span class="sg-large-table__sort-label">Spalte 4</span>
|
||||
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
|
||||
</button>
|
||||
<span class="sg-large-table__resize-handle" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Breite von Spalte 4 anpassen" data-large-table-resize-handle="3"></span>
|
||||
</div>
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4">
|
||||
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4" data-default-width="20%">
|
||||
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 5 sortieren">
|
||||
<span class="sg-large-table__sort-label">Spalte 5</span>
|
||||
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
|
||||
@@ -227,5 +233,6 @@
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../scripts/large-table-column-resize.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user