feat: add optional large table column resizing

components/data-display.html

@@ -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:&lt;key&gt;</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>

scripts/large-table-column-resize.js

@@ -0,0 +1,242 @@
+(function initLargeTableColumnResizeModule() {
+  const STORAGE_PREFIX = 'sg:large-table:column-widths:';
+  const STORAGE_VERSION = 1;
+  const DEFAULT_MIN_WIDTH = 128;
+  const KEYBOARD_STEP = 8;
+  const KEYBOARD_LARGE_STEP = 40;
+  let activeResize = null;
+
+  const getTables = (root) => root.querySelectorAll('[data-component="large-table"][data-column-resize="true"]');
+
+  const getColumnHeaders = (table) => Array.from(
+    table.querySelectorAll('[data-component-part="large-table-header-row"] [role="columnheader"]'),
+  );
+
+  const getMinWidth = (table) => {
+    const configured = table.dataset.columnMinWidth;
+    const value = configured || getComputedStyle(table).getPropertyValue('--large-table-column-min-width').trim();
+    if (!value) {
+      return DEFAULT_MIN_WIDTH;
+    }
+
+    const probe = document.createElement('span');
+    probe.style.cssText = `position:absolute;width:${value};visibility:hidden;`;
+    table.appendChild(probe);
+    const width = probe.getBoundingClientRect().width;
+    probe.remove();
+    return width > 0 ? width : DEFAULT_MIN_WIDTH;
+  };
+
+  const parseDefaultWidth = (rawValue, tableWidth) => {
+    if (!rawValue) {
+      return null;
+    }
+    const value = Number.parseFloat(rawValue);
+    if (!Number.isFinite(value) || value <= 0) {
+      return null;
+    }
+    if (rawValue.trim().endsWith('%')) {
+      return tableWidth * value / 100;
+    }
+    if (rawValue.trim().endsWith('fr')) {
+      return value;
+    }
+    return value;
+  };
+
+  const normalizeWidths = (widths, tableWidth, minWidth) => {
+    const safeWidths = widths.map((width) => Math.max(minWidth, width));
+    const total = safeWidths.reduce((sum, width) => sum + width, 0);
+    if (total <= 0) {
+      return Array(widths.length).fill(Math.max(minWidth, tableWidth / widths.length));
+    }
+    if (widths.some((width) => width !== width)) {
+      return Array(widths.length).fill(Math.max(minWidth, tableWidth / widths.length));
+    }
+    return safeWidths.map((width) => width * tableWidth / total);
+  };
+
+  const getDefaultWidths = (table, headers, minWidth) => {
+    const tableWidth = Math.max(table.clientWidth, minWidth * headers.length);
+    const configured = headers.map((header) => parseDefaultWidth(header.dataset.defaultWidth, tableWidth));
+    if (configured.some((width) => width === null)) {
+      return Array(headers.length).fill(Math.max(minWidth, tableWidth / headers.length));
+    }
+    return normalizeWidths(configured, tableWidth, minWidth);
+  };
+
+  const getStorageKey = (table) => `${STORAGE_PREFIX}${table.dataset.columnResizeKey || ''}`;
+
+  const readStoredWidths = (table, count, minWidth) => {
+    const key = getStorageKey(table);
+    if (!table.dataset.columnResizeKey) {
+      return null;
+    }
+    try {
+      if (!window.localStorage) {
+        return null;
+      }
+      const stored = JSON.parse(window.localStorage.getItem(key));
+      if (stored?.version !== STORAGE_VERSION || !Array.isArray(stored.widths) || stored.widths.length !== count) {
+        return null;
+      }
+      if (stored.widths.some((width) => !Number.isFinite(width) || width < minWidth)) {
+        return null;
+      }
+      return stored.widths;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const writeStoredWidths = (table, widths) => {
+    if (!table.dataset.columnResizeKey) {
+      return;
+    }
+    try {
+      if (!window.localStorage) {
+        return;
+      }
+      window.localStorage.setItem(getStorageKey(table), JSON.stringify({
+        version: STORAGE_VERSION,
+        widths: widths.map((width) => Math.round(width)),
+      }));
+    } catch (error) {
+      // Storage can be unavailable in privacy-restricted browser contexts.
+    }
+  };
+
+  const updateHandleState = (table, widths, minWidth) => {
+    const handles = table.querySelectorAll('[data-large-table-resize-handle]');
+    handles.forEach((handle) => {
+      const index = Number.parseInt(handle.dataset.largeTableResizeHandle, 10);
+      const current = widths[index];
+      const maximum = Math.max(minWidth, widths[index] + widths[index + 1] - minWidth);
+      if (table.id) {
+        handle.setAttribute('aria-controls', table.id);
+      }
+      handle.setAttribute('aria-valuemin', String(Math.round(minWidth)));
+      handle.setAttribute('aria-valuemax', String(Math.round(maximum)));
+      handle.setAttribute('aria-valuenow', String(Math.round(current)));
+      handle.setAttribute('aria-valuetext', `${Math.round(current)} Pixel`);
+    });
+  };
+
+  const applyWidths = (table, widths, minWidth) => {
+    const safeWidths = widths.map((width) => Math.max(minWidth, width));
+    const total = safeWidths.reduce((sum, width) => sum + width, 0);
+    table.style.setProperty('--large-table-grid-template-columns', safeWidths.map((width) => `${width}px`).join(' '));
+    table.style.setProperty('--large-table-grid-min-width', `${Math.ceil(total)}px`);
+    table._largeTableColumnWidths = safeWidths;
+    updateHandleState(table, safeWidths, minWidth);
+  };
+
+  const resetWidths = (table) => {
+    const headers = getColumnHeaders(table);
+    const minWidth = getMinWidth(table);
+    const widths = getDefaultWidths(table, headers, minWidth);
+    try {
+      window.localStorage.removeItem(getStorageKey(table));
+    } catch (error) {
+      // Storage can be unavailable in privacy-restricted browser contexts.
+    }
+    applyWidths(table, widths, minWidth);
+  };
+
+  const resizeColumn = (table, index, delta, persist) => {
+    const widths = [...table._largeTableColumnWidths];
+    const minWidth = getMinWidth(table);
+    const nextLeft = Math.max(minWidth, Math.min(widths[index] + widths[index + 1] - minWidth, widths[index] + delta));
+    const appliedDelta = nextLeft - widths[index];
+    widths[index] = nextLeft;
+    widths[index + 1] -= appliedDelta;
+    applyWidths(table, widths, minWidth);
+    if (persist) {
+      writeStoredWidths(table, widths);
+    }
+  };
+
+  const initTable = (table) => {
+    const headers = getColumnHeaders(table);
+    if (headers.length < 2) {
+      return;
+    }
+    const minWidth = getMinWidth(table);
+    const stored = readStoredWidths(table, headers.length, minWidth);
+    applyWidths(table, stored || getDefaultWidths(table, headers, minWidth), minWidth);
+
+    if (table.dataset.largeTableResizeInitialized === 'true') {
+      return;
+    }
+    table.dataset.largeTableResizeInitialized = 'true';
+
+    table.addEventListener('pointerdown', (event) => {
+      const handle = event.target.closest('[data-large-table-resize-handle]');
+      if (!handle || !table.contains(handle)) {
+        return;
+      }
+      event.preventDefault();
+      activeResize = {
+        table,
+        handle,
+        index: Number.parseInt(handle.dataset.largeTableResizeHandle, 10),
+        startX: event.clientX,
+        startWidths: [...table._largeTableColumnWidths],
+      };
+      handle.dataset.largeTableResizeActive = 'true';
+      table.dataset.columnResizeState = 'resizing';
+      handle.setPointerCapture?.(event.pointerId);
+    });
+
+    table.addEventListener('pointermove', (event) => {
+      if (!activeResize || activeResize.table !== table) {
+        return;
+      }
+      applyWidths(table, activeResize.startWidths, getMinWidth(table));
+      resizeColumn(table, activeResize.index, event.clientX - activeResize.startX, false);
+    });
+
+    table.addEventListener('pointerup', () => {
+      if (!activeResize || activeResize.table !== table) {
+        return;
+      }
+      writeStoredWidths(table, table._largeTableColumnWidths);
+      activeResize.handle.dataset.largeTableResizeActive = 'false';
+      table.dataset.columnResizeState = 'idle';
+      activeResize = null;
+    });
+
+    table.addEventListener('keydown', (event) => {
+      const handle = event.target.closest('[data-large-table-resize-handle]');
+      if (!handle || !table.contains(handle)) {
+        return;
+      }
+      const index = Number.parseInt(handle.dataset.largeTableResizeHandle, 10);
+      const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        resizeColumn(table, index, event.key === 'ArrowRight' ? step : -step, true);
+      } else if (event.key === 'Home' || event.key === 'End') {
+        event.preventDefault();
+        const minWidth = getMinWidth(table);
+        const current = table._largeTableColumnWidths[index];
+        const target = event.key === 'Home' ? minWidth : current + table._largeTableColumnWidths[index + 1] - minWidth;
+        resizeColumn(table, index, target - current, true);
+      }
+    });
+
+    table.addEventListener('click', (event) => {
+      const reset = event.target.closest('[data-large-table-reset-widths]');
+      if (reset && table.contains(reset)) {
+        resetWidths(table);
+      }
+    });
+  };
+
+  window.sgInitLargeTableColumnResize = (options = {}) => {
+    const root = options.root || document;
+    getTables(root).forEach(initTable);
+  };
+
+  document.addEventListener('DOMContentLoaded', () => window.sgInitLargeTableColumnResize(), { once: true });
+})();

styles/42-components-data-display.css

@@ -71,6 +71,10 @@
   width: 100%;
 }
 
+.sg-large-table[data-column-resize="true"] {
+  overflow-x: auto;
+}
+
 .sg-large-table__title-segment {
   flex-direction: row;
   align-items: center;
@@ -80,7 +84,7 @@
 
 .sg-large-table__row {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: var(--large-table-grid-template-columns, repeat(5, minmax(0, 1fr)));
   align-items: stretch;
   gap: 0;
   width: 100%;
@@ -88,6 +92,11 @@
   background: var(--color-white);
 }
 
+.sg-large-table[data-column-resize="true"] .sg-large-table__row,
+.sg-large-table[data-column-resize="true"] .sg-large-table__title-segment {
+  width: max(100%, var(--large-table-grid-min-width, 0px));
+}
+
 .sg-large-table__row--hidden {
   display: none;
 }
@@ -126,9 +135,55 @@
 }
 
 .sg-large-table__cell--header {
+  position: relative;
   padding: 0;
 }
 
+.sg-large-table__resize-handle {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: -0.25rem;
+  bottom: 0;
+  width: 0.5rem;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.sg-large-table__resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  left: 0.2rem;
+  border-left: 1px solid transparent;
+}
+
+.sg-large-table__resize-handle:hover::after,
+.sg-large-table__resize-handle:focus-visible::after,
+.sg-large-table[data-column-resize-state="resizing"] .sg-large-table__resize-handle[data-large-table-resize-active="true"]::after {
+  border-left-color: var(--color-darkblue);
+}
+
+.sg-large-table__resize-handle:focus-visible {
+  outline: 2px solid var(--color-darkblue);
+  outline-offset: -1px;
+}
+
+.sg-large-table__reset-widths {
+  flex: 0 0 auto;
+  border: var(--border-none);
+  background: var(--color-transparent);
+  color: var(--color-font-light);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sg-large-table__reset-widths:focus-visible {
+  outline: 2px solid var(--color-font-light);
+  outline-offset: 2px;
+}
+
 .sg-large-table__sort-button {
   display: flex;
   align-items: center;