@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-table/pds-table.js

@@ -1,16 +1,421 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
+import { getScrollOffsetFromStart } from "../../utils/scroll";
+// A column with no width of its own, under table-layout: fixed, otherwise shares whatever's left
+// after the explicit-width columns -- which can go to nothing on a narrow viewport. Below this,
+// it keeps this floor instead and the table grows wider, scrollable under `responsive` -- the
+// only mode this applies in. Without `responsive` there's no container to measure that the floor
+// itself can't grow (the table's own width would, chasing its tail) and no way to scroll the
+// overflow it would create.
+const AUTO_COLUMN_FLOOR_WIDTH_PX = 120;
+/**
+ * @part responsive-container - Exposes the horizontal scroll container for styling. Appears only when `responsive` is set.
+ * @part responsive-table - Set on the `pds-table` element itself when `responsive` is set, so `::part(responsive-table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part responsive-wrapper - Exposes the wrapper inside the scroll container for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-left - Exposes the scroll shadow at the inline-start edge for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-right - Exposes the scroll shadow at the inline-end edge for styling. Appears only when `responsive` is set.
+ * @part table - Set on the `pds-table` element itself, so `::part(table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part table-inner - Exposes the inner table element around the slotted head and body for styling. Appears only when `responsive` is set.
+ */
 export class PdsTable {
     constructor() {
-        this.compact = undefined;
-        this.componentId = undefined;
-        this.responsive = undefined;
-        this.fixedColumn = undefined;
-        this.selectable = undefined;
+        this.scrollContainer = null;
+        this._responsiveHandleScroll = null;
+        this._responsiveHandleResize = null;
+        this._responsiveResizeObserver = null;
+        this._teardownResponsive = null;
+        this._fixedLayoutResizeObserver = null;
+        this._fixedLayoutHandleResize = null;
+        this._fixedLayoutMutationObserver = null;
+        this._pendingColumnWidthsRecalc = false;
+        // componentDidLoad fires once; a later connectedCallback (the table was re-parented, reordered,
+        // or moved by a DOM morph) needs this to know it's a reconnect, not the first load, so it
+        // re-attaches what disconnectedCallback tore down.
+        this.hasLoaded = false;
+        /**
+         * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.
+         * Only applies when `selectable` is true.
+         * @defaultValue false
+         */
+        this.disableSelectAll = false;
+        /**
+         * Adds divider borders between table rows. The last row will not have a bottom border.
+         * @defaultValue false
+         */
+        this.rowDividers = false;
+        /**
+         * Sets how the table sizes its columns. With `auto`, each column is sized from its content,
+         * so columns can change width when the rows change (for example after a sort). With `fixed`,
+         * columns take the `width` set on their `pds-table-head-cell` and ignore their content;
+         * columns without a `width` share the remaining space. Under `responsive`, that remaining
+         * share keeps a 120px floor on narrow viewports where the other columns' widths already fill
+         * it, growing the table instead (scrollable) -- without `responsive` there's no floor, since
+         * there would be nothing to scroll the overflow it would create. Content longer than its
+         * column overflows, so add `truncate` to cells whose content may not fit.
+         * @defaultValue 'auto'
+         */
+        this.tableLayout = 'auto';
+        /**
+         * The direction to sort the default column on initial load.
+         * Only applies if `defaultSortColumn` is set.
+         * @defaultValue 'asc'
+         */
+        this.defaultSortDirection = 'asc';
+        /**
+         * The name of the column being sorted.
+         * @defaultValue null
+         */
         this.sortingColumn = null;
+        /**
+         * The direction of sorting.
+         * @defaultValue 'asc'
+         */
         this.sortingDirection = 'asc';
+        /**
+         * `tableLayout` or `responsive` changing at runtime is handled here, deferred to
+         * `componentDidRender` rather than done directly -- a `@Watch` runs before this component's
+         * own re-render, and both the floor's measurement and the responsive scroll setup query
+         * `.pds-table-responsive-container`, which that re-render is what creates or removes. Reading
+         * it any earlier would still see the old tree.
+         */
+        this._pendingFixedLayoutInputsSync = false;
+        /**
+         * Measures the explicit-width columns against the available space and gives the columns with
+         * no `width` of their own (which otherwise share whatever's left) a floor so none of them
+         * squeeze below `AUTO_COLUMN_FLOOR_WIDTH_PX`. Re-run on resize, since the responsive
+         * container's available width can change after load -- and only under `responsive`: that
+         * container is the one thing in this layout the floor's own growth can't also grow, which is
+         * what keeps this from measuring its own effect and oscillating.
+         * @private
+         */
+        this.recalcAutoColumnWidths = () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this.tableLayout !== 'fixed' || !this.responsive)
+                return;
+            const headCells = Array.from(this.el.querySelectorAll('pds-table-head-cell'));
+            const autoCells = [];
+            let explicitWidthPx = 0;
+            for (const cell of headCells) {
+                if (!cell.getAttribute('width')) {
+                    autoCells.push(cell);
+                    continue;
+                }
+                // Measured from layout rather than parsed from the attribute, so any CSS length -- px,
+                // rem, %, a token -- counts correctly, the same as the select-all column below.
+                explicitWidthPx += cell.getBoundingClientRect().width;
+            }
+            if (autoCells.length === 0)
+                return;
+            // A selectable table's select-all column lives in pds-table-head's shadow root, out of reach
+            // of the query above, and its width is a token rather than a px value -- so measure it.
+            if (this.selectable) {
+                const selectAllCell = (_b = (_a = this.el
+                    .querySelector('pds-table-head')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-table-head-cell');
+                explicitWidthPx += (_c = selectAllCell === null || selectAllCell === void 0 ? void 0 : selectAllCell.getBoundingClientRect().width) !== null && _c !== void 0 ? _c : 0;
+            }
+            const measureEl = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.pds-table-responsive-container');
+            const availableWidth = (_e = measureEl === null || measureEl === void 0 ? void 0 : measureEl.clientWidth) !== null && _e !== void 0 ? _e : 0;
+            const sharePerAutoColumn = (availableWidth - explicitWidthPx) / autoCells.length;
+            const needsFloor = sharePerAutoColumn < AUTO_COLUMN_FLOOR_WIDTH_PX;
+            autoCells.forEach((cell) => {
+                if (needsFloor) {
+                    cell.style.setProperty('--pds-table-head-cell-auto-floor-width', `${AUTO_COLUMN_FLOOR_WIDTH_PX}px`);
+                }
+                else {
+                    cell.style.removeProperty('--pds-table-head-cell-auto-floor-width');
+                }
+            });
+            // The floor can widen the table past its container on its own, with no scroll or
+            // container-resize event of its own to trigger the shadows' usual recompute -- reading
+            // `scrollWidth` just below forces the layout the style change above needs anyway.
+            (_f = this._responsiveHandleScroll) === null || _f === void 0 ? void 0 : _f.call(this);
+        };
+        // A `width` attribute change or a new head cell fires this in the same turn as that cell's
+        // own re-render, which is what applies `--pds-table-head-cell-width` -- measuring right away
+        // would still see the previous layout. Deferred one frame, by which point Stencil's own (also
+        // rAF-scheduled) write for that cell has flushed. Resize and window-resize don't need this:
+        // both fire only once layout has already settled.
+        this.scheduleColumnWidthsRecalc = () => {
+            if (this._pendingColumnWidthsRecalc)
+                return;
+            this._pendingColumnWidthsRecalc = true;
+            requestAnimationFrame(() => {
+                // A teardown in the meantime (disconnect, or the floor turning off) leaves this flag
+                // cleared but can't cancel an already-scheduled frame -- checked here so it's a no-op
+                // rather than measuring and writing styles on a table that's no longer set up for it.
+                if (!this._pendingColumnWidthsRecalc)
+                    return;
+                this._pendingColumnWidthsRecalc = false;
+                if (this.el.isConnected)
+                    this.recalcAutoColumnWidths();
+            });
+        };
     }
-    componentWillLoad() {
-        this.sortingColumn = null;
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.attachLifecycleBoundSetup();
+        // Apply default sort if specified
+        // Use requestAnimationFrame to defer until child components are fully initialized
+        if (this.defaultSortColumn) {
+            requestAnimationFrame(() => {
+                void this.applyDefaultSort().catch((err) => {
+                    console.warn('Failed to apply default sort.', err);
+                });
+            });
+        }
+    }
+    /**
+     * Applies the default sort configuration on initial load.
+     * Finds the matching column header and activates its sort state.
+     * @private
+     */
+    async applyDefaultSort() {
+        var _a;
+        // Normalize direction to handle invalid HTML attribute values
+        const direction = this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
+        // Find the matching sortable header cell
+        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
+        const matchingCell = columnHeaderCells.find((cell) => { var _a; return ((_a = cell.textContent) !== null && _a !== void 0 ? _a : '').trim() === this.defaultSortColumn; });
+        if (matchingCell) {
+            const columnName = ((_a = matchingCell.textContent) !== null && _a !== void 0 ? _a : '').trim();
+            // Sort the table data
+            this.sortTable(columnName, direction);
+            this.sortingColumn = columnName;
+            this.sortingDirection = direction;
+            // Activate the visual state on the header cell
+            await matchingCell.setActiveSort(direction);
+        }
+        else {
+            console.warn(`Default sort column "${this.defaultSortColumn}" not found.`);
+        }
+    }
+    /**
+     * Re-attaches the responsive scroll listeners and the fixed-layout width floor after the table
+     * reconnects (it was re-parented, reordered, or moved by a DOM morph) -- `disconnectedCallback`
+     * tears both down, and neither comes back on its own.
+     */
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.attachLifecycleBoundSetup();
+    }
+    attachLifecycleBoundSetup() {
+        if (this.responsive) {
+            this.setupResponsiveScrolling();
+        }
+        if (this.tableLayout === 'fixed' && this.responsive) {
+            this.setupFixedLayoutWidths();
+        }
+    }
+    disconnectedCallback() {
+        if (this._teardownResponsive) {
+            this._teardownResponsive();
+            this._teardownResponsive = null;
+        }
+        this.teardownFixedLayoutWidths();
+        // A disconnect in the same turn as a pending tableLayout/responsive change could be the
+        // table being moved rather than removed for good -- there's no way to tell them apart yet
+        // here, and dropping the pending sync unconditionally would lose a change that's still
+        // coming once a same-turn reconnect's own render flushes. Checked on a microtask instead, by
+        // which point a same-turn reconnect has already happened; a disconnect that sticks still
+        // won't leave anything queued to leak a listener later.
+        if (this._pendingFixedLayoutInputsSync) {
+            queueMicrotask(() => {
+                if (!this.el.isConnected)
+                    this._pendingFixedLayoutInputsSync = false;
+            });
+        }
+    }
+    handleFixedLayoutInputsChange() {
+        this._pendingFixedLayoutInputsSync = true;
+    }
+    componentDidRender() {
+        if (!this._pendingFixedLayoutInputsSync)
+            return;
+        this._pendingFixedLayoutInputsSync = false;
+        this.syncFixedLayoutInputs();
+    }
+    /**
+     * The floor only applies with `tableLayout="fixed"` and `responsive` both set, so either one
+     * changing at runtime can turn it on or off -- and `responsive` on its own also starts or stops
+     * the (separate) scroll listeners, same as it does on first load. A head cell only reads
+     * `tableLayout` during its own render, and the floor this sets lives in inline style, not a
+     * re-render -- so turning the floor off (including live, e.g. the Storybook control) needs
+     * both cleared explicitly, not just the observers torn down. The select-all column reads
+     * `tableLayout` the same way, one level up in `pds-table-head`'s own render, since it owns that
+     * cell rather than letting it through a `<slot>`. A `fixedColumn` cell's own sticky-shadow
+     * scroll listener is bound to this same container, cached on the cell itself -- it stays in
+     * light DOM across this change and never reconnects on its own, so it needs telling directly
+     * rather than finding out the container moved.
+     * @private
+     */
+    syncFixedLayoutInputs() {
+        if (this._teardownResponsive) {
+            this._teardownResponsive();
+            this._teardownResponsive = null;
+        }
+        if (this.responsive)
+            this.setupResponsiveScrolling();
+        this.teardownFixedLayoutWidths();
+        const floorActive = this.tableLayout === 'fixed' && this.responsive;
+        if (floorActive)
+            this.setupFixedLayoutWidths();
+        this.allHeadCells().forEach((cell) => {
+            if (!floorActive)
+                cell.style.removeProperty('--pds-table-head-cell-auto-floor-width');
+            forceUpdate(cell);
+            void cell.rebindScrollListener();
+        });
+        this.allBodyCells().forEach((cell) => {
+            void cell.rebindScrollListener();
+        });
+        const head = this.el.querySelector('pds-table-head');
+        if (head)
+            forceUpdate(head);
+        // The select-all cell's `width` is applied by that `forceUpdate`, which hasn't flushed yet --
+        // the floor's own recalc above just ran against its previous (or absent) width. That cell
+        // sits in `pds-table-head`'s shadow root, out of reach of the mutation observer that would
+        // otherwise catch the change, so this needs scheduling directly rather than left to notice.
+        if (floorActive)
+            this.scheduleColumnWidthsRecalc();
+    }
+    // The select-all cell sits in `pds-table-head`'s own shadow root, and a selectable row's
+    // checkbox cell in its own, rather than coming through a `<slot>` like the rest -- a
+    // light-DOM-only `querySelectorAll` from here never reaches either one.
+    allHeadCells() {
+        var _a;
+        const slotted = Array.from(this.el.querySelectorAll('pds-table-head-cell'));
+        const head = this.el.querySelector('pds-table-head');
+        const ownCell = (_a = head === null || head === void 0 ? void 0 : head.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-table-head-cell');
+        return ownCell ? [...slotted, ownCell] : slotted;
+    }
+    allBodyCells() {
+        const slotted = Array.from(this.el.querySelectorAll('pds-table-cell'));
+        const rows = Array.from(this.el.querySelectorAll('pds-table-row'));
+        const ownCells = rows
+            .map((row) => { var _a; return (_a = row.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-table-cell'); })
+            .filter((cell) => cell !== null);
+        return [...slotted, ...ownCells];
+    }
+    setupFixedLayoutWidths() {
+        this.recalcAutoColumnWidths();
+        if (typeof window === 'undefined')
+            return;
+        this._fixedLayoutHandleResize = () => this.recalcAutoColumnWidths();
+        if (window.ResizeObserver) {
+            try {
+                this._fixedLayoutResizeObserver = new ResizeObserver(this._fixedLayoutHandleResize);
+                this._fixedLayoutResizeObserver.observe(this.el);
+            }
+            catch (error) {
+                // ResizeObserver not available in some environments (e.g., tests); window resize still covers it.
+            }
+        }
+        window.addEventListener('resize', this._fixedLayoutHandleResize);
+        // A column added, removed, or given a different `width` changes the floor calc's inputs,
+        // and none of that is a resize of anything this observes above.
+        if (typeof MutationObserver !== 'undefined') {
+            this._fixedLayoutMutationObserver = new MutationObserver(this.scheduleColumnWidthsRecalc);
+            this._fixedLayoutMutationObserver.observe(this.el, { childList: true, subtree: true, attributeFilter: ['width'] });
+        }
+    }
+    teardownFixedLayoutWidths() {
+        if (this._fixedLayoutResizeObserver) {
+            this._fixedLayoutResizeObserver.disconnect();
+            this._fixedLayoutResizeObserver = null;
+        }
+        if (this._fixedLayoutMutationObserver) {
+            this._fixedLayoutMutationObserver.disconnect();
+            this._fixedLayoutMutationObserver = null;
+        }
+        if (typeof window !== 'undefined' && this._fixedLayoutHandleResize) {
+            window.removeEventListener('resize', this._fixedLayoutHandleResize);
+        }
+        this._fixedLayoutHandleResize = null;
+        this._pendingColumnWidthsRecalc = false;
+    }
+    /**
+     * Sets up responsive scrolling behavior for the table.
+     *
+     * This method creates a horizontal scrolling system where:
+     * - The table content can scroll horizontally when it exceeds the container width
+     * - Scroll shadows appear at the inline-start/end edges to indicate scrollable content
+     * - Fixed columns remain sticky during horizontal scrolling
+     * - Shadows respect border-radius and don't appear when there's nothing to scroll
+     *
+     * Architecture:
+     * - Host element: Contains everything, respects parent constraints
+     * - Container element: Handles horizontal scrolling (overflow-x: auto)
+     * - Shadow elements: Positioned fixed relative to host, show scroll indicators
+     *
+     * @private
+     */
+    setupResponsiveScrolling() {
+        var _a, _b, _c;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        const leftShadow = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.scroll-shadow-left');
+        const rightShadow = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.scroll-shadow-right');
+        if (!container || !leftShadow || !rightShadow)
+            return;
+        // Store container reference for cleanup
+        this.scrollContainer = container;
+        /**
+         * Updates the visibility of scroll shadows based on current scroll position.
+         * Inline-start shadow: shows when scrolled away from start (hidden if fixedColumn is enabled)
+         * Inline-end shadow: shows when there is content to scroll and not at the end
+         */
+        this._responsiveHandleScroll = () => {
+            if (!this.scrollContainer)
+                return;
+            const { scrollWidth, clientWidth } = this.scrollContainer;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollOffset = getScrollOffsetFromStart(this.scrollContainer);
+            // Inline-start shadow when scrolled away from start, but not if there's a fixed column
+            leftShadow.style.opacity = (scrollOffset > 0 && !this.fixedColumn) ? '1' : '0';
+            // Inline-end shadow when there is content to scroll and not at the end
+            rightShadow.style.opacity = (maxScroll > 0 && scrollOffset < maxScroll - 1) ? '1' : '0';
+        };
+        // Add scroll event listener to container element
+        this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });
+        // Add resize observer to update shadows when container size changes
+        if (typeof window !== 'undefined' && window.ResizeObserver) {
+            try {
+                this._responsiveResizeObserver = new ResizeObserver(() => {
+                    var _a;
+                    (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
+                });
+                this._responsiveResizeObserver.observe(this.scrollContainer);
+            }
+            catch (error) {
+                // ResizeObserver not available in some environments (e.g., tests)
+                // Fall back to window resize listener only
+            }
+        }
+        // Listen for window resize as fallback
+        if (typeof window !== 'undefined') {
+            this._responsiveHandleResize = () => {
+                var _a;
+                (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
+            };
+            window.addEventListener('resize', this._responsiveHandleResize);
+        }
+        // Create teardown function for cleanup
+        this._teardownResponsive = () => {
+            if (this.scrollContainer && this._responsiveHandleScroll) {
+                this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);
+                this.scrollContainer = null;
+            }
+            if (this._responsiveResizeObserver) {
+                this._responsiveResizeObserver.disconnect();
+                this._responsiveResizeObserver = null;
+            }
+            if (typeof window !== 'undefined' && this._responsiveHandleResize) {
+                window.removeEventListener('resize', this._responsiveHandleResize);
+                this._responsiveHandleResize = null;
+            }
+            this._responsiveHandleScroll = null;
+        };
+        // Initial check after setup
+        this._responsiveHandleScroll();
     }
     classNames() {
         const classNames = ['pds-table'];
@@ -20,10 +425,16 @@ export class PdsTable {
         if (this.responsive) {
             classNames.push('is-responsive');
         }
+        if (this.tableLayout === 'fixed') {
+            classNames.push('is-fixed-layout');
+        }
         return classNames.join('  ');
     }
     sortTable(column, direction) {
         const tableBody = this.el.querySelector('pds-table-body');
+        // Return early if no table body exists
+        if (!tableBody)
+            return;
         // Get the rows in the table body
         const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
         // Find the column index based on the column name
@@ -39,10 +450,10 @@ export class PdsTable {
             const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
             const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
             if (direction === 'asc') {
-                return valueA.localeCompare(valueB);
+                return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });
             }
             else {
-                return valueB.localeCompare(valueA);
+                return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });
             }
         });
         // Clear and append the sorted rows back to the table body
@@ -52,6 +463,8 @@ export class PdsTable {
         });
     }
     handleTableSort(event) {
+        if (event.defaultPrevented)
+            return;
         const { direction } = event.detail;
         this.sortTable(event.detail.column, direction);
         this.sortingColumn = event.detail.column;
@@ -76,11 +489,16 @@ export class PdsTable {
         if (!pdsTableHead)
             return;
         const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
-        headerCheckbox.checked = allSelectedRows;
-        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+        if (headerCheckbox) {
+            headerCheckbox.checked = allSelectedRows;
+            headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+        }
     }
     render() {
-        return (h(Host, { key: '95cc4db296681faa0fc046c9b1d6807d640b7730', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'ecc9bc0761409d5a2819a05d72290c294e27454f' })));
+        if (this.responsive) {
+            return (h(Host, { class: `${this.classNames()} pds-table-responsive-host`, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, h("div", { class: this.classNames(), part: "table-inner" }, h("slot", null))))));
+        }
+        return (h(Host, { class: this.classNames(), role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, h("slot", null)));
     }
     static get is() { return "pds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -108,10 +526,12 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if table displays compact which reduces the spacing of table cells."
+                    "text": "Determines if the table displays with reduced table cell padding."
                 },
-                "attribute": "compact",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact"
             },
             "componentId": {
                 "type": "string",
@@ -125,10 +545,12 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the table `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "responsive": {
                 "type": "boolean",
@@ -144,8 +566,10 @@ export class PdsTable {
                     "tags": [],
                     "text": "Enables the table to be responsive by horizontally scrolling on smaller screens."
                 },
-                "attribute": "responsive",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive"
             },
             "fixedColumn": {
                 "type": "boolean",
@@ -159,10 +583,12 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if table displays fixed column which fixes the first column of the table."
+                    "text": "Determines if the table displays a fixed first column."
                 },
-                "attribute": "fixed-column",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fixed-column"
             },
             "selectable": {
                 "type": "boolean",
@@ -176,10 +602,123 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if table displays checkboxes for selectable rows."
+                    "text": "Determines if the table displays checkboxes for selectable rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable"
+            },
+            "disableSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.\nOnly applies when `selectable` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-select-all",
+                "defaultValue": "false"
+            },
+            "rowDividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Adds divider borders between table rows. The last row will not have a bottom border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-dividers",
+                "defaultValue": "false"
+            },
+            "tableLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'fixed'",
+                    "resolved": "\"auto\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'auto'"
+                        }],
+                    "text": "Sets how the table sizes its columns. With `auto`, each column is sized from its content,\nso columns can change width when the rows change (for example after a sort). With `fixed`,\ncolumns take the `width` set on their `pds-table-head-cell` and ignore their content;\ncolumns without a `width` share the remaining space. Under `responsive`, that remaining\nshare keeps a 120px floor on narrow viewports where the other columns' widths already fill\nit, growing the table instead (scrollable) -- without `responsive` there's no floor, since\nthere would be nothing to scroll the overflow it would create. Content longer than its\ncolumn overflows, so add `truncate` to cells whose content may not fit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-layout",
+                "defaultValue": "'auto'"
+            },
+            "defaultSortColumn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the column to sort by on initial load.\nMust match the text content of a sortable column header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-sort-column"
+            },
+            "defaultSortDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'asc'"
+                        }],
+                    "text": "The direction to sort the default column on initial load.\nOnly applies if `defaultSortColumn` is set."
                 },
-                "attribute": "selectable",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-sort-direction",
+                "defaultValue": "'asc'"
             }
         };
     }
@@ -191,21 +730,6 @@ export class PdsTable {
     }
     static get events() {
         return [{
-                "method": "pdsTableSelect",
-                "name": "pdsTableSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value."
-                },
-                "complexType": {
-                    "original": "{ rowIndex: number; isSelected: boolean }",
-                    "resolved": "{ rowIndex: number; isSelected: boolean; }",
-                    "references": {}
-                }
-            }, {
                 "method": "pdsTableSelectAll",
                 "name": "pdsTableSelectAll",
                 "bubbles": true,
@@ -213,7 +737,7 @@ export class PdsTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that is emitted when the select all checkbox is clicked, carrying the selected value."
+                    "text": "Event that is emitted by `pds-table-head` when the select all checkbox is clicked, carrying the selected value.\nIt bubbles through the table; the table doesn't emit it itself."
                 },
                 "complexType": {
                     "original": "{ isSelected: boolean }",
@@ -223,6 +747,15 @@ export class PdsTable {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "tableLayout",
+                "methodName": "handleFixedLayoutInputsChange"
+            }, {
+                "propName": "responsive",
+                "methodName": "handleFixedLayoutInputsChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "pdsTableSort",
@@ -245,4 +778,3 @@ export class PdsTable {
             }];
     }
 }
-//# sourceMappingURL=pds-table.js.map