@sebgroup/green-core 2.35.1 → 2.37.0

package/components/table/table.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _cache, _cacheDuration, _templateCache, _GdsTable_instances, Density_get, hasSelection_get, isAllSelected_get, isPartialSelection_get, getCacheKey_fn, isCacheValid_fn, loadData_fn, getSlotContent_fn, renderCell_fn, renderCellContent_fn, renderSortIcon_fn, hasHeaderContent_fn, renderHeaderControls_fn, renderColumnHeader_fn, renderActionsHeader_fn, renderSelectableHeader_fn, renderColumnHeaders_fn, renderTableHeader_fn, renderTableCell_fn, renderSelectableCell_fn, renderRowCells_fn, renderActionsCell_fn, renderTableRow_fn, renderCheckbox_fn, renderSkeletonCell_fn, renderSkeletonRow_fn, renderTableBody_fn, renderTable_fn, renderErrorState_fn, renderEmptyState_fn, renderFooter_fn, renderHeadline_fn, handleSearch_fn, handleSearchClear_fn, handleSort_fn, handlePageChange_fn, handlePageSizeChange_fn, handleColumnVisibility_fn, handleSelectAll_fn, handleRowSelect_fn, selectAllInternal_fn, clearSelectionInternal_fn, emitSelectionChange_fn, initializeScrollTracking_fn, updateVerticalScrollState_fn, updateHorizontalScrollState_fn;
+var _cache, _cacheDuration, _GdsTable_instances, Density_get, hasSelection_get, isAllSelected_get, isPartialSelection_get, getCacheKey_fn, isCacheValid_fn, loadData_fn, getRowKey_fn, renderCellWrapped_fn, renderMobileLabel_fn, renderSlotElement_fn, renderCellContent_fn, renderSortIcon_fn, hasHeaderContent_fn, renderHeaderControls_fn, renderColumnHeader_fn, renderActionsHeader_fn, renderSelectableHeader_fn, renderColumnHeaders_fn, renderTableHeader_fn, renderTableCell_fn, renderSelectableCell_fn, renderRowCells_fn, renderActionsCell_fn, renderTableRow_fn, renderCheckbox_fn, renderSkeletonCell_fn, renderSkeletonRow_fn, renderTableBody_fn, renderTableFoot_fn, renderTable_fn, renderErrorState_fn, renderEmptyState_fn, renderFooter_fn, renderHeadline_fn, handleSearch_fn, handleSearchClear_fn, handleSort_fn, handlePageChange_fn, handlePageSizeChange_fn, handleColumnVisibility_fn, handleSelectAll_fn, handleRowSelect_fn, selectAllInternal_fn, clearSelectionInternal_fn, emitSelectionChange_fn, initializeScrollTracking_fn, updateVerticalScrollState_fn, updateHorizontalScrollState_fn;
 import { localized, msg } from "@lit/localize";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -29,7 +29,6 @@ let GdsTable = class extends GdsElement {
     __privateAdd(this, _GdsTable_instances);
     __privateAdd(this, _cache, {});
     __privateAdd(this, _cacheDuration, 5 * 60 * 1e3);
-    __privateAdd(this, _templateCache, /* @__PURE__ */ new Map());
     this.headlineTag = "h2";
     this.options = [5, 10, 20, 50, 100];
     this.page = 1;
@@ -37,6 +36,7 @@ let GdsTable = class extends GdsElement {
     this.columns = [];
     this.density = "comfortable";
     this.selectable = false;
+    this.disableSelectAll = false;
     this.responsive = false;
     this.plain = false;
     this.searchable = false;
@@ -65,6 +65,14 @@ let GdsTable = class extends GdsElement {
     __privateSet(this, _cache, {});
     __privateMethod(this, _GdsTable_instances, loadData_fn).call(this);
   }
+  _onPageChange() {
+    this._view = { ...this._view, page: Number(this.page ?? 1) };
+    __privateMethod(this, _GdsTable_instances, loadData_fn).call(this);
+  }
+  _onRowsChange() {
+    this._view = { ...this._view, rows: Number(this.rows ?? 10), page: 1 };
+    __privateMethod(this, _GdsTable_instances, loadData_fn).call(this);
+  }
   _onColumnsChange() {
     __privateSet(this, _cache, {});
     this._view = {
@@ -147,7 +155,6 @@ let GdsTable = class extends GdsElement {
 };
 _cache = new WeakMap();
 _cacheDuration = new WeakMap();
-_templateCache = new WeakMap();
 _GdsTable_instances = new WeakSet();
 Density_get = function() {
   return Types.DENSITY_CONFIG[this.density];
@@ -182,6 +189,18 @@ loadData_fn = async function() {
       this._rowsState = cachedData.rows;
       this._total = cachedData.total;
       this._loaded = false;
+      this.dispatchCustomEvent("gds-table-data-loaded", {
+        detail: {
+          rows: cachedData.rows,
+          total: cachedData.total,
+          page: this._view.page,
+          rowsPerPage: this._view.rows,
+          searchQuery: this._view.searchQuery,
+          sortColumn: this._view.sortColumn,
+          sortDirection: this._view.sortDirection
+        },
+        bubbles: true
+      });
       return;
     }
   }
@@ -208,7 +227,14 @@ loadData_fn = async function() {
     this._selected.clear();
     this._loaded = false;
     this.dispatchCustomEvent("gds-table-data-loaded", {
-      detail: response,
+      detail: {
+        ...response,
+        page: this._view.page,
+        rowsPerPage: this._view.rows,
+        searchQuery: this._view.searchQuery,
+        sortColumn: this._view.sortColumn,
+        sortDirection: this._view.sortDirection
+      },
       bubbles: true
     });
   } catch (error) {
@@ -222,190 +248,64 @@ loadData_fn = async function() {
   }
 };
 /**
- * Retrieves template content for the given slot name.
- * Uses caching to prevent repeated DOM queries for better performance in large tables.
+ * Gets the unique key for slot naming (prioritizes: custom key > row.id > index)
  */
-getSlotContent_fn = function(slot) {
-  if (!slot) return null;
-  if (!__privateGet(this, _templateCache).has(slot)) {
-    const template = this.querySelector(
-      `template[name="${slot}"]`
-    );
-    __privateGet(this, _templateCache).set(slot, template);
+getRowKey_fn = function(row, index, slotKey) {
+  if (typeof slotKey === "string" || typeof slotKey === "number") {
+    return slotKey;
   }
-  return __privateGet(this, _templateCache).get(slot)?.content.cloneNode(true);
-};
-renderCell_fn = function(config, row) {
-  if (!config) return null;
-  if (Array.isArray(config)) {
-    return config.map((c) => __privateMethod(this, _GdsTable_instances, renderCell_fn).call(this, c, row));
-  }
-  const resolve = (value) => typeof value === "function" ? value(row) : value;
-  switch (config.type) {
-    case "badge": {
-      const variant = resolve(config.variant) || "information";
-      const size = resolve(config.size) || __privateGet(this, _GdsTable_instances, Density_get).badge;
-      return html`
-          <gds-badge size="${size}" variant="${variant}">
-            ${resolve(config.value)}
-          </gds-badge>
-        `;
-    }
-    case "image": {
-      const src = resolve(config.src);
-      if (!src) return null;
-      const width = resolve(config.width) || "24px";
-      const height = resolve(config.height) || "24px";
-      const borderRadius = resolve(config["border-radius"]) || "max";
-      const objectFit = resolve(config["object-fit"]) || "cover";
-      const alt = resolve(config.alt) || "";
-      return html`
-          <gds-img
-            src="${src}"
-            alt="${alt}"
-            width="${width}"
-            height="${height}"
-            border-radius="${borderRadius}"
-            object-fit="${objectFit}"
-            object-position="center"
-          ></gds-img>
-        `;
-    }
-    case "icon": {
-      const template = resolve(config.template);
-      const size = resolve(config.size);
-      const color = resolve(config.color);
-      const clonedSlot = __privateMethod(this, _GdsTable_instances, getSlotContent_fn).call(this, template);
-      if (!clonedSlot) return null;
-      if (clonedSlot instanceof DocumentFragment) {
-        const iconElement = clonedSlot.firstElementChild;
-        if (iconElement) {
-          if (size) iconElement.setAttribute("size", size);
-          if (color) iconElement.setAttribute("color", color);
-        }
-      }
-      return clonedSlot;
-    }
-    case "button": {
-      const size = resolve(config.size) || __privateGet(this, _GdsTable_instances, Density_get).button;
-      const variant = resolve(config.variant);
-      const rank = resolve(config.rank);
-      const label = resolve(config.label);
-      const template = resolve(config.template);
-      const clonedSlot = __privateMethod(this, _GdsTable_instances, getSlotContent_fn).call(this, template);
-      const content = [label, clonedSlot];
-      return html`
-          <gds-button
-            size="${size}"
-            variant="${variant || "neutral"}"
-            rank="${rank || "secondary"}"
-            @click="${(e) => {
-        e.stopPropagation();
-        config.onClick(row);
-      }}"
-          >
-            ${content}
-          </gds-button>
-        `;
-    }
-    case "link": {
-      const href = resolve(config.href);
-      if (!href) return null;
-      const label = resolve(config.label);
-      const target = resolve(config.target);
-      const download = resolve(config.download);
-      const template = resolve(config.template);
-      const clonedSlot = __privateMethod(this, _GdsTable_instances, getSlotContent_fn).call(this, template);
-      const content = [label, clonedSlot];
-      return html`
-          <gds-link
-            href=${ifDefined(href)}
-            target=${ifDefined(target)}
-            .download=${download}
-            text-decoration="underline"
-          >
-            ${content}
-          </gds-link>
-        `;
-    }
-    case "context-menu": {
-      const items = config.items;
-      const size = __privateGet(this, _GdsTable_instances, Density_get).button;
-      return html`
-          <gds-context-menu>
-            <gds-button
-              slot="trigger"
-              size="${size}"
-              rank="tertiary"
-              label="${msg("Actions")}"
-            >
-              <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
-            </gds-button>
-            ${items.map((item) => {
-        const label = resolve(item.label);
-        return html`
-                <gds-menu-item @click="${() => item.onClick(row)}">
-                  ${label}
-                </gds-menu-item>
-              `;
-      })}
-          </gds-context-menu>
-        `;
-    }
-    case "formatted-number": {
-      const value = resolve(config.value);
-      const formatter = Table.FormatNumber[config.format || "decimalsAndThousands"];
-      return formatter(value, config.locale, config.currency, config.decimals);
-    }
-    case "formatted-account": {
-      const value = resolve(config.value);
-      const formatter = Table.FormatAccount[config.format || "seb-account"];
-      return formatter(value);
-    }
-    case "formatted-date": {
-      const value = resolve(config.value);
-      const formatter = Table.FormatDate[config.format || "dateLong"];
-      return formatter(value, config.locale);
-    }
-    default:
-      return null;
+  const rowId = row?.id;
+  if (typeof rowId === "string" || typeof rowId === "number") {
+    return rowId;
   }
+  return index + 1;
+};
+renderCellWrapped_fn = function(content) {
+  return html`<span class="cell-wrapped-content">${content}</span>`;
+};
+renderMobileLabel_fn = function(column) {
+  return html`<span class="column-label" aria-hidden="true">
+      ${column.label}:
+    </span>`;
+};
+renderSlotElement_fn = function(columnKey, rowKey, slotId) {
+  const slotName = `${columnKey}:${rowKey}:${slotId}`;
+  return html`<slot name="${slotName}"></slot>`;
 };
 /**
- * Renders the content of a table cell with support for custom transformations,
- * cell types, and responsive mobile labels.
+ * Renders cell content with proper ordering and wrapping.
  *
- * Value resolution priority:
- * 1. column.value - Direct transform function
- * 2. cell.value - Cell type configuration (badge, button, etc.)
- * 3. row[column.key] - Raw data value
+ * **Slot-based content:**
+ * - Renders in exact order: ['lead', 'value', 'button'] → icon, text, button
+ * - Wraps value when column.justify is set (for flexbox)
+ * - Slots stay unwrapped
+ *
+ * **Plain content:**
+ * - Wraps when column.justify is set, otherwise renders directly
  */
-renderCellContent_fn = function(row, column) {
-  const { cell } = column;
-  let value;
-  if (column.value) {
-    value = column.value(row);
-  } else if (cell?.value) {
-    value = __privateMethod(this, _GdsTable_instances, renderCell_fn).call(this, cell.value, row);
+renderCellContent_fn = function(row, column, index) {
+  const rawValue = column.value ? column.value(row) : row[column.key];
+  const isMobile = this._isMobile && this.responsive;
+  const shouldWrap = !!column.justify;
+  let content;
+  if (Types.isSlotValue(rawValue)) {
+    const rowKey = __privateMethod(this, _GdsTable_instances, getRowKey_fn).call(this, row, index, rawValue.key);
+    content = rawValue.slots.map((slotItem) => {
+      if (slotItem === "value") {
+        if (rawValue.value === void 0) return null;
+        return shouldWrap ? __privateMethod(this, _GdsTable_instances, renderCellWrapped_fn).call(this, rawValue.value) : rawValue.value;
+      }
+      return __privateMethod(this, _GdsTable_instances, renderSlotElement_fn).call(this, column.key, rowKey, slotItem);
+    });
   } else {
-    value = row[column.key];
+    content = shouldWrap ? __privateMethod(this, _GdsTable_instances, renderCellWrapped_fn).call(this, rawValue) : rawValue;
   }
-  const processedValue = column.justify ? html`<span>${value}</span>` : value;
-  const isResponsive = this._isMobile && this.responsive;
-  const mobileLabel = isResponsive ? html`
-          <span class="column-label" aria-hidden="true">
-            ${column.label}:
-          </span>
-        ` : null;
-  const ariaLabel = isResponsive ? `${column.label}: ` : "";
   return html`
-      <div class="cell-content" aria-label="${ariaLabel}">
-        ${[
-    mobileLabel,
-    __privateMethod(this, _GdsTable_instances, renderCell_fn).call(this, cell?.lead, row),
-    processedValue,
-    __privateMethod(this, _GdsTable_instances, renderCell_fn).call(this, cell?.trail, row)
-  ]}
+      <div
+        class="cell-content"
+        aria-label=${ifDefined(isMobile ? column.label : void 0)}
+      >
+        ${isMobile ? __privateMethod(this, _GdsTable_instances, renderMobileLabel_fn).call(this, column) : null} ${content}
       </div>
     `;
 };
@@ -530,11 +430,16 @@ renderActionsHeader_fn = function() {
   const label = this.actions.label || msg("Actions");
   const classes = classMap({
     actions: true,
+    sticky: Boolean(this.actions.sticky),
+    wrap: Boolean(this.actions.width),
     [`align-${this.actions.align}`]: !!this.actions.align,
     [`justify-${this.actions.justify}`]: !!this.actions.justify
   });
+  const style = styleMap({
+    "--cell-width": this.actions.width
+  });
   return html`
-      <th class="${classes}">
+      <th class="${classes}" style=${style}>
         <div class="column-header">
           <div class="column-label">${label}</div>
         </div>
@@ -549,7 +454,8 @@ renderSelectableHeader_fn = function() {
     checked: __privateGet(this, _GdsTable_instances, isAllSelected_get),
     indeterminate: __privateGet(this, _GdsTable_instances, isPartialSelection_get),
     ariaLabel: msg("Select all rows"),
-    onToggle: () => __privateMethod(this, _GdsTable_instances, handleSelectAll_fn).call(this, {})
+    onToggle: () => __privateMethod(this, _GdsTable_instances, handleSelectAll_fn).call(this, {}),
+    skip: this.disableSelectAll
   })}
       </th>
     `;
@@ -570,7 +476,7 @@ renderTableHeader_fn = function() {
       </thead>
     `;
 };
-renderTableCell_fn = function(row, column) {
+renderTableCell_fn = function(row, column, index) {
   const classes = classMap({
     [`align-${column.align}`]: !!column.align,
     [`justify-${column.justify}`]: !!column.justify,
@@ -581,7 +487,7 @@ renderTableCell_fn = function(row, column) {
   });
   return html`
       <td style=${style} class=${classes}>
-        ${__privateMethod(this, _GdsTable_instances, renderCellContent_fn).call(this, row, column)}
+        ${__privateMethod(this, _GdsTable_instances, renderCellContent_fn).call(this, row, column, index)}
       </td>
     `;
 };
@@ -601,8 +507,8 @@ renderSelectableCell_fn = function(index) {
       </td>
     `;
 };
-renderRowCells_fn = function(row) {
-  return this.columns.filter((column) => this._view.visibleColumns.has(column.key)).map((column) => __privateMethod(this, _GdsTable_instances, renderTableCell_fn).call(this, row, column));
+renderRowCells_fn = function(row, index) {
+  return this.columns.filter((column) => this._view.visibleColumns.has(column.key)).map((column) => __privateMethod(this, _GdsTable_instances, renderTableCell_fn).call(this, row, column, index));
 };
 renderActionsCell_fn = function(row, index) {
   if (!this.actions) return null;
@@ -613,15 +519,22 @@ renderActionsCell_fn = function(row, index) {
         </td>
       `;
   }
-  const content = __privateMethod(this, _GdsTable_instances, renderCell_fn).call(this, this.actions.cell, row);
+  const rowKey = __privateMethod(this, _GdsTable_instances, getRowKey_fn).call(this, row, index);
   const classes = classMap({
     "actions-cell": true,
+    sticky: Boolean(this.actions.sticky),
+    wrap: Boolean(this.actions.width),
     [`align-${this.actions.align}`]: !!this.actions.align,
     [`justify-${this.actions.justify}`]: !!this.actions.justify
   });
+  const style = styleMap({
+    "--cell-width": this.actions.width
+  });
   return html`
-      <td class="${classes}">
-        <div class="cell-content">${content}</div>
+      <td class="${classes}" style=${style}>
+        <div class="cell-content">
+          ${__privateMethod(this, _GdsTable_instances, renderSlotElement_fn).call(this, "actions", rowKey, "main")}
+        </div>
       </td>
     `;
 };
@@ -635,7 +548,7 @@ renderTableRow_fn = function(row, index) {
       >
         ${[
     __privateMethod(this, _GdsTable_instances, renderSelectableCell_fn).call(this, index),
-    __privateMethod(this, _GdsTable_instances, renderRowCells_fn).call(this, row),
+    __privateMethod(this, _GdsTable_instances, renderRowCells_fn).call(this, row, index),
     __privateMethod(this, _GdsTable_instances, renderActionsCell_fn).call(this, row, index)
   ]}
       </tr>
@@ -646,8 +559,10 @@ renderCheckbox_fn = function({
   indeterminate = false,
   disabled = false,
   ariaLabel,
-  onToggle
+  onToggle,
+  skip = false
 }) {
+  if (skip) return null;
   const toggle = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -737,6 +652,67 @@ renderTableBody_fn = function() {
       </tbody>
     `;
 };
+renderTableFoot_fn = function() {
+  if (!this.tfoot) return null;
+  const label = this.tfoot.label;
+  const visibleColumns = this.columns.filter(
+    (column) => this._view.visibleColumns.has(column.key)
+  );
+  const classes = classMap({
+    tablefoot: true,
+    sticky: Boolean(this.tfoot.sticky)
+  });
+  return html`
+      <tfoot class=${classes}>
+        <tr>
+          ${when(this.selectable, () => html`<td class="checkbox-cell"></td>`)}
+          ${visibleColumns.map((column, i) => {
+    const cellClasses = classMap({
+      "tablefoot-cell": true,
+      "tablefoot-label-cell": i === 0,
+      [`align-${column.align}`]: !!column.align,
+      [`justify-${column.justify}`]: !!column.justify,
+      wrap: Boolean(column.width)
+    });
+    const style = styleMap({
+      "--cell-width": column.width
+    });
+    if (i === 0 && label) {
+      return html`
+                <th scope="row" class=${cellClasses} style=${style}>
+                  <div class="cell-content">
+                    <span class="tablefoot-label">${label}</span>
+                    <slot name="tfoot:${column.key}"></slot>
+                  </div>
+                </th>
+              `;
+    }
+    return html`
+              <td class=${cellClasses} style=${style}>
+                <div class="cell-content">
+                  <slot name="tfoot:${column.key}"></slot>
+                </div>
+              </td>
+            `;
+  })}
+          ${when(this.actions, () => {
+    const isObj = this.actions && typeof this.actions !== "function";
+    const stickyAction = isObj && this.actions.sticky;
+    const actionClasses = classMap({
+      "actions-cell": true,
+      "tablefoot-cell": true,
+      sticky: Boolean(stickyAction)
+    });
+    return html`<td class=${actionClasses}>
+              <div class="cell-content">
+                <slot name="tfoot:actions"></slot>
+              </div>
+            </td>`;
+  })}
+        </tr>
+      </tfoot>
+    `;
+};
 renderTable_fn = function() {
   const CLASSES = classMap({
     responsive: this.responsive,
@@ -751,7 +727,7 @@ renderTable_fn = function() {
         variant="${this.variant}"
         padding="0"
         border-radius="m"
-        border-width="0; s{5xs}"
+        border-width="${this.responsive ? "0; s{5xs}" : "5xs"}"
         class="table-card"
       >
         <div class=${CLASSES} tabindex="0">
@@ -760,6 +736,7 @@ renderTable_fn = function() {
               ${caption}
             </caption>
             ${__privateMethod(this, _GdsTable_instances, renderTableHeader_fn).call(this)} ${__privateMethod(this, _GdsTable_instances, renderTableBody_fn).call(this)}
+            ${__privateMethod(this, _GdsTable_instances, renderTableFoot_fn).call(this)}
           </table>
         </div>
       </gds-card>
@@ -822,18 +799,20 @@ renderFooter_fn = function() {
   const end = Math.min(this._view.page * this._view.rows, this._total);
   const summaryString = `${start}\u2013${end} ${msg("of")} ${this._total}`;
   return html`
-      <gds-pagination
-        .page=${this._view.page}
-        .rows=${this._view.rows}
-        .options=${this.options}
-        .total=${this._total}
-        .density=${this.density}
-        .label=${summaryString}
-        @gds-page-change=${__privateMethod(this, _GdsTable_instances, handlePageChange_fn)}
-        @gds-rows-change=${__privateMethod(this, _GdsTable_instances, handlePageSizeChange_fn)}
-        width="100%"
-      >
-      </gds-pagination>
+      <slot name="footer">
+        <gds-pagination
+          .page=${this._view.page}
+          .rows=${this._view.rows}
+          .options=${this.options}
+          .total=${this._total}
+          .density=${this.density}
+          .label=${summaryString}
+          @gds-page-change=${__privateMethod(this, _GdsTable_instances, handlePageChange_fn)}
+          @gds-rows-change=${__privateMethod(this, _GdsTable_instances, handlePageSizeChange_fn)}
+          width="100%"
+        >
+        </gds-pagination>
+      </slot>
     `;
 };
 renderHeadline_fn = function() {
@@ -1003,14 +982,21 @@ initializeScrollTracking_fn = function() {
 /**
  * Updates CSS classes based on vertical scroll position.
  * Adds 'scrolled' class when scrolled down from top.
+ * Adds 'scrolled-bottom' class when not scrolled to the very bottom.
  */
 updateVerticalScrollState_fn = function(container) {
-  const { scrollTop } = container;
+  const { scrollTop, scrollHeight, clientHeight } = container;
+  const maxScrollTop = scrollHeight - clientHeight;
   if (scrollTop > 0) {
     container.classList.add("scrolled");
   } else {
     container.classList.remove("scrolled");
   }
+  if (scrollTop < maxScrollTop - 1) {
+    container.classList.add("scrolled-bottom");
+  } else {
+    container.classList.remove("scrolled-bottom");
+  }
 };
 /**
  * Updates CSS classes based on horizontal scroll position.
@@ -1072,6 +1058,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: false })
 ], GdsTable.prototype, "selectable", 2);
+__decorateClass([
+  property({
+    attribute: "disable-select-all",
+    type: Boolean,
+    reflect: false
+  })
+], GdsTable.prototype, "disableSelectAll", 2);
 __decorateClass([
   property({ type: Boolean, reflect: false })
 ], GdsTable.prototype, "responsive", 2);
@@ -1093,6 +1086,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: false })
 ], GdsTable.prototype, "nocache", 2);
+__decorateClass([
+  property({ type: Object })
+], GdsTable.prototype, "tfoot", 2);
 __decorateClass([
   property()
 ], GdsTable.prototype, "dataLoadKey", 2);
@@ -1137,6 +1133,12 @@ __decorateClass([
   watch("dataLoadKey"),
   watch("data")
 ], GdsTable.prototype, "_onDataChange", 1);
+__decorateClass([
+  watch("page", { waitUntilFirstUpdate: true })
+], GdsTable.prototype, "_onPageChange", 1);
+__decorateClass([
+  watch("rows", { waitUntilFirstUpdate: true })
+], GdsTable.prototype, "_onRowsChange", 1);
 __decorateClass([
   watch("columns")
 ], GdsTable.prototype, "_onColumnsChange", 1);

package/components/table/table.stories.data.d.ts

@@ -1,53 +1,39 @@
-import { TableColumn, TableRequest, TableResponse } from './table.types';
-interface UserData {
-    id: number;
-    name: string;
-    email: string;
-    role: 'Admin' | 'User' | 'Editor';
-    status: 'Active' | 'Inactive';
-    amount: number;
-    account: string;
-    lastLogin: string;
-    avatarUrl?: string;
-    department?: string;
-    download?: string;
-}
-interface FeedbackData {
-    id: number;
-    name: string;
-    email: string;
-    feedback: string;
-    notes: string;
-    status: 'Active' | 'Inactive';
-    department: string;
-}
+import { TemplateResult } from 'lit';
+import type { TableActions, TableColumn, TableRequest, TableResponse, TableTfoot } from './table.types';
 export declare const Users: {
     Columns: TableColumn[];
-    Actions: {
-        label: string;
-        justify: string;
-        cell: {
-            type: string;
-            items: ({
-                label: (row: UserData) => "Activate" | "Deactivate";
-                divider?: undefined;
-            } | {
-                label: string;
-                divider?: undefined;
-            } | {
-                divider: boolean;
-                label: string;
-            })[];
-        };
-    };
-    Data: (request: TableRequest) => Promise<TableResponse<UserData>>;
+    Actions: TableActions;
+    Tfoot: TableTfoot;
+    Data: (request: TableRequest) => Promise<TableResponse<any>>;
+    /**
+     * Generates slot content for the given rows (current page).
+     * Creates per-row slot elements using `columnKey:rowKey:slotId` convention.
+     *
+     * Used with Lit's `render()` to update table light DOM on each data load:
+     * ```ts
+     * @gds-table-data-loaded=${(e) => render(Users.SlotContent(e.detail.rows), table)}
+     * ```
+     */
+    SlotContent: (rows: any[]) => TemplateResult;
+    /**
+     * Generates tfoot slot content for the footer row.
+     * Receives all rows on the page and computes aggregations.
+     *
+     * Slot naming: `tfoot:{columnKey}`
+     */
+    TfootSlotContent: (rows: any[]) => TemplateResult;
 };
 export declare const Feedback: {
     Columns: TableColumn[];
-    MultipleActions: any;
-    ActionLink: any;
-    ActionButton: any;
-    ActionContextMenu: any;
-    Data: (request: TableRequest) => Promise<TableResponse<FeedbackData>>;
+    Data: (request: TableRequest) => Promise<TableResponse<any>>;
+};
+export declare const Actions: {
+    Columns: TableColumn[];
+    MultipleActions: TableActions;
+    MultipleActionsSlotContent: (rows: any[]) => TemplateResult;
+    ActionLink: TableActions;
+    ActionLinkSlotContent: (rows: any[]) => TemplateResult;
+    ActionContextMenu: TableActions;
+    ActionContextMenuSlotContent: (rows: any[]) => TemplateResult;
+    Data: (request: TableRequest) => Promise<TableResponse<any>>;
 };
-export {};