@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,91 +1,1147 @@
 import { Host, h, } from "@stencil/core";
-const getIconType = (sortType) => {
-    switch (sortType) {
-        case 'asc':
-            return 'arrow-up';
-        case 'desc':
-            return 'arrow-down';
-        default:
-            return 'dash';
-    }
-};
-export class XplTable {
+import { TimerManager } from "../../utils/lifecycle";
+import { cycleSortDirection, getGridColumnWidthFromHeaderCell, getIconType, ROW_REORDER_MARK, SELECTION_MARK, } from "./utils/table-internal";
+import { getNearestTableBodyRowFromNode, getNextVisibleTableBodyRowAfter, moveRowInTableBody, } from "./utils/move-row-dom";
+function bodyRowFromDragTarget(target) {
+    return getNearestTableBodyRowFromNode(target);
+}
+function tableBodyRowFromEvent(ev) {
+    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+    const row = path.find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-table-row');
+    return row !== null && row !== void 0 ? row : bodyRowFromDragTarget(ev.target);
+}
+function reorderDragHandleFromEvent(ev) {
+    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+    const handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
+    return handle !== null && handle !== void 0 ? handle : null;
+}
+export class Table {
     constructor() {
-        this.selectedValues = [];
-        this.isSortable = false;
-        this.sortableColumns = [];
+        this.columnWidthsToken = '';
+        this.lastEmittedRowSelectionKey = '';
+        this.selectAllValue = Math.random().toString(36).slice(2);
+        this.draggedRow = null;
+        this.pendingDragRow = null;
+        this.pointerUpClearPending = null;
+        this.reorderKeyboardTimers = new TimerManager();
+        this.onReorderHandleKeydown = (ev) => {
+            this.handleReorderHandleKeyDown(ev);
+        };
         this.areAllSelected = false;
+        this.colCount = 0;
         this.hasScrolled = false;
+        this.keyboardReorderRowId = null;
+        this.reorderLiveMessage = '';
+        this.rowData = [];
+        this.rowFooterData = [];
+        this.selected = [];
+        this.selectedRowIds = [];
         this.sortTypeArray = [];
-        this.selectAllValue = Math.random().toString(36).slice(2);
+        this.isSortable = false;
+        this.selectedValues = [];
+        this.sortableColumns = [];
+        this.onGridScroll = (e) => {
+            this.hasScrolled = e.target.scrollLeft > 0;
+        };
         this.selectAll = (e) => {
             const { target } = e;
             if (!(target instanceof HTMLInputElement))
                 return;
-            const { checked } = target;
-            this.areAllSelected = checked;
-            this.selected =
-                this.selectedValues.length > 0
-                    ?
-                        Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => checked ? input === null || input === void 0 ? void 0 : input.value : checked)
-                    : this.selected.map(() => checked);
-            this.onChange();
-        };
-        this.selectOne = (e, checkboxIdx) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
+            const { checked } = target;
+            this.areAllSelected = checked;
+            this.selected =
+                this.selectedValues.length > 0
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => (checked ? input === null || input === void 0 ? void 0 : input.value : checked))
+                    : this.selected.map(() => checked);
+            this.onSelectionChange();
+        };
+        this.selectOne = (e, checkboxIdx) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked, value } = target;
+            this.areAllSelected = false;
+            this.selected = this.selected.map((v, selectedIdx) => {
+                if (selectedIdx !== checkboxIdx)
+                    return v;
+                return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
+            });
+            this.onSelectionChange();
+        };
+        this.onSelectionChange = () => {
+            this.tableSelect.emit({
+                selected: this.selected,
+                areAllSelected: this.areAllSelected,
+            });
+        };
+        this.onLegacyScroll = () => {
+            this.hasScrolled = this.container.scrollLeft > 0;
+        };
+        this.sortBy = (col, sortTypeArray) => {
+            const handleSort = (a, b) => {
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase())
+                    return -1;
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase())
+                    return 1;
+                return 0;
+            };
+            switch (sortTypeArray[col]) {
+                case 'asc':
+                    this.rowData.sort((a, b) => handleSort(a, b));
+                    break;
+                case 'desc':
+                    this.rowData.sort((a, b) => handleSort(b, a));
+                    break;
+                default:
+                    this.rowData = this.data;
+                    this.sortTypeArray[col] = null;
+                    break;
+            }
+            this.rowData = Array.from(this.rowData);
+        };
+        this.setData = () => {
+            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        };
+        this.setFooterData = () => {
+            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
+        };
+    }
+    watchColumns() {
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    }
+    watchData() {
+        this.setData();
+    }
+    watchFooterData() {
+        this.setFooterData();
+    }
+    watchReorderHandleIcon() {
+        if (this.isLegacyMode || !this.rowReorderable)
+            return;
+        this.syncInjectedReorderHandleIcons();
+    }
+    watchReorderHandleIconKeyboard() {
+        if (this.isLegacyMode || !this.rowReorderable)
+            return;
+        this.syncInjectedReorderHandleIcons();
+    }
+    watchRowReorderable(next) {
+        if (this.isLegacyMode)
+            return;
+        if (!next) {
+            this.keyboardReorderRowId = null;
+            this.syncReorderHandleKeyboardA11y(null);
+            this.removeManagedReorderCells();
+            this.draggedRow = null;
+            this.pendingDragRow = null;
+            this.clearPendingDragListeners();
+            this.reorderLiveMessage = '';
+            this.queryBodyRows().forEach((r) => {
+                var _a;
+                r.removeAttribute('draggable');
+                (_a = r.querySelector('.xpl-table__row-drag-handle')) === null || _a === void 0 ? void 0 : _a.removeAttribute('draggable');
+                r.classList.remove('xpl-table-row--dragging', 'xpl-table-row--drag-over');
+            });
+            this.colCount = 0;
+            this.columnWidthsToken = '';
+        }
+    }
+    watchSelectable(next) {
+        if (this.isLegacyMode)
+            return;
+        if (!next) {
+            this.selectedRowIds = [];
+            this.lastEmittedRowSelectionKey = '';
+            this.colCount = 0;
+            this.columnWidthsToken = '';
+            this.syncRowSelectedProps();
+        }
+    }
+    componentWillLoad() {
+        if (this.isLegacyMode) {
+            this.areAllSelected = false;
+            this.setData();
+            this.setFooterData();
+            this.selected = new Array(this.rowData.length).fill(false);
+            this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+        }
+    }
+    componentDidLoad() {
+        if (!this.isLegacyMode) {
+            this.syncCompositionalLayout();
+        }
+    }
+    componentDidUpdate() {
+        if (!this.isLegacyMode) {
+            this.syncCompositionalLayout();
+        }
+    }
+    disconnectedCallback() {
+        this.clearPendingDragListeners();
+        this.detachReorderHandleKeydownListeners();
+        this.reorderKeyboardTimers.dispose();
+        if (this.reorderAnnounceRaf !== undefined) {
+            cancelAnimationFrame(this.reorderAnnounceRaf);
+            this.reorderAnnounceRaf = undefined;
+        }
+    }
+    handleHeaderCellColumnWidthsChange(ev) {
+        if (this.isLegacyMode)
+            return;
+        const t = ev.target;
+        if (!(t instanceof Node) || !this.el.contains(t))
+            return;
+        this.updateColumnWidths();
+    }
+    handleCompositionalCheckboxChange(ev) {
+        var _a, _b;
+        if (this.isLegacyMode || !this.selectable)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
+        let checkboxHost = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-checkbox');
+        if (!checkboxHost &&
+            ev.target &&
+            typeof ev.target.closest === 'function') {
+            checkboxHost = ev.target.closest('xpl-checkbox');
+        }
+        if (!checkboxHost || !this.el.contains(checkboxHost))
+            return;
+        const row = checkboxHost.closest('xpl-table-row');
+        if (!row || !this.isDirectChildBodyRow(row))
+            return;
+        const cell = checkboxHost.closest('xpl-table-cell');
+        if (!cell)
+            return;
+        const selectionIdx = this.getSelectionColumnIndex();
+        if (selectionIdx === null)
+            return;
+        const bodyCells = Table.getBodyRowCells(row);
+        const colIdx = bodyCells.indexOf(cell);
+        if (colIdx !== selectionIdx)
+            return;
+        ev.stopPropagation();
+        const rowId = Table.getRowIdForRow(row);
+        if (!rowId || row.disabled)
+            return;
+        const input = checkboxHost.querySelector('input[type="checkbox"]');
+        if (!input)
+            return;
+        const { checked } = input;
+        if (checked) {
+            if (!this.selectedRowIds.includes(rowId)) {
+                this.selectedRowIds = [...this.selectedRowIds, rowId];
+            }
+        }
+        else {
+            this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);
+        }
+        this.applyHeaderCheckboxState();
+        this.syncRowSelectedProps();
+        this.emitCompositionalSelection();
+    }
+    handleCompositionalHeaderCheckboxChange(ev) {
+        var _a, _b;
+        if (this.isLegacyMode || !this.selectable)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
+        let headerCell = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement &&
+            n.tagName.toLowerCase() === 'xpl-table-header-cell' &&
+            n.getAttribute('type') === 'checkbox');
+        if (!headerCell && ev.target && typeof ev.target.closest === 'function') {
+            headerCell = ev.target.closest('xpl-table-header-cell[type="checkbox"]');
+        }
+        if (!headerCell || !this.el.contains(headerCell))
+            return;
+        if (!this.isCellInOurCompositionalHeader(headerCell))
+            return;
+        const headerCells = this.getCompositionalHeaderCells();
+        if (!headerCells.includes(headerCell))
+            return;
+        const checked = !!ev.detail;
+        const selectableRows = this.querySelectableBodyRows();
+        const ids = selectableRows
+            .map((r) => Table.getRowIdForRow(r))
+            .filter((id) => !!id);
+        if (checked) {
+            this.selectedRowIds = [...ids];
+        }
+        else {
+            this.selectedRowIds = [];
+        }
+        this.applyBodyCheckboxStates();
+        this.syncRowSelectedProps();
+        this.emitCompositionalSelection();
+    }
+    handlePointerDownExitKeyboardReorder(ev) {
+        if (this.isLegacyMode || !this.rowReorderable || this.keyboardReorderRowId === null) {
+            return;
+        }
+        const t = ev.target;
+        if (!(t instanceof Node) || !this.el.contains(t)) {
+            return;
+        }
+        const row = t instanceof Element ? t.closest('xpl-table-row') : null;
+        if (!row || !this.isDirectChildBodyRow(row)) {
+            return;
+        }
+        this.keyboardReorderRowId = null;
+        this.syncReorderHandleKeyboardA11y(null);
+    }
+    handleReorderHandleKeyDown(ev) {
+        var _a;
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const rawPath = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+        const path = rawPath.length > 0 ? rawPath : ev.target ? [ev.target] : [];
+        let handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
+        if (!handle &&
+            ev.target instanceof HTMLElement &&
+            ev.target.classList.contains('xpl-table__row-drag-handle')) {
+            handle = ev.target;
+        }
+        if (!handle || !this.el.contains(handle)) {
+            return;
+        }
+        const row = handle.closest('xpl-table-row');
+        if (!row || !this.isDirectChildBodyRow(row)) {
+            return;
+        }
+        const rowId = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
+        if (!rowId) {
+            return;
+        }
+        const isKbd = this.keyboardReorderRowId === rowId;
+        const isEscapeKey = ev.key === 'Escape' ||
+            ev.key === 'Esc' ||
+            ev.code === 'Escape' ||
+            ev.keyCode === 27;
+        if (row.disabled) {
+            if (isEscapeKey && isKbd) {
+                ev.preventDefault();
+                this.keyboardReorderRowId = null;
+                this.syncReorderHandleKeyboardA11y(null);
+            }
+            return;
+        }
+        if (isEscapeKey) {
+            if (isKbd) {
+                ev.preventDefault();
+                this.keyboardReorderRowId = null;
+                this.syncReorderHandleKeyboardA11y(null);
+            }
+            return;
+        }
+        if (!isKbd) {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.keyboardReorderRowId = rowId;
+                this.syncReorderHandleKeyboardA11y(rowId);
+            }
+            return;
+        }
+        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            const dir = ev.key === 'ArrowUp' ? 'up' : 'down';
+            this.performKeyboardRowReorder(rowId, dir);
+        }
+    }
+    handleRowReorderPointerDown(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const handle = reorderDragHandleFromEvent(ev);
+        if (!handle) {
+            return;
+        }
+        const table = handle.closest('xpl-table');
+        if (table !== this.el) {
+            return;
+        }
+        const row = bodyRowFromDragTarget(handle);
+        if (!row || row.disabled) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body) {
+            return;
+        }
+        this.clearPendingDragListeners();
+        this.pendingDragRow = row;
+        const onPointerEnd = () => {
+            this.clearPendingDragListeners();
+            this.pendingDragRow = null;
+        };
+        document.addEventListener('pointerup', onPointerEnd, true);
+        document.addEventListener('pointercancel', onPointerEnd, true);
+        this.pointerUpClearPending = () => {
+            document.removeEventListener('pointerup', onPointerEnd, true);
+            document.removeEventListener('pointercancel', onPointerEnd, true);
+        };
+    }
+    handleRowReorderDragStart(ev) {
+        var _a;
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row) {
+            return;
+        }
+        if (row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body) {
+            return;
+        }
+        if (row.disabled || this.pendingDragRow !== row) {
+            ev.preventDefault();
+            return;
+        }
+        this.keyboardReorderRowId = null;
+        this.syncReorderHandleKeyboardA11y(null);
+        this.clearPendingDragListeners();
+        this.pendingDragRow = null;
+        this.draggedRow = row;
+        if (ev.dataTransfer) {
+            ev.dataTransfer.effectAllowed = 'move';
+            ev.dataTransfer.setData('text/plain', (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '');
+        }
+        row.classList.add('xpl-table-row--dragging');
+    }
+    handleRowReorderDragEnd(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        row.classList.remove('xpl-table-row--dragging');
+        this.clearReorderDragOverClasses();
+        this.draggedRow = null;
+    }
+    handleRowReorderDragOver(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body || row.disabled) {
+            return;
+        }
+        ev.preventDefault();
+        if (ev.dataTransfer) {
+            ev.dataTransfer.dropEffect = 'move';
+        }
+    }
+    handleRowReorderDragEnter(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body || row.disabled) {
+            return;
+        }
+        ev.preventDefault();
+        row.classList.add('xpl-table-row--drag-over');
+    }
+    handleRowReorderDragLeave(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const related = ev.relatedTarget;
+        if (related && row.contains(related)) {
+            return;
+        }
+        row.classList.remove('xpl-table-row--drag-over');
+    }
+    handleRowReorderDrop(ev) {
+        var _a;
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        ev.preventDefault();
+        const dropRow = tableBodyRowFromEvent(ev);
+        if (!dropRow || dropRow.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || dropRow.parentElement !== body || dropRow.disabled) {
+            return;
+        }
+        const source = this.draggedRow;
+        if (!source || source.disabled) {
+            this.draggedRow = null;
+            this.clearReorderDragOverClasses();
+            return;
+        }
+        if (source === dropRow) {
+            this.clearReorderDragOverClasses();
+            return;
+        }
+        const visible = this.getVisibleBodyRowsForReorder();
+        const fromIndex = visible.indexOf(source);
+        const toIndex = visible.indexOf(dropRow);
+        if (fromIndex === -1 || toIndex === -1) {
+            this.clearReorderDragOverClasses();
+            return;
+        }
+        const direction = fromIndex > toIndex ? 'up' : 'down';
+        const rowId = (_a = Table.getRowIdForRow(source)) !== null && _a !== void 0 ? _a : '';
+        const runMove = () => {
+            moveRowInTableBody(body, source, dropRow);
+        };
+        runMove();
+        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => { var _a; return (_a = Table.getRowIdForRow(r)) !== null && _a !== void 0 ? _a : ''; });
+        this.rowOrderChange.emit({
+            rowId,
+            direction,
+            orderedRowIds,
+            fromIndex,
+            toIndex,
+        });
+        this.announceRowReorder(rowId, orderedRowIds);
+        this.clearReorderDragOverClasses();
+        if (this.selectable) {
+            this.applyBodyCheckboxStates();
+            this.applyHeaderCheckboxState();
+            this.syncRowSelectedProps();
+        }
+        this.updateColumnWidths();
+    }
+    get isLegacyMode() {
+        return this.columns !== undefined || this.data !== undefined || this.footer !== undefined;
+    }
+    ensureTableInstanceId() {
+        if (this.tableInstanceId)
+            return;
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            this.tableInstanceId = crypto.randomUUID();
+        }
+        else {
+            this.tableInstanceId = Math.random().toString(36).slice(2);
+        }
+    }
+    generateRowId() {
+        this.ensureTableInstanceId();
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return `${this.tableInstanceId}-${crypto.randomUUID()}`;
+        }
+        return `${this.tableInstanceId}-${Math.random().toString(36).slice(2)}`;
+    }
+    syncCompositionalLayout() {
+        if (this.isLegacyMode)
+            return;
+        if (this.rowReorderable) {
+            this.syncReorderColumn();
+        }
+        else {
+            this.removeManagedReorderCells();
+        }
+        if (this.selectable) {
+            this.ensureTableInstanceId();
+            this.pruneStaleSelectedRowIds();
+            this.ensureBodyRowIds();
+            this.applyBodyCheckboxStates();
+            this.applyHeaderCheckboxState();
+            this.syncRowSelectedProps();
+        }
+        if (this.rowReorderable && this.selectable) {
+            this.normalizeManagedColumnsOrder();
+        }
+        this.updateColumnWidths();
+    }
+    getDirectChildTableSection(tag) {
+        var _a;
+        const el = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === tag);
+        return (_a = el) !== null && _a !== void 0 ? _a : null;
+    }
+    isDirectChildBodyRow(row) {
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        return body !== null && row.parentElement === body;
+    }
+    isCellInOurCompositionalHeader(cell) {
+        const header = cell.closest('xpl-table-header');
+        return header !== null && header.parentElement === this.el;
+    }
+    getSelectionColumnIndex() {
+        const headerCells = this.getCompositionalHeaderCells();
+        const idx = headerCells.findIndex((c) => c.getAttribute('type') === 'checkbox');
+        return idx >= 0 ? idx : null;
+    }
+    static getBodyRowCells(row) {
+        return Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell');
+    }
+    queryBodyRows() {
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body)
+            return [];
+        return Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+    }
+    querySelectableBodyRows() {
+        return this.queryBodyRows().filter((row) => !row.disabled);
+    }
+    static getRowIdForRow(row) {
+        var _a;
+        const id = (_a = row.getAttribute('row-id')) === null || _a === void 0 ? void 0 : _a.trim();
+        return id || null;
+    }
+    ensureBodyRowIds() {
+        this.queryBodyRows().forEach((row) => {
+            if (Table.getRowIdForRow(row))
+                return;
+            row.setAttribute('row-id', this.generateRowId());
+        });
+    }
+    removeManagedReorderCells() {
+        this.el.querySelectorAll(`[${ROW_REORDER_MARK}]`).forEach((node) => {
+            var _a;
+            if (!(node instanceof Element))
+                return;
+            if (node.closest('xpl-table') !== this.el)
+                return;
+            (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+        });
+    }
+    getSelectionSlotCellForReorderOrder(row) {
+        const idx = this.getSelectionColumnIndex();
+        if (idx === null) {
+            return null;
+        }
+        const cells = Array.from(row.children);
+        const cell = cells[idx];
+        if (!cell) {
+            return null;
+        }
+        const tag = cell.tagName.toLowerCase();
+        if (tag === 'xpl-table-header-cell') {
+            return cell.getAttribute('type') === 'checkbox' ? cell : null;
+        }
+        if (tag === 'xpl-table-cell') {
+            if (cell.hasAttribute(SELECTION_MARK)) {
+                return cell;
+            }
+            return cell.querySelector('xpl-checkbox') ? cell : null;
+        }
+        if (tag === 'xpl-table-footer-cell') {
+            return cell;
+        }
+        return null;
+    }
+    normalizeManagedColumnsOrder() {
+        var _a;
+        const fix = (row) => {
+            const re = row.querySelector(`:scope > [${ROW_REORDER_MARK}]`);
+            const se = this.getSelectionSlotCellForReorderOrder(row);
+            if (!re || !se) {
+                return;
+            }
+            const siblings = Array.from(row.children);
+            const iRe = siblings.indexOf(re);
+            const iSe = siblings.indexOf(se);
+            if (iRe > iSe) {
+                row.insertBefore(re, se);
+            }
+        };
+        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
+        if (header) {
+            const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+            const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
+            fix(container);
+        }
+        this.queryBodyRows().forEach((row) => fix(row));
+        const footer = this.getDirectChildTableSection('xpl-table-footer');
+        if (footer) {
+            Array.from(footer.children)
+                .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
+                .forEach((row) => fix(row));
+        }
+    }
+    syncReorderColumn() {
+        if (!this.rowReorderable || this.isLegacyMode)
+            return;
+        this.ensureBodyRowIds();
+        this.ensureHeaderReorderCell();
+        this.ensureBodyReorderCells();
+        this.ensureFooterReorderCells();
+        this.applyReorderRowDraggableState();
+    }
+    ensureHeaderReorderCell() {
+        var _a;
+        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
+        if (!header)
+            return;
+        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+        const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
+        if (Array.from(container.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell' &&
+            c.hasAttribute(ROW_REORDER_MARK))) {
+            return;
+        }
+        const cell = document.createElement('xpl-table-header-cell');
+        cell.setAttribute(ROW_REORDER_MARK, '');
+        cell.setAttribute('type', 'empty');
+        cell.setAttribute('width', '48');
+        cell.setAttribute('align', 'center');
+        container.insertBefore(cell, container.firstChild);
+    }
+    ensureBodyReorderCells() {
+        this.queryBodyRows().forEach((row) => {
+            var _a;
+            const managed = Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell' &&
+                c.hasAttribute(ROW_REORDER_MARK));
+            if (managed.length > 1) {
+                for (let i = 1; i < managed.length; i += 1) {
+                    managed[i].remove();
+                }
+            }
+            let cell = managed[0];
+            if (!cell) {
+                const newCell = document.createElement('xpl-table-cell');
+                newCell.setAttribute(ROW_REORDER_MARK, '');
+                newCell.setAttribute('width', '48');
+                newCell.setAttribute('align', 'center');
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'xpl-table__row-drag-handle';
+                btn.setAttribute('aria-label', 'Reorder row');
+                btn.setAttribute('aria-pressed', 'false');
+                const iconName = this.getResolvedIconForRow((_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '');
+                if (iconName) {
+                    const icon = document.createElement('xpl-icon');
+                    icon.setAttribute('icon', iconName);
+                    icon.setAttribute('size', '16');
+                    btn.appendChild(icon);
+                }
+                newCell.appendChild(btn);
+                row.insertBefore(newCell, row.firstChild);
+                cell = newCell;
+            }
+            else {
+                cell.setAttribute('align', 'center');
+            }
+            const btn = cell.querySelector('.xpl-table__row-drag-handle');
+            if (btn) {
+                btn.disabled = row.disabled;
+            }
+        });
+        this.syncInjectedReorderHandleIcons();
+        this.attachReorderHandleKeydownListeners();
+    }
+    getResolvedIconForRow(rowId) {
+        var _a, _b;
+        const inKeyboardMode = this.keyboardReorderRowId !== null &&
+            rowId !== '' &&
+            rowId === this.keyboardReorderRowId;
+        if (inKeyboardMode) {
+            if (this.reorderHandleIconKeyboard === '') {
+                return null;
+            }
+            return (_a = this.reorderHandleIconKeyboard) !== null && _a !== void 0 ? _a : 'caret-expand-y';
+        }
+        if (this.reorderHandleIcon === '') {
+            return null;
+        }
+        return (_b = this.reorderHandleIcon) !== null && _b !== void 0 ? _b : 'grip-dots-vertical';
+    }
+    syncInjectedReorderHandleIcons() {
+        this.queryBodyRows().forEach((row) => {
+            var _a;
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn) {
+                return;
+            }
+            const rowId = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
+            const iconName = this.getResolvedIconForRow(rowId);
+            btn.querySelectorAll('xpl-icon').forEach((n) => n.remove());
+            if (iconName) {
+                const icon = document.createElement('xpl-icon');
+                icon.setAttribute('icon', iconName);
+                icon.setAttribute('size', '16');
+                btn.appendChild(icon);
+            }
+        });
+    }
+    syncReorderHandleKeyboardA11y(activeId) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        this.queryBodyRows().forEach((row) => {
+            var _a;
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn) {
+                return;
+            }
+            const rid = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
+            const isActive = activeId !== null && rid === activeId;
+            btn.classList.toggle('xpl-table__row-drag-handle--keyboard-mode', isActive);
+            btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+            btn.setAttribute('aria-label', isActive
+                ? 'Press arrow up or down to reorder, Escape to exit'
+                : 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder');
+        });
+        this.syncInjectedReorderHandleIcons();
+    }
+    attachReorderHandleKeydownListeners() {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn || btn.dataset.xplReorderKbdBound === 'true') {
+                return;
+            }
+            btn.dataset.xplReorderKbdBound = 'true';
+            btn.addEventListener('keydown', this.onReorderHandleKeydown);
+        });
+    }
+    detachReorderHandleKeydownListeners() {
+        if (!this.el) {
+            return;
+        }
+        this.el
+            .querySelectorAll('.xpl-table__row-drag-handle[data-xpl-reorder-kbd-bound="true"]')
+            .forEach((btn) => {
+            btn.removeEventListener('keydown', this.onReorderHandleKeydown);
+            delete btn.dataset.xplReorderKbdBound;
+        });
+    }
+    performKeyboardRowReorder(rowId, direction) {
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body) {
+            return false;
+        }
+        const visible = this.getVisibleBodyRowsForReorder();
+        const itemIndex = visible.findIndex((r) => Table.getRowIdForRow(r) === rowId);
+        if (itemIndex === -1) {
+            return false;
+        }
+        const targetIndex = direction === 'up' ? itemIndex - 1 : itemIndex + 1;
+        if (targetIndex < 0 || targetIndex >= visible.length) {
+            return false;
+        }
+        const fromIndex = itemIndex;
+        const item = visible[itemIndex];
+        const targetItem = visible[targetIndex];
+        if (direction === 'up') {
+            body.insertBefore(item, targetItem);
+        }
+        else {
+            const nextVisible = getNextVisibleTableBodyRowAfter(targetItem);
+            if (nextVisible) {
+                body.insertBefore(item, nextVisible);
+            }
+            else {
+                body.appendChild(item);
+            }
+        }
+        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => { var _a; return (_a = Table.getRowIdForRow(r)) !== null && _a !== void 0 ? _a : ''; });
+        const toIndex = orderedRowIds.indexOf(rowId);
+        this.rowOrderChange.emit({
+            rowId,
+            direction,
+            orderedRowIds,
+            fromIndex,
+            toIndex,
+        });
+        this.announceRowReorder(rowId, orderedRowIds);
+        this.clearReorderDragOverClasses();
+        if (this.selectable) {
+            this.applyBodyCheckboxStates();
+            this.applyHeaderCheckboxState();
+            this.syncRowSelectedProps();
+        }
+        this.updateColumnWidths();
+        this.reorderKeyboardTimers.requestAnimationFrame(() => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            const moved = this.getVisibleBodyRowsForReorder().find((r) => Table.getRowIdForRow(r) === rowId);
+            const btn = moved === null || moved === void 0 ? void 0 : moved.querySelector('.xpl-table__row-drag-handle');
+            btn === null || btn === void 0 ? void 0 : btn.focus();
+        });
+        return true;
+    }
+    ensureFooterReorderCells() {
+        const footer = this.getDirectChildTableSection('xpl-table-footer');
+        if (!footer)
+            return;
+        Array.from(footer.children)
+            .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
+            .forEach((row) => {
+            if (Array.from(row.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-footer-cell' &&
+                c.hasAttribute(ROW_REORDER_MARK))) {
+                return;
+            }
+            const cell = document.createElement('xpl-table-footer-cell');
+            cell.setAttribute(ROW_REORDER_MARK, '');
+            cell.setAttribute('width', '48');
+            cell.setAttribute('align', 'center');
+            row.insertBefore(cell, row.firstChild);
+        });
+    }
+    static supportsSubgridBodyRow() {
+        return (typeof CSS !== 'undefined' &&
+            typeof CSS.supports === 'function' &&
+            CSS.supports('grid-template-columns', 'subgrid'));
+    }
+    applyReorderRowDraggableState() {
+        const useRowDrag = Table.supportsSubgridBodyRow();
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            btn === null || btn === void 0 ? void 0 : btn.removeAttribute('draggable');
+            row.removeAttribute('draggable');
+            if (!this.rowReorderable || row.disabled) {
+                return;
+            }
+            if (!btn) {
+                return;
+            }
+            if (useRowDrag) {
+                row.setAttribute('draggable', 'true');
+            }
+            else {
+                btn.setAttribute('draggable', 'true');
+            }
+        });
+    }
+    getVisibleBodyRowsForReorder() {
+        return this.queryBodyRows().filter((r) => !r.hasAttribute('hidden'));
+    }
+    clearReorderDragOverClasses() {
+        this.queryBodyRows().forEach((r) => r.classList.remove('xpl-table-row--drag-over'));
+    }
+    clearPendingDragListeners() {
+        if (this.pointerUpClearPending) {
+            this.pointerUpClearPending();
+            this.pointerUpClearPending = null;
+        }
+    }
+    announceRowReorder(movedRowId, orderedRowIds) {
+        if (!this.rowReorderable || !movedRowId) {
+            return;
+        }
+        const index = orderedRowIds.indexOf(movedRowId);
+        if (index < 0) {
+            return;
+        }
+        this.reorderLiveMessage = '';
+        if (this.reorderAnnounceRaf !== undefined) {
+            cancelAnimationFrame(this.reorderAnnounceRaf);
+        }
+        this.reorderAnnounceRaf = requestAnimationFrame(() => {
+            this.reorderAnnounceRaf = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.reorderLiveMessage = `Row ${movedRowId}, now position ${index + 1} of ${orderedRowIds.length}`;
+        });
+    }
+    pruneStaleSelectedRowIds() {
+        const validIds = new Set(this.queryBodyRows()
+            .map((r) => Table.getRowIdForRow(r))
+            .filter((id) => !!id));
+        const next = this.selectedRowIds.filter((id) => validIds.has(id));
+        if (next.length === this.selectedRowIds.length)
+            return;
+        this.selectedRowIds = next;
+        this.applyBodyCheckboxStates();
+        this.applyHeaderCheckboxState();
+        this.syncRowSelectedProps();
+        this.emitCompositionalSelection();
+    }
+    static getBodyRowCheckboxAriaLabel(row, selectionColIndex) {
+        var _a, _b;
+        const cells = Table.getBodyRowCells(row);
+        const labelCell = cells.find((c, i) => (selectionColIndex === null || i !== selectionColIndex) &&
+            !c.hasAttribute(ROW_REORDER_MARK));
+        const first = labelCell !== null && labelCell !== void 0 ? labelCell : cells[0];
+        if (!first)
+            return 'Select row';
+        const raw = (_b = (_a = first.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim()) !== null && _b !== void 0 ? _b : '';
+        if (!raw)
+            return 'Select row';
+        const truncated = raw.length > 100 ? `${raw.slice(0, 100)}…` : raw;
+        return `Select row, ${truncated}`;
+    }
+    applyBodyCheckboxStates() {
+        const selectionIdx = this.getSelectionColumnIndex();
+        if (selectionIdx === null)
+            return;
+        this.queryBodyRows().forEach((row) => {
+            const rowId = Table.getRowIdForRow(row);
+            const cells = Table.getBodyRowCells(row);
+            const cell = cells[selectionIdx];
+            const cb = cell === null || cell === void 0 ? void 0 : cell.querySelector('xpl-checkbox');
+            if (!cb || !rowId)
+                return;
+            cb.checked = this.selectedRowIds.includes(rowId);
+            cb.disabled = row.disabled;
+            cb.value = rowId;
+            cb.setAttribute('aria-label', Table.getBodyRowCheckboxAriaLabel(row, selectionIdx));
+        });
+    }
+    getHeaderCheckboxCell() {
+        const idx = this.getSelectionColumnIndex();
+        if (idx === null)
+            return null;
+        const cells = this.getCompositionalHeaderCells();
+        const cell = cells[idx];
+        if (!cell || cell.getAttribute('type') !== 'checkbox')
+            return null;
+        return cell;
+    }
+    applyHeaderCheckboxState() {
+        const cell = this.getHeaderCheckboxCell();
+        if (!cell)
+            return;
+        const selectableRows = this.querySelectableBodyRows();
+        const ids = selectableRows
+            .map((r) => Table.getRowIdForRow(r))
+            .filter((id) => !!id);
+        const selectedCount = ids.filter((id) => this.selectedRowIds.includes(id)).length;
+        const allSelected = ids.length > 0 && selectedCount === ids.length;
+        const indeterminate = selectedCount > 0 && !allSelected;
+        cell.checked = allSelected;
+        cell.indeterminate = indeterminate;
+    }
+    syncRowSelectedProps() {
+        this.queryBodyRows().forEach((row) => {
+            const id = Table.getRowIdForRow(row);
+            const selected = id ? this.selectedRowIds.includes(id) : false;
+            row.selected = selected;
+        });
+    }
+    emitCompositionalSelection() {
+        const ids = this.selectedRowIds;
+        const key = ids.join('\u0001');
+        if (key === this.lastEmittedRowSelectionKey) {
+            return;
+        }
+        this.lastEmittedRowSelectionKey = key;
+        this.rowSelectionChange.emit({ selectedRowIds: [...ids] });
+    }
+    isEventFromThisTable(target) {
+        if (target == null || typeof target !== 'object')
+            return false;
+        const t = target;
+        const start = 'closest' in t && typeof t.closest === 'function'
+            ? t
+            : 'parentElement' in t
+                ? t.parentElement
+                : null;
+        if (!start)
+            return false;
+        const nearest = start.closest('xpl-table');
+        return nearest === this.el;
+    }
+    static sortKeyFromHeaderCell(cell, columnIndex) {
+        var _a, _b;
+        const c = cell;
+        const raw = ((_b = (_a = c.sortKey) !== null && _a !== void 0 ? _a : c.label) !== null && _b !== void 0 ? _b : '').trim();
+        if (raw.length > 0) {
+            return raw.replace(/ /g, '-').toLowerCase();
+        }
+        return `column-${columnIndex}`;
+    }
+    handleCompositionalHeaderSort(ev) {
+        var _a;
+        if (this.isLegacyMode)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const source = ev.target;
+        const headerRow = (_a = source.closest('xpl-table-header xpl-table-row')) !== null && _a !== void 0 ? _a : source.closest('xpl-table-row');
+        if (!headerRow || !this.el.contains(headerRow))
+            return;
+        const cells = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
+        const { columnIndex } = ev.detail;
+        const target = cells[columnIndex];
+        if (!(target === null || target === void 0 ? void 0 : target.sortable))
+            return;
+        const next = cycleSortDirection(target.sortDirection);
+        cells.forEach((cell, i) => {
+            const hc = cell;
+            if (!hc.sortable)
+                return;
+            hc.sortDirection = i === columnIndex ? next : null;
+        });
+        const sortState = {};
+        cells.forEach((cell, i) => {
+            var _a;
+            const hc = cell;
+            if (!hc.sortable)
                 return;
-            const { checked, value } = target;
-            this.areAllSelected = false;
-            this.selected = this.selected.map((v, selectedIdx) => {
-                if (selectedIdx !== checkboxIdx)
-                    return v;
-                return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
-            });
-            this.onChange();
-        };
-        this.onChange = () => {
-            this.tableSelect.emit({
-                selected: this.selected,
-                areAllSelected: this.areAllSelected,
-            });
-        };
-        this.onScroll = () => {
-            this.hasScrolled = this.container.scrollLeft > 0;
-        };
-        this.sortBy = (col, sortTypeArray) => {
-            const handleSort = (a, b) => {
-                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
-                    return -1;
-                }
-                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
-                    return 1;
-                }
-                return 0;
-            };
-            switch (sortTypeArray[col]) {
-                case 'asc':
-                    this.rowData.sort((a, b) => handleSort(a, b));
-                    break;
-                case 'desc':
-                    this.rowData.sort((a, b) => handleSort(b, a));
-                    break;
-                default:
-                    this.rowData = this.data;
-                    this.sortTypeArray[col] = null;
-                    break;
-            }
-            this.rowData = Array.from(this.rowData);
-            this.render();
-        };
-        this.setData = () => {
-            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-        };
-        this.setFooterData = () => {
-            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
-        };
+            sortState[Table.sortKeyFromHeaderCell(hc, i)] = (_a = hc.sortDirection) !== null && _a !== void 0 ? _a : null;
+        });
+        const sortTypeArr = cells.map((cell) => {
+            var _a;
+            const hc = cell;
+            return hc.sortable ? ((_a = hc.sortDirection) !== null && _a !== void 0 ? _a : null) : null;
+        });
+        const colName = Table.sortKeyFromHeaderCell(cells[columnIndex], columnIndex);
+        const detail = Object.assign(Object.assign({}, sortState), { colNum: columnIndex, colName,
+            sortTypeArr });
+        this.sortChanged.emit(detail);
+    }
+    legacySortStatePayload() {
+        var _a;
+        const out = {};
+        if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
+            return out;
+        this.columns.forEach((col, i) => {
+            var _a;
+            const key = col.replace(/ /g, '-').toLowerCase();
+            out[key] = (_a = this.sortTypeArray[i]) !== null && _a !== void 0 ? _a : null;
+        });
+        return out;
+    }
+    legacySortChangedDetail(colNum) {
+        var _a, _b;
+        const base = this.legacySortStatePayload();
+        const title = (_b = (_a = this.columns) === null || _a === void 0 ? void 0 : _a[colNum]) !== null && _b !== void 0 ? _b : '';
+        const colName = title.replace(/ /g, '-').toLowerCase();
+        return Object.assign(Object.assign({}, base), { colNum,
+            colName, sortTypeArr: [...this.sortTypeArray] });
+    }
+    getCompositionalHeaderCells() {
+        var _a;
+        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
+        if (!header)
+            return [];
+        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+        const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
+        return Array.from(container.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell');
     }
-    handleSort(clickEvt, isColumnSortable, colNum, colName) {
+    updateColumnWidths() {
+        const headerCells = this.getCompositionalHeaderCells();
+        const columnWidths = headerCells.map((cell) => getGridColumnWidthFromHeaderCell(cell));
+        const next = columnWidths.join(' ');
+        const n = headerCells.length;
+        if (n === this.colCount && this.colCount > 0 && this.columnWidthsToken === next) {
+            return;
+        }
+        this.el.style.setProperty('--column-widths', next);
+        this.colCount = n;
+        this.columnWidthsToken = next;
+    }
+    handleSort(clickEvt, isColumnSortable, colNum) {
         clickEvt.preventDefault();
         clickEvt.stopPropagation();
         if (!isColumnSortable)
@@ -102,57 +1158,57 @@ export class XplTable {
                     return 'asc';
             }
         });
-        const evt = this.sortChanged.emit({
-            colNum,
-            colName,
-            sortTypeArr: this.sortTypeArray,
-        });
+        const evt = this.sortChanged.emit(this.legacySortChangedDetail(colNum));
         if (!evt.defaultPrevented)
             this.sortBy(colNum, this.sortTypeArray);
     }
-    watchData() {
-        this.setData();
-    }
-    watchFooterData() {
-        this.setFooterData();
-    }
-    watchColumns() {
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
-    }
-    componentWillLoad() {
-        this.areAllSelected = false;
-        this.setData();
-        this.setFooterData();
-        this.selected = new Array(this.rowData.length).fill(false);
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
-    }
-    render() {
+    renderLegacy() {
         var _a;
         if (this.columns &&
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: '3ac2c96a4d691a8e60a2f0f5732787a4dd43e71e' }, h("div", { key: '242225267bf912ae46cf38dd1750dcd66fa627f7', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, null, h("div", { class: "xpl-table-container", onScroll: this.onLegacyScroll, ref: (el) => {
                 this.container = el;
-            } }, h("table", { key: '76f22b451b7d09f2843d1afc063f8e287afb419f', class: {
+            } }, h("table", { class: {
                 'xpl-table': true,
+                'xpl-table--legacy': true,
                 'xpl-table--striped': this.striped,
                 'xpl-table--freeze': this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", { key: 'be12e8292faf5be828c281e3c7d5396652c7e4b8' }, this.columns.map((column, i) => {
-            var _a;
-            const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
+            } }, this.columns && (h("thead", null, this.columns.map((column, i) => {
+            var _a, _b;
+            const iconType = getIconType((_b = (_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : null);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
-            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
+            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
                     this.selected.some((a) => a), onClick: (e) => {
                     e.stopPropagation();
                     this.selectAll(e);
                 }, type: "checkbox", value: `select-all-${this.selectAllValue}` })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: '94c5ad3a68f1cffa73a55bb106e81c8899ddc2c4' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+        }))), h("tbody", null, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '2bcfdfed0e5709f60f4beec7f8f58038899b8b30' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", null, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+    }
+    renderCompositional() {
+        const selectionToolbarCount = this.selectedRowIds.length;
+        return (h(Host, { role: "grid", "aria-label": this.label, "aria-colcount": this.colCount > 0 ? this.colCount : undefined, class: {
+                'xpl-table': true,
+                'xpl-table--striped': this.striped,
+                'xpl-table--freeze': this.freeze,
+                'xpl-table--has-scrolled': this.hasScrolled,
+                'xpl-table--selectable': !!this.selectable,
+                'xpl-table--selection-active': !!this.selectable && this.selectedRowIds.length > 0,
+                'xpl-table--row-reorderable': !!this.rowReorderable,
+            }, onScroll: this.onGridScroll }, this.rowReorderable && (h("div", { class: "xpl-table__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)), this.selectable && (h("div", { class: {
+                'xpl-toolbar': true,
+                hidden: selectionToolbarCount === 0,
+                'xpl-table__toolbar': true,
+            } }, h("div", { class: "toolbar" }, h("p", { class: "selected-item-count" }, selectionToolbarCount, " Selected"), h("div", { class: "actions" }, h("slot", { name: "toolbar-actions-left" }), h("slot", { name: "toolbar-actions-right" }))))), h("slot", null)));
+    }
+    render() {
+        return this.isLegacyMode ? this.renderLegacy() : this.renderCompositional();
     }
     static get is() { return "xpl-table"; }
     static get properties() {
@@ -168,8 +1224,11 @@ export class XplTable {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The header values for each column."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.\n\nThe header values for each column."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false
@@ -185,8 +1244,11 @@ export class XplTable {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The data for the body of the table."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.\n\nThe data for the body of the table."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false
@@ -202,8 +1264,11 @@ export class XplTable {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The data for the footer of the table."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.\n\nThe data for the footer of the table."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false
@@ -220,14 +1285,14 @@ export class XplTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container."
+                    "text": "When true, the first **data** column (per row) is sticky during horizontal scroll.\nLeading compositional columns are skipped: `selectable` (checkbox) and/or `row-reorderable`\n(grip) are not frozen so they scroll with the grid; the next column stays pinned at `left: 0`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "freeze"
             },
-            "multiselect": {
+            "isSortable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -237,16 +1302,39 @@ export class XplTable {
                 },
                 "required": false,
                 "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Legacy data-driven table API only. May be removed in a future major release.\n\nToggles to show the sort button on each table head."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-sortable",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Toggles a selectable checkbox for each row in the table"
+                    "text": "Accessible label for the table. Maps to `aria-label` in compositional mode."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "multiselect"
+                "attribute": "label"
             },
-            "striped": {
+            "multiselect": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -256,34 +1344,57 @@ export class XplTable {
                 },
                 "required": false,
                 "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Legacy data-driven table API only. May be removed in a future major release.\n\nToggles a selectable checkbox for each row in the table."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiselect"
+            },
+            "reorderHandleIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Toggles an optional styling of the background of each even row of the table body."
+                    "text": "Icon name for the optional `xpl-icon` inside each **managed** reorder grip when the row is **not** in\nkeyboard reorder mode (pointer / idle). Set to `\"\"` to omit the icon so you can style the button or author a\nfully custom reorder column in markup. When omitted, defaults to `grip-dots-vertical`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "striped"
+                "attribute": "reorder-handle-icon"
             },
-            "selectedValues": {
-                "type": "unknown",
+            "reorderHandleIconKeyboard": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The values for the input for each row when multiselect is activated."
+                    "text": "Icon name for the managed reorder grip **while that row is in keyboard reorder mode** (after the user\nactivates the grip with Enter or Space). Use a different icon than `reorder-handle-icon` so users can see\nthey should use arrow keys. When omitted, defaults to `caret-expand-y` (same as `xpl-list` keyboard reorder).\nSet to `\"\"` to show no icon in keyboard mode only (combine with CSS on\n`.xpl-table__row-drag-handle--keyboard-mode` if needed)."
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[]"
+                "reflect": false,
+                "attribute": "reorder-handle-icon-keyboard"
             },
-            "isSortable": {
+            "rowReorderable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -295,13 +1406,52 @@ export class XplTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Toggles to show the sort button on each table head"
+                    "text": "When true (compositional mode only), **prepends** a managed reorder column as the **first** grid\ncolumn (empty header + grip button per body row) and enables HTML5 drag-and-drop row reordering\n(same interaction model as `xpl-list`). With `selectable`, DOM order is **reorder | selection |\ndata** unless you author a custom reorder column. The table updates the DOM and emits\n`rowOrderChange`; consumers should persist order if needed. Ignored in legacy `columns`/`data` mode."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-sortable",
-                "defaultValue": "false"
+                "attribute": "row-reorderable"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When true (compositional mode only), enables row selection state, the selection toolbar\n(\u201CN Selected\u201D), and `rowSelectionChange`. **You must add the selection column in your\nmarkup:** a header cell with `type=\"checkbox\"`, a body cell containing `xpl-checkbox` per row\n(aligned with that column), and matching `xpl-table-footer-cell` cells when you use a footer.\nEach body row should use `row-id` on `xpl-table-row` (or accept auto-generated ids) so\n`rowSelectionChange` can report `selectedRowIds`.\n\nThe toolbar uses the same layout as `xpl-toolbar` and is visible only while at least one row\nis selected. Use `toolbar-actions-left` / `toolbar-actions-right` slots on this host for bulk\nactions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable"
+            },
+            "selectedValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Legacy data-driven table API only. May be removed in a future major release.\n\nThe values for the input for each row when multiselect is activated."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             },
             "sortableColumns": {
                 "type": "unknown",
@@ -314,39 +1464,86 @@ export class XplTable {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Manually determined if the column is sortable"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use the compositional slot-based API instead. Will be removed in a future major release.\n\nManually determined if the column is sortable."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles an optional styling of the background of each even row of the\ntable body."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped"
             }
         };
     }
     static get states() {
         return {
             "areAllSelected": {},
+            "colCount": {},
+            "hasScrolled": {},
+            "keyboardReorderRowId": {},
+            "reorderLiveMessage": {},
             "rowData": {},
             "rowFooterData": {},
-            "hasScrolled": {},
             "selected": {},
+            "selectedRowIds": {},
             "sortTypeArray": {}
         };
     }
     static get events() {
         return [{
-                "method": "tableSelect",
-                "name": "tableSelect",
-                "bubbles": true,
+                "method": "rowOrderChange",
+                "name": "rowOrderChange",
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Callback function that is called when the checkbox for a row of a\n`multiselect` table is checked"
+                    "text": "Emitted after body rows are reordered via drag-and-drop (compositional `row-reorderable` mode)."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "XplTableRowOrderChangeDetail",
+                    "resolved": "XplTableRowOrderChangeDetail",
+                    "references": {
+                        "XplTableRowOrderChangeDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-table/xpl-table.tsx",
+                            "id": "src/components/components/xpl-table/xpl-table.tsx::XplTableRowOrderChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowSelectionChange",
+                "name": "rowSelectionChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when row selection changes in compositional `selectable` mode.\nListen on this `xpl-table` instance only; the event does not bubble to parents\u2014use\n`table.addEventListener('rowSelectionChange', \u2026)` on the same element. When wiring from a\nscript in static HTML, wait for `customElements.whenDefined('xpl-table')` so the host is ready.\n(Named `rowSelectionChange` to avoid clashing with the native `selectionchange` event.)"
+                },
+                "complexType": {
+                    "original": "{ selectedRowIds: string[] }",
+                    "resolved": "{ selectedRowIds: string[]; }",
                     "references": {}
                 }
             }, {
@@ -357,11 +1554,32 @@ export class XplTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event whenever the sort changes.\nThe 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]).\nThe default action can be overridden by calling event.preventDefault()."
+                    "text": "Emitted when sort changes in **legacy** or **compositional** mode. `event.detail` is a plain\nobject: **sort-key slug \u2192 `'asc' | 'desc' | null`** (null = that column not sorted). Keys match\nlegacy column titles (slugified) or compositional `sort-key` / label slugs. Call\n`event.preventDefault()` in legacy mode to skip built-in row sorting; compositional tables do\nnot reorder rows automatically."
+                },
+                "complexType": {
+                    "original": "XplTableSortChangedDetail",
+                    "resolved": "XplTableSortChangedDetail",
+                    "references": {
+                        "XplTableSortChangedDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-table/xpl-table.tsx",
+                            "id": "src/components/components/xpl-table/xpl-table.tsx::XplTableSortChangedDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tableSelect",
+                "name": "tableSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback function that is called when the checkbox for a row of a\n`multiselect` table is checked."
                 },
                 "complexType": {
-                    "original": "{\n        colNum: number;\n        colName: string;\n        sortTypeArr: string[];\n    }",
-                    "resolved": "{ colNum: number; colName: string; sortTypeArr: string[]; }",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }];
@@ -369,14 +1587,101 @@ export class XplTable {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "columns",
+                "methodName": "watchColumns"
+            }, {
                 "propName": "data",
                 "methodName": "watchData"
             }, {
                 "propName": "footer",
                 "methodName": "watchFooterData"
             }, {
-                "propName": "columns",
-                "methodName": "watchColumns"
+                "propName": "reorderHandleIcon",
+                "methodName": "watchReorderHandleIcon"
+            }, {
+                "propName": "reorderHandleIconKeyboard",
+                "methodName": "watchReorderHandleIconKeyboard"
+            }, {
+                "propName": "rowReorderable",
+                "methodName": "watchRowReorderable"
+            }, {
+                "propName": "selectable",
+                "methodName": "watchSelectable"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "xplTableColumnWidthsChange",
+                "method": "handleHeaderCellColumnWidthsChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "checkboxChange",
+                "method": "handleCompositionalCheckboxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "headerCheckboxChange",
+                "method": "handleCompositionalHeaderCheckboxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handlePointerDownExitKeyboardReorder",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "pointerdown",
+                "method": "handleRowReorderPointerDown",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "dragstart",
+                "method": "handleRowReorderDragStart",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "dragend",
+                "method": "handleRowReorderDragEnd",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "dragover",
+                "method": "handleRowReorderDragOver",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dragenter",
+                "method": "handleRowReorderDragEnter",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dragleave",
+                "method": "handleRowReorderDragLeave",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "drop",
+                "method": "handleRowReorderDrop",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "headerSortChange",
+                "method": "handleCompositionalHeaderSort",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }