@govtechsg/sgds-web-component 3.27.0-rc.0 → 3.27.0-rc.1

package/react/components/DataTable/sgds-data-table.cjs.js

@@ -12,7 +12,7 @@ var sgdsPagination = require('../Pagination/sgds-pagination.cjs.js');
 var sgdsDataTableRow = require('./sgds-data-table-row.cjs.js');
 var sgdsDataTableCell = require('./sgds-data-table-cell.cjs.js');
 var sgdsDataTableHead = require('./sgds-data-table-head.cjs.js');
-var sgdsSpinner = require('../Spinner/sgds-spinner.cjs.js');
+var sgdsSkeleton = require('../Skeleton/sgds-skeleton.cjs.js');
 
 /**
  * @summary A data table container with pagination, row selection, loading, and sorting support.
@@ -38,12 +38,12 @@ class SgdsDataTable extends sgdsElement["default"] {
         this.itemsPerPage = 5;
         /** Custom text shown on the footer's left side. */
         this.footerText = "";
-        /** If true, hides the footer (summary text and pagination controls). */
-        this.hideFooter = false;
         /** When true, shows a loading state and hides body rows. */
         this.isLoading = false;
         /** When true, emits sort events for external handling instead of local sorting. */
         this.serverSort = false;
+        /** Variant forwarded to the internal pagination component. */
+        this.paginationVariant = "default";
         /**
          * Controls the CSS `table-layout` algorithm.
          * Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content.
@@ -140,7 +140,7 @@ class SgdsDataTable extends sgdsElement["default"] {
     _applyColumnAlignment() {
         const headerAlignments = this._headerCells.reduce((acc, header) => {
             var _a;
-            const span = Number(header.colspan) > 0 ? Number(header.colspan) : 1;
+            const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;
             const alignment = (_a = header.textAlign) !== null && _a !== void 0 ? _a : "left";
             for (let i = 0; i < span; i++) {
                 acc.push(alignment);
@@ -183,7 +183,7 @@ class SgdsDataTable extends sgdsElement["default"] {
     _resetOtherHeaderSortStates(activeHeader) {
         this._headerCells.forEach(header => {
             if (header !== activeHeader && header.sorting) {
-                header.ariasort = "none";
+                header.sortDirection = "none";
             }
         });
     }
@@ -282,16 +282,20 @@ class SgdsDataTable extends sgdsElement["default"] {
         }, []);
         this._captureInitialRowPositions(this.tableRows);
         this._headerCells.forEach(header => {
-            if (header.sorting && !header.ariasort) {
-                header.ariasort = "none";
+            if (header.sorting && !header.sortDirection) {
+                header.sortDirection = "none";
             }
         });
         this._configureRows();
         this._updateVisibleRows();
     }
     _updateVisibleRows() {
+        if (this.isLoading) {
+            this.tableRows.forEach(row => (row.style.display = "none"));
+            return;
+        }
         if (this.mode === "server") {
-            this.tableRows.forEach(row => (row.style.display = this.isLoading ? "none" : ""));
+            this.tableRows.forEach(row => (row.style.display = ""));
             return;
         }
         const total = this.dataLength || this.tableRows.length;
@@ -304,6 +308,35 @@ class SgdsDataTable extends sgdsElement["default"] {
         const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));
         this.tableRows.forEach(row => (row.style.display = visible.has(row) ? "" : "none"));
     }
+    _getSkeletonColumnCount() {
+        const firstHeaderRow = this.headerRows[0];
+        const firstHeaderCells = firstHeaderRow
+            ? Array.from(firstHeaderRow.children).filter(child => child instanceof sgdsDataTableHead.SgdsDataTableHead)
+            : [];
+        const headerColumnCount = firstHeaderCells.reduce((count, header) => {
+            const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;
+            return count + span;
+        }, 0);
+        const firstBodyRow = this.tableRows[0];
+        const fallbackBodyColumnCount = firstBodyRow
+            ? Array.from(firstBodyRow.children).filter(child => child instanceof sgdsDataTableCell.SgdsDataTableCell).length
+            : 0;
+        const hasExpand = this.tableRows.some(row => row.expand);
+        const controlColumns = (this.multiSelect ? 1 : 0) + (hasExpand ? 1 : 0);
+        const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;
+        return Math.max(1, dataColumns + controlColumns);
+    }
+    _renderLoadingSkeleton() {
+        const skeletonColumns = this._getSkeletonColumnCount();
+        const skeletonRows = Math.max(1, this.itemsPerPage || 1);
+        return lit.html `<div class="loading" role="status" aria-live="polite" aria-label="Loading">
+      <div class="loading-grid" style=${`--sgds-data-table-loading-columns: ${skeletonColumns};`} aria-hidden="true">
+        ${Array.from({ length: skeletonRows }, (_, rowIndex) => lit.html `<div class="loading-grid-row" key=${rowIndex}>
+              ${Array.from({ length: skeletonColumns }, () => lit.html `<sgds-skeleton .height=${"56px"} .borderRadius=${"4px"}></sgds-skeleton>`)}
+            </div>`)}
+      </div>
+    </div>`;
+    }
     updated(changed) {
         if (changed.has("currentPage") || changed.has("itemsPerPage") || changed.has("mode") || changed.has("isLoading")) {
             this._updateVisibleRows();
@@ -321,34 +354,34 @@ class SgdsDataTable extends sgdsElement["default"] {
         const end = Math.min(start + this.itemsPerPage, total);
         const displayStart = total === 0 ? 0 : start + 1;
         const showNoData = !this.isLoading && this.tableRows.length === 0;
+        const showFooter = total !== 0;
         return lit.html `
       <div class="data-table">
-        <div>
+        <div class="table-container">
           <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort} class="table"></slot>
           ${this.isLoading
-            ? lit.html `<div class="loading" role="status" aria-live="polite">
-                <div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>
-              </div>`
+            ? this._renderLoadingSkeleton()
             : showNoData
                 ? lit.html `<slot name="no-data" class="no-data" role="status" aria-live="polite">No data</slot>`
                 : lit.nothing}
         </div>
 
-        ${this.hideFooter
-            ? lit.nothing
-            : lit.html `<div class="footer">
+        ${showFooter
+            ? lit.html `<div class="footer">
               ${this.footerText || lit.html `<span>Showing ${displayStart} to ${end} of ${total} results</span>`}
               <sgds-pagination
                 .dataLength=${total}
                 .currentPage=${this.currentPage}
                 .itemsPerPage=${this.itemsPerPage}
+                .variant=${this.paginationVariant}
                 size="sm"
                 @sgds-page-change=${(e) => {
                 this.currentPage = e.detail.currentPage;
                 this.emit("sgds-page-change");
             }}
               ></sgds-pagination>
-            </div>`}
+            </div>`
+            : lit.nothing}
       </div>
     `;
     }
@@ -367,7 +400,7 @@ SgdsDataTable.dependencies = {
     "sgds-pagination": sgdsPagination.SgdsPagination,
     "sgds-data-table-cell": sgdsDataTableCell.SgdsDataTableCell,
     "sgds-data-table-head": sgdsDataTableHead.SgdsDataTableHead,
-    "sgds-spinner": sgdsSpinner.SgdsSpinner
+    "sgds-skeleton": sgdsSkeleton.SgdsSkeleton
 };
 tslib.__decorate([
     decorators_js.property({ type: Boolean })
@@ -384,15 +417,15 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsDataTable.prototype, "footerText", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean })
-], SgdsDataTable.prototype, "hideFooter", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean })
 ], SgdsDataTable.prototype, "isLoading", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean })
 ], SgdsDataTable.prototype, "serverSort", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsDataTable.prototype, "paginationVariant", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsDataTable.prototype, "layout", void 0);

package/react/components/DataTable/sgds-data-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-data-table.cjs.js","sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `isLoading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: rowData[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-spinner\": SgdsSpinner\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) footerText = \"\";\n\n  /** If true, hides the footer (summary text and pagination controls). */\n  @property({ type: Boolean }) hideFooter = false;\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) isLoading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"table\");\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => r.rowData);\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colspan) > 0 ? Number(header.colspan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, key: string, columnIndex: number) {\n    if (key && row.rowData && key in row.rowData) {\n      return row.rowData[key];\n    }\n\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.ariasort = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }>)\n      .detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    if (this.mode === \"client\") {\n      const start = (this.currentPage - 1) * this.itemsPerPage;\n      const end = start + this.itemsPerPage;\n      const nextRows = [...this.tableRows];\n\n      const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {\n        const leftValue = this._toComparableValue(left, key, columnIndex);\n        const rightValue = this._toComparableValue(right, key, columnIndex);\n        return this._compareValues(leftValue, rightValue, direction);\n      });\n      nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);\n\n      this.tableRows = nextRows;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.ariasort) {\n        header.ariasort = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = this.isLoading ? \"none\" : \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"isLoading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.isLoading && this.tableRows.length === 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div>\n          <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort} class=\"table\"></slot>\n          ${this.isLoading\n            ? html`<div class=\"loading\" role=\"status\" aria-live=\"polite\">\n                <div class=\"loading-menu\"><sgds-spinner size=\"xs\" tone=\"brand\"></sgds-spinner>Loading...</div>\n              </div>`\n            : showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${this.hideFooter\n          ? nothing\n          : html`<div class=\"footer\">\n              ${this.footerText || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"names":["SgdsElement","SgdsDataTableHead","SgdsDataTableRow","html","nothing","tableStyle","css","SgdsPagination","SgdsDataTableCell","SgdsSpinner","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"sgds-data-table.cjs.js","sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `isLoading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: rowData[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-skeleton\": SgdsSkeleton\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) footerText = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) isLoading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"table\");\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => r.rowData);\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, key: string, columnIndex: number) {\n    if (key && row.rowData && key in row.rowData) {\n      return row.rowData[key];\n    }\n\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.sortDirection = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }>)\n      .detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    if (this.mode === \"client\") {\n      const start = (this.currentPage - 1) * this.itemsPerPage;\n      const end = start + this.itemsPerPage;\n      const nextRows = [...this.tableRows];\n\n      const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {\n        const leftValue = this._toComparableValue(left, key, columnIndex);\n        const rightValue = this._toComparableValue(right, key, columnIndex);\n        return this._compareValues(leftValue, rightValue, direction);\n      });\n      nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);\n\n      this.tableRows = nextRows;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.isLoading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  private _getSkeletonColumnCount() {\n    const firstHeaderRow = this.headerRows[0];\n    const firstHeaderCells = firstHeaderRow\n      ? (Array.from(firstHeaderRow.children).filter(child => child instanceof SgdsDataTableHead) as SgdsDataTableHead[])\n      : [];\n\n    const headerColumnCount = firstHeaderCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const controlColumns = (this.multiSelect ? 1 : 0) + (hasExpand ? 1 : 0);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return Math.max(1, dataColumns + controlColumns);\n  }\n\n  private _renderLoadingSkeleton() {\n    const skeletonColumns = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return html`<div class=\"loading\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n      <div class=\"loading-grid\" style=${`--sgds-data-table-loading-columns: ${skeletonColumns};`} aria-hidden=\"true\">\n        ${Array.from(\n          { length: skeletonRows },\n          (_, rowIndex) =>\n            html`<div class=\"loading-grid-row\" key=${rowIndex}>\n              ${Array.from(\n                { length: skeletonColumns },\n                () => html`<sgds-skeleton .height=${\"56px\"} .borderRadius=${\"4px\"}></sgds-skeleton>`\n              )}\n            </div>`\n        )}\n      </div>\n    </div>`;\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"isLoading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.isLoading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort} class=\"table\"></slot>\n          ${this.isLoading\n            ? this._renderLoadingSkeleton()\n            : showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.footerText || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                .variant=${this.paginationVariant}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"names":["SgdsElement","SgdsDataTableHead","SgdsDataTableRow","SgdsDataTableCell","html","nothing","tableStyle","css","SgdsPagination","SgdsSkeleton","__decorate","property","state"],"mappings":"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"}

package/react/components/DataTable/sgds-data-table.js

@@ -8,7 +8,7 @@ import { SgdsPagination } from '../Pagination/sgds-pagination.js';
 import { SgdsDataTableRow } from './sgds-data-table-row.js';
 import { SgdsDataTableCell } from './sgds-data-table-cell.js';
 import { SgdsDataTableHead } from './sgds-data-table-head.js';
-import { SgdsSpinner } from '../Spinner/sgds-spinner.js';
+import { SgdsSkeleton } from '../Skeleton/sgds-skeleton.js';
 
 /**
  * @summary A data table container with pagination, row selection, loading, and sorting support.
@@ -34,12 +34,12 @@ class SgdsDataTable extends SgdsElement {
         this.itemsPerPage = 5;
         /** Custom text shown on the footer's left side. */
         this.footerText = "";
-        /** If true, hides the footer (summary text and pagination controls). */
-        this.hideFooter = false;
         /** When true, shows a loading state and hides body rows. */
         this.isLoading = false;
         /** When true, emits sort events for external handling instead of local sorting. */
         this.serverSort = false;
+        /** Variant forwarded to the internal pagination component. */
+        this.paginationVariant = "default";
         /**
          * Controls the CSS `table-layout` algorithm.
          * Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content.
@@ -136,7 +136,7 @@ class SgdsDataTable extends SgdsElement {
     _applyColumnAlignment() {
         const headerAlignments = this._headerCells.reduce((acc, header) => {
             var _a;
-            const span = Number(header.colspan) > 0 ? Number(header.colspan) : 1;
+            const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;
             const alignment = (_a = header.textAlign) !== null && _a !== void 0 ? _a : "left";
             for (let i = 0; i < span; i++) {
                 acc.push(alignment);
@@ -179,7 +179,7 @@ class SgdsDataTable extends SgdsElement {
     _resetOtherHeaderSortStates(activeHeader) {
         this._headerCells.forEach(header => {
             if (header !== activeHeader && header.sorting) {
-                header.ariasort = "none";
+                header.sortDirection = "none";
             }
         });
     }
@@ -278,16 +278,20 @@ class SgdsDataTable extends SgdsElement {
         }, []);
         this._captureInitialRowPositions(this.tableRows);
         this._headerCells.forEach(header => {
-            if (header.sorting && !header.ariasort) {
-                header.ariasort = "none";
+            if (header.sorting && !header.sortDirection) {
+                header.sortDirection = "none";
             }
         });
         this._configureRows();
         this._updateVisibleRows();
     }
     _updateVisibleRows() {
+        if (this.isLoading) {
+            this.tableRows.forEach(row => (row.style.display = "none"));
+            return;
+        }
         if (this.mode === "server") {
-            this.tableRows.forEach(row => (row.style.display = this.isLoading ? "none" : ""));
+            this.tableRows.forEach(row => (row.style.display = ""));
             return;
         }
         const total = this.dataLength || this.tableRows.length;
@@ -300,6 +304,35 @@ class SgdsDataTable extends SgdsElement {
         const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));
         this.tableRows.forEach(row => (row.style.display = visible.has(row) ? "" : "none"));
     }
+    _getSkeletonColumnCount() {
+        const firstHeaderRow = this.headerRows[0];
+        const firstHeaderCells = firstHeaderRow
+            ? Array.from(firstHeaderRow.children).filter(child => child instanceof SgdsDataTableHead)
+            : [];
+        const headerColumnCount = firstHeaderCells.reduce((count, header) => {
+            const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;
+            return count + span;
+        }, 0);
+        const firstBodyRow = this.tableRows[0];
+        const fallbackBodyColumnCount = firstBodyRow
+            ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length
+            : 0;
+        const hasExpand = this.tableRows.some(row => row.expand);
+        const controlColumns = (this.multiSelect ? 1 : 0) + (hasExpand ? 1 : 0);
+        const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;
+        return Math.max(1, dataColumns + controlColumns);
+    }
+    _renderLoadingSkeleton() {
+        const skeletonColumns = this._getSkeletonColumnCount();
+        const skeletonRows = Math.max(1, this.itemsPerPage || 1);
+        return html `<div class="loading" role="status" aria-live="polite" aria-label="Loading">
+      <div class="loading-grid" style=${`--sgds-data-table-loading-columns: ${skeletonColumns};`} aria-hidden="true">
+        ${Array.from({ length: skeletonRows }, (_, rowIndex) => html `<div class="loading-grid-row" key=${rowIndex}>
+              ${Array.from({ length: skeletonColumns }, () => html `<sgds-skeleton .height=${"56px"} .borderRadius=${"4px"}></sgds-skeleton>`)}
+            </div>`)}
+      </div>
+    </div>`;
+    }
     updated(changed) {
         if (changed.has("currentPage") || changed.has("itemsPerPage") || changed.has("mode") || changed.has("isLoading")) {
             this._updateVisibleRows();
@@ -317,34 +350,34 @@ class SgdsDataTable extends SgdsElement {
         const end = Math.min(start + this.itemsPerPage, total);
         const displayStart = total === 0 ? 0 : start + 1;
         const showNoData = !this.isLoading && this.tableRows.length === 0;
+        const showFooter = total !== 0;
         return html `
       <div class="data-table">
-        <div>
+        <div class="table-container">
           <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort} class="table"></slot>
           ${this.isLoading
-            ? html `<div class="loading" role="status" aria-live="polite">
-                <div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>
-              </div>`
+            ? this._renderLoadingSkeleton()
             : showNoData
                 ? html `<slot name="no-data" class="no-data" role="status" aria-live="polite">No data</slot>`
                 : nothing}
         </div>
 
-        ${this.hideFooter
-            ? nothing
-            : html `<div class="footer">
+        ${showFooter
+            ? html `<div class="footer">
               ${this.footerText || html `<span>Showing ${displayStart} to ${end} of ${total} results</span>`}
               <sgds-pagination
                 .dataLength=${total}
                 .currentPage=${this.currentPage}
                 .itemsPerPage=${this.itemsPerPage}
+                .variant=${this.paginationVariant}
                 size="sm"
                 @sgds-page-change=${(e) => {
                 this.currentPage = e.detail.currentPage;
                 this.emit("sgds-page-change");
             }}
               ></sgds-pagination>
-            </div>`}
+            </div>`
+            : nothing}
       </div>
     `;
     }
@@ -363,7 +396,7 @@ SgdsDataTable.dependencies = {
     "sgds-pagination": SgdsPagination,
     "sgds-data-table-cell": SgdsDataTableCell,
     "sgds-data-table-head": SgdsDataTableHead,
-    "sgds-spinner": SgdsSpinner
+    "sgds-skeleton": SgdsSkeleton
 };
 __decorate([
     property({ type: Boolean })
@@ -380,15 +413,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SgdsDataTable.prototype, "footerText", void 0);
-__decorate([
-    property({ type: Boolean })
-], SgdsDataTable.prototype, "hideFooter", void 0);
 __decorate([
     property({ type: Boolean })
 ], SgdsDataTable.prototype, "isLoading", void 0);
 __decorate([
     property({ type: Boolean })
 ], SgdsDataTable.prototype, "serverSort", void 0);
+__decorate([
+    property({ type: String })
+], SgdsDataTable.prototype, "paginationVariant", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsDataTable.prototype, "layout", void 0);