@sebgroup/green-core 2.36.0 → 2.37.0

package/components/table/table.component.d.ts

@@ -8,6 +8,7 @@ import * as Types from './table.types';
  *
  * @slot `header-lead` - Content displayed at the start of the table header (after search).
  * @slot `header-trail` - Content displayed at the end of the table header (before settings).
+ * @slot `footer` - Content displayed in the table footer area (before pagination).
  * @slot `error` - Custom error state content when data loading fails.
  * @slot `empty` - Custom empty state content when no data is available.
  * @slot `no-results` - Custom no results content when search returns empty.
@@ -103,6 +104,19 @@ export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElemen
      * Disables data caching mechanism.
      */
     nocache: boolean;
+    /**
+     * Configures a table footer row (`<tfoot>`) at the bottom of the table.
+     * The footer row provides slot insertion points for each visible column,
+     * letting consumers render any aggregation (sum, average, count, etc.).
+     *
+     * Use `tfoot.label` to optionally show a label in the first cell (omitted by default).
+     * Use `tfoot.sticky` to pin the footer to the bottom of the scroll area.
+     *
+     * Slot naming convention: `tfoot:{columnKey}`
+     *
+     * Accepts: `{ label?: string, sticky?: boolean }` or omit to disable.
+     */
+    tfoot?: Types.Tfoot;
     /**
      * Key to trigger data reloading when changed. Setting this to a new value
      * forces the table to clear the cache and request new data from the data provider.

package/components/table/table.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-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, 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";
@@ -430,6 +430,7 @@ 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
@@ -521,6 +522,7 @@ renderActionsCell_fn = function(row, index) {
   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
@@ -650,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,
@@ -673,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>
@@ -735,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() {
@@ -916,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.
@@ -1013,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);

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

@@ -1,8 +1,9 @@
 import { TemplateResult } from 'lit';
-import type { TableActions, TableColumn, TableRequest, TableResponse } from './table.types';
+import type { TableActions, TableColumn, TableRequest, TableResponse, TableTfoot } from './table.types';
 export declare const Users: {
     Columns: TableColumn[];
     Actions: TableActions;
+    Tfoot: TableTfoot;
     Data: (request: TableRequest) => Promise<TableResponse<any>>;
     /**
      * Generates slot content for the given rows (current page).
@@ -14,6 +15,13 @@ export declare const Users: {
      * ```
      */
     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[];

package/components/table/table.stories.data.js

@@ -123,6 +123,10 @@ const Users = {
     label: "Actions",
     justify: "end"
   },
+  Tfoot: {
+    label: "Totals",
+    sticky: true
+  },
   Data: userDataProvider,
   /**
    * Generates slot content for the given rows (current page).
@@ -212,6 +216,47 @@ const Users = {
         `
     )}
     `;
+  },
+  /**
+   * Generates tfoot slot content for the footer row.
+   * Receives all rows on the page and computes aggregations.
+   *
+   * Slot naming: `tfoot:{columnKey}`
+   */
+  TfootSlotContent: (rows) => {
+    const totalAmount = rows.reduce(
+      (sum, row) => sum + (Number(row.amount) || 0),
+      0
+    );
+    const activeCount = rows.filter(
+      (row) => String(row.status) === "Active"
+    ).length;
+    const activeRate = Math.round(activeCount / rows.length * 100);
+    const departments = new Set(rows.map((row) => row.department)).size;
+    return html`
+      <!-- tfoot: name row count -->
+      <span slot="tfoot:name">${rows.length} Users</span>
+
+      <!-- tfoot: status active rate -->
+      <gds-badge
+        slot="tfoot:status"
+        variant="${activeRate >= 70 ? "positive" : activeRate >= 40 ? "warning" : "negative"}"
+        size="small"
+      >
+        ${activeRate}% active
+      </gds-badge>
+
+      <!-- tfoot: department count -->
+      <gds-badge slot="tfoot:department" variant="information" size="small">
+        ${departments} depts
+      </gds-badge>
+
+      <!-- tfoot: amount sum -->
+      <gds-flex slot="tfoot:amount" gap="s" align-items="center">
+        <gds-formatted-number .value=${totalAmount}></gds-formatted-number>
+        <gds-badge size="small">SEK</gds-badge>
+      </gds-flex>
+    `;
   }
 };
 const loadFeedback = async () => {
@@ -297,7 +342,8 @@ const Actions = {
     label: "Actions",
     align: "center",
     justify: "start",
-    width: "150px"
+    // width: '150px',
+    sticky: true
   },
   MultipleActionsSlotContent: (rows) => {
     return html`
@@ -327,7 +373,8 @@ const Actions = {
     label: "Actions",
     align: "center",
     justify: "end",
-    width: "150px"
+    // width: '150px',
+    sticky: true
   },
   ActionLinkSlotContent: (rows) => {
     return html`
@@ -348,7 +395,8 @@ const Actions = {
     label: "Actions",
     align: "center",
     justify: "end",
-    width: "150px"
+    // width: '150px',
+    sticky: true
   },
   ActionContextMenuSlotContent: (rows) => {
     return html`

package/components/table/table.styles.js

@@ -24,6 +24,7 @@ const TableStyles = css`
     --table-gap: var(--gds-sys-space-m);
     --table-border-spacing: 0 var(--gds-sys-space-5xs);
     --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs);
+    --table-data-padding-x: var(--gds-sys-space-4xs);
   }
 
   /* Comfortable default */
@@ -37,6 +38,7 @@ const TableStyles = css`
     --table-gap: var(--gds-sys-space-l);
     --table-border-spacing: 0 var(--gds-sys-space-4xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs);
+    --table-data-padding-x: var(--gds-sys-space-2xs);
   }
 
   /* Spacious density */
@@ -50,6 +52,7 @@ const TableStyles = css`
     --table-gap: var(--gds-sys-space-xl);
     --table-border-spacing: 0 var(--gds-sys-space-3xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
+    --table-data-padding-x: var(--gds-sys-space-xs);
   }
 
   /* Secondary and Tertiary */
@@ -61,6 +64,7 @@ const TableStyles = css`
     --_table-row-hover: var(--gds-sys-color-l2-neutral-01);
     --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03);
     --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
+    --_table-card-bg: var(--gds-sys-color-l1-neutral-01);
   }
 
   /* Primary variant */
@@ -75,6 +79,7 @@ const TableStyles = css`
     );
     --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03);
     --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
+    --_table-card-bg: var(--gds-sys-color-l2-neutral-01);
   }
 
   /* Apply density variables */
@@ -360,6 +365,152 @@ const TableStyles = css`
     justify-content: flex-end;
   }
 
+  /* Sticky actions column */
+  th.actions.sticky,
+  td.actions-cell.sticky {
+    position: sticky;
+    right: calc(-1 * var(--table-data-padding-x, 0px));
+    z-index: 1;
+    width: max-content;
+    padding-right: calc(
+      var(--table-cell-padding-x) + var(--table-data-padding-x, 0px)
+    );
+  }
+
+  th.actions.sticky {
+    z-index: 2;
+    background: var(--_table-header-bg);
+  }
+
+  th.actions.sticky .column-header {
+    justify-content: flex-end;
+  }
+
+  td.actions-cell.sticky {
+    background: var(--_table-card-bg);
+  }
+
+  td.actions-cell.sticky .cell-content {
+    justify-content: flex-end;
+    position: relative;
+  }
+
+  /* Left gradient fade on sticky action cells */
+  td.actions-cell.sticky::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    right: 100%;
+    width: var(--gds-sys-space-4xl);
+    pointer-events: none;
+    background: linear-gradient(to right, transparent, var(--_table-card-bg));
+  }
+
+  th.actions.sticky::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    right: 100%;
+    width: var(--gds-sys-space-4xl);
+    pointer-events: none;
+    background: linear-gradient(to right, transparent, var(--_table-header-bg));
+  }
+
+  /* Sticky action inherits row hover/selected/striped backgrounds */
+  tbody tr:hover td.actions-cell.sticky {
+    background: var(--_table-row-hover);
+  }
+
+  tbody tr:hover td.actions-cell.sticky::before {
+    background: linear-gradient(to right, transparent, var(--_table-row-hover));
+  }
+
+  tbody tr.selected td.actions-cell.sticky {
+    background: var(--gds-sys-color-l3-neutral-02);
+  }
+
+  tbody tr.selected td.actions-cell.sticky::before {
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--gds-sys-color-l3-neutral-02)
+    );
+  }
+
+  .striped
+    tbody
+    tr:not(.selected, :hover):nth-child(even)
+    td.actions-cell.sticky {
+    background: var(--_table-row-striped);
+  }
+
+  .striped
+    tbody
+    tr:not(.selected, :hover):nth-child(even)
+    td.actions-cell.sticky::before {
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--_table-row-striped)
+    );
+  }
+
+  /* Table Footer Row */
+
+  tfoot.tablefoot tr td,
+  tfoot.tablefoot tr th[scope='row'] {
+    padding-block: var(--table-cell-padding-y);
+    padding-inline: var(--table-cell-padding-x);
+    background: var(--_table-header-bg);
+    font-weight: normal;
+    border-top: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
+  tfoot.tablefoot tr th[scope='row'] {
+    font-weight: var(--gds-sys-text-weight-book);
+  }
+
+  tfoot.tablefoot tr td:first-child,
+  tfoot.tablefoot tr th:first-child {
+    border-top-left-radius: var(--gds-sys-radius-s);
+    border-bottom-left-radius: var(--gds-sys-radius-s);
+  }
+
+  tfoot.tablefoot tr td:last-child,
+  tfoot.tablefoot tr th:last-child {
+    border-top-right-radius: var(--gds-sys-radius-s);
+    border-bottom-right-radius: var(--gds-sys-radius-s);
+  }
+
+  .tablefoot-label {
+    font-weight: var(--gds-sys-text-weight-book);
+    white-space: nowrap;
+  }
+
+  tfoot.tablefoot.sticky {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    will-change: transform;
+  }
+
+  /* When sticky tablefoot: move padding from .data to table, keep tfoot edge-to-edge */
+  .data:has(tfoot.tablefoot.sticky) {
+    padding: 0;
+  }
+
+  .data:has(tfoot.tablefoot.sticky) table {
+    padding-top: var(--table-data-padding-x);
+    padding-inline: var(--table-data-padding-x);
+  }
+
+  tfoot.tablefoot.sticky tr td,
+  tfoot.tablefoot.sticky tr th[scope='row'] {
+    border-radius: 0;
+    background: var(--_table-card-bg);
+    border-top: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
   /* Align utilities */
   td {
     height: 100%;
@@ -674,6 +825,16 @@ const TableStyles = css`
         }
       }
 
+      /* Sticky table footer */
+      tfoot.tablefoot.sticky {
+        background-color: var(--_table-card-bg);
+      }
+
+      tfoot.tablefoot.sticky tr td,
+      tfoot.tablefoot.sticky tr th[scope='row'] {
+        background: var(--_table-card-bg);
+      }
+
       /* Horizontal scroll */
       @property --_start-fade {
         syntax: '<length>';
@@ -689,18 +850,20 @@ const TableStyles = css`
 
       @keyframes scroll-fade {
         0% {
-          --_start-fade: 0;
+          --_start-fade: 0px;
+          --_end-fade: var(--gds-sys-space-4xl);
         }
-        10%,
-        100% {
+        1% {
           --_start-fade: var(--gds-sys-space-4xl);
+          --_end-fade: var(--gds-sys-space-4xl);
         }
-        0%,
-        90% {
+        99% {
+          --_start-fade: var(--gds-sys-space-4xl);
           --_end-fade: var(--gds-sys-space-4xl);
         }
         100% {
-          --_end-fade: 0;
+          --_start-fade: var(--gds-sys-space-4xl);
+          --_end-fade: 0px;
         }
       }
 
@@ -712,9 +875,18 @@ const TableStyles = css`
           #ffff var(--_start-fade) calc(100% - var(--_end-fade)),
           #0000
         );
-        animation: scroll-fade;
-        animation-timeline: --scroll-fade;
-        scroll-timeline: --scroll-fade x;
+        animation: scroll-fade both linear;
+        animation-timeline: scroll(self inline);
+      }
+
+      /* When sticky actions are present, remove the right fade.*/
+      .data:has(td.actions-cell.sticky) {
+        mask: linear-gradient(
+          to right,
+          #0000,
+          #ffff var(--_start-fade),
+          #ffff 100%
+        );
       }
     }
   }

package/components/table/table.types.d.ts

@@ -18,6 +18,11 @@ export interface Actions {
     align?: 'start' | 'center' | 'stretch' | 'end';
     justify?: 'start' | 'center' | 'space-between' | 'end';
     width?: string;
+    sticky?: boolean;
+}
+export interface Tfoot {
+    label?: string;
+    sticky?: boolean;
 }
 export interface Row {
     [key: string]: any;
@@ -44,7 +49,7 @@ export interface Response<T> {
 /**
  * Internal density configuration for the table's built-in UI controls
  * (search input, column settings dropdown). Does not affect user-provided
- * slot content — size your own components to match the chosen density.
+ * slot content size your own components to match the chosen density.
  */
 export declare const DENSITY_CONFIG: {
     readonly compact: {
@@ -85,6 +90,9 @@ export type TableState = State;
 export type TableRequest = Request;
 export type TableResponse<T> = Response<T>;
 export type TableDensity = Density;
+export type TableTfoot = Tfoot;
+/** @deprecated Use `TableTfoot` instead */
+export type TableTotals = Tfoot;
 export type TableCache<T> = Cache<T>;
 export type TableCacheEntry<T> = CacheEntry<T>;
 export type TableSlotValue = SlotValue;