@aurelia-mdc-web/all 9.3.1-au2 → 9.3.3-au2

package/dist/data-table/mdc-data-table.js

@@ -1,16 +1,19 @@
-import { __esDecorate, __runInitializers } from "tslib";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MdcDataTable = void 0;
+const tslib_1 = require("tslib");
 /* eslint-disable no-template-curly-in-string */
-import { MdcComponent, booleanAttr, number } from '../base';
-import { MDCDataTableFoundation, selectors, events, cssClasses, dataAttributes, SortValue, messages } from '@material/data-table';
-import { closest } from '@material/dom/ponyfill';
-import { inject, customElement, bindable, BindingMode } from 'aurelia';
-import { processContent, CustomElement } from '@aurelia/runtime-html';
-import template from './mdc-data-table.html?raw';
-events.ROW_CLICK = events.ROW_CLICK.toLowerCase();
-events.ROW_SELECTION_CHANGED = events.ROW_SELECTION_CHANGED.toLowerCase();
-events.SELECTED_ALL = events.SELECTED_ALL.toLowerCase();
-events.SORTED = events.SORTED.toLowerCase();
-events.UNSELECTED_ALL = events.UNSELECTED_ALL.toLowerCase();
+const base_1 = require("../base");
+const data_table_1 = require("@material/data-table");
+const ponyfill_1 = require("@material/dom/ponyfill");
+const aurelia_1 = require("aurelia");
+const runtime_html_1 = require("@aurelia/runtime-html");
+const mdc_data_table_html_raw_1 = tslib_1.__importDefault(require("./mdc-data-table.html?raw"));
+data_table_1.events.ROW_CLICK = data_table_1.events.ROW_CLICK.toLowerCase();
+data_table_1.events.ROW_SELECTION_CHANGED = data_table_1.events.ROW_SELECTION_CHANGED.toLowerCase();
+data_table_1.events.SELECTED_ALL = data_table_1.events.SELECTED_ALL.toLowerCase();
+data_table_1.events.SORTED = data_table_1.events.SORTED.toLowerCase();
+data_table_1.events.UNSELECTED_ALL = data_table_1.events.UNSELECTED_ALL.toLowerCase();
 const NAVIGATION_EVENT = 'mdcdatatable:navigation';
 /**
  * Use `pagination-total` replaceable part to customise pagination total label.
@@ -22,7 +25,7 @@ const NAVIGATION_EVENT = 'mdcdatatable:navigation';
  * @emits mdcdatatable:rowclick | Emitted when a row is clicked
  */
 let MdcDataTable = (() => {
-    let _classDecorators = [inject(Element), customElement({ name: 'mdc-data-table', template }), processContent(function processContent(node) {
+    let _classDecorators = [(0, aurelia_1.inject)(Element), (0, aurelia_1.customElement)({ name: 'mdc-data-table', template: mdc_data_table_html_raw_1.default }), (0, runtime_html_1.processContent)(function processContent(node) {
             const element = node;
             const table = element.querySelector('table');
             if (!table) {
@@ -34,11 +37,11 @@ let MdcDataTable = (() => {
             if (!headerRow) {
                 throw new Error('Have you forgotten the <thead><tr> tags in you data table markup?');
             }
-            headerRow.classList.add(cssClasses.HEADER_ROW);
+            headerRow.classList.add(data_table_1.cssClasses.HEADER_ROW);
             headerRow.setAttribute('ref', 'headerRow');
             const headerCells = headerRow.querySelectorAll('th');
             for (const th of Array.from(headerCells)) {
-                th.classList.add(cssClasses.HEADER_CELL);
+                th.classList.add(data_table_1.cssClasses.HEADER_CELL);
                 th.classList.toggle('mdc-data-table__header-cell--numeric', th.hasAttribute('numeric'));
                 th.setAttribute('role', 'columnheader');
                 th.setAttribute('scope', 'col');
@@ -47,7 +50,7 @@ let MdcDataTable = (() => {
             if (!tbody) {
                 throw new Error('Have you forgotten the <tbody> tag in you data table markup?');
             }
-            tbody.classList.add(cssClasses.CONTENT);
+            tbody.classList.add(data_table_1.cssClasses.CONTENT);
             tbody.setAttribute('ref', 'content');
             const paginationTotalSlot = element.querySelector('[au-slot="pagination-total"]');
             paginationTotalSlot?.remove();
@@ -58,7 +61,7 @@ let MdcDataTable = (() => {
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
-    let _classSuper = MdcComponent;
+    let _classSuper = base_1.MdcComponent;
     let _pagination_decorators;
     let _pagination_initializers = [];
     let _pagination_extraInitializers = [];
@@ -74,6 +77,12 @@ let MdcDataTable = (() => {
     let _stickyHeader_decorators;
     let _stickyHeader_initializers = [];
     let _stickyHeader_extraInitializers = [];
+    let _manualCheckboxHandling_decorators;
+    let _manualCheckboxHandling_initializers = [];
+    let _manualCheckboxHandling_extraInitializers = [];
+    let _saveColumnWidths_decorators;
+    let _saveColumnWidths_initializers = [];
+    let _saveColumnWidths_extraInitializers = [];
     let _recordsCount_decorators;
     let _recordsCount_initializers = [];
     let _recordsCount_extraInitializers = [];
@@ -90,42 +99,52 @@ let MdcDataTable = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _pagination_decorators = [bindable({ set: booleanAttr })];
-            _rowsPerPageLabel_decorators = [bindable()];
-            _pageSizes_decorators = [bindable()];
-            _pageSize_decorators = [bindable({ mode: BindingMode.twoWay })];
-            _stickyHeader_decorators = [bindable({ set: booleanAttr })];
-            _recordsCount_decorators = [bindable({ set: number })];
-            _activePage_decorators = [bindable({ set: number })];
-            _busy_decorators = [bindable({ set: booleanAttr })];
-            _hoistPageSelectToBody_decorators = [bindable({ set: booleanAttr })];
-            __esDecorate(null, null, _pagination_decorators, { kind: "field", name: "pagination", static: false, private: false, access: { has: obj => "pagination" in obj, get: obj => obj.pagination, set: (obj, value) => { obj.pagination = value; } }, metadata: _metadata }, _pagination_initializers, _pagination_extraInitializers);
-            __esDecorate(null, null, _rowsPerPageLabel_decorators, { kind: "field", name: "rowsPerPageLabel", static: false, private: false, access: { has: obj => "rowsPerPageLabel" in obj, get: obj => obj.rowsPerPageLabel, set: (obj, value) => { obj.rowsPerPageLabel = value; } }, metadata: _metadata }, _rowsPerPageLabel_initializers, _rowsPerPageLabel_extraInitializers);
-            __esDecorate(null, null, _pageSizes_decorators, { kind: "field", name: "pageSizes", static: false, private: false, access: { has: obj => "pageSizes" in obj, get: obj => obj.pageSizes, set: (obj, value) => { obj.pageSizes = value; } }, metadata: _metadata }, _pageSizes_initializers, _pageSizes_extraInitializers);
-            __esDecorate(null, null, _pageSize_decorators, { kind: "field", name: "pageSize", static: false, private: false, access: { has: obj => "pageSize" in obj, get: obj => obj.pageSize, set: (obj, value) => { obj.pageSize = value; } }, metadata: _metadata }, _pageSize_initializers, _pageSize_extraInitializers);
-            __esDecorate(null, null, _stickyHeader_decorators, { kind: "field", name: "stickyHeader", static: false, private: false, access: { has: obj => "stickyHeader" in obj, get: obj => obj.stickyHeader, set: (obj, value) => { obj.stickyHeader = value; } }, metadata: _metadata }, _stickyHeader_initializers, _stickyHeader_extraInitializers);
-            __esDecorate(null, null, _recordsCount_decorators, { kind: "field", name: "recordsCount", static: false, private: false, access: { has: obj => "recordsCount" in obj, get: obj => obj.recordsCount, set: (obj, value) => { obj.recordsCount = value; } }, metadata: _metadata }, _recordsCount_initializers, _recordsCount_extraInitializers);
-            __esDecorate(null, null, _activePage_decorators, { kind: "field", name: "activePage", static: false, private: false, access: { has: obj => "activePage" in obj, get: obj => obj.activePage, set: (obj, value) => { obj.activePage = value; } }, metadata: _metadata }, _activePage_initializers, _activePage_extraInitializers);
-            __esDecorate(null, null, _busy_decorators, { kind: "field", name: "busy", static: false, private: false, access: { has: obj => "busy" in obj, get: obj => obj.busy, set: (obj, value) => { obj.busy = value; } }, metadata: _metadata }, _busy_initializers, _busy_extraInitializers);
-            __esDecorate(null, null, _hoistPageSelectToBody_decorators, { kind: "field", name: "hoistPageSelectToBody", static: false, private: false, access: { has: obj => "hoistPageSelectToBody" in obj, get: obj => obj.hoistPageSelectToBody, set: (obj, value) => { obj.hoistPageSelectToBody = value; } }, metadata: _metadata }, _hoistPageSelectToBody_initializers, _hoistPageSelectToBody_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _pagination_decorators = [(0, aurelia_1.bindable)({ set: base_1.booleanAttr })];
+            _rowsPerPageLabel_decorators = [(0, aurelia_1.bindable)()];
+            _pageSizes_decorators = [(0, aurelia_1.bindable)()];
+            _pageSize_decorators = [(0, aurelia_1.bindable)({ mode: aurelia_1.BindingMode.twoWay })];
+            _stickyHeader_decorators = [(0, aurelia_1.bindable)({ set: base_1.booleanAttr })];
+            _manualCheckboxHandling_decorators = [(0, aurelia_1.bindable)({ set: base_1.booleanAttr })];
+            _saveColumnWidths_decorators = [(0, aurelia_1.bindable)({ set: base_1.booleanAttr })];
+            _recordsCount_decorators = [(0, aurelia_1.bindable)({ set: base_1.number })];
+            _activePage_decorators = [(0, aurelia_1.bindable)({ set: base_1.number })];
+            _busy_decorators = [(0, aurelia_1.bindable)({ set: base_1.booleanAttr })];
+            _hoistPageSelectToBody_decorators = [(0, aurelia_1.bindable)({ set: base_1.booleanAttr })];
+            tslib_1.__esDecorate(null, null, _pagination_decorators, { kind: "field", name: "pagination", static: false, private: false, access: { has: obj => "pagination" in obj, get: obj => obj.pagination, set: (obj, value) => { obj.pagination = value; } }, metadata: _metadata }, _pagination_initializers, _pagination_extraInitializers);
+            tslib_1.__esDecorate(null, null, _rowsPerPageLabel_decorators, { kind: "field", name: "rowsPerPageLabel", static: false, private: false, access: { has: obj => "rowsPerPageLabel" in obj, get: obj => obj.rowsPerPageLabel, set: (obj, value) => { obj.rowsPerPageLabel = value; } }, metadata: _metadata }, _rowsPerPageLabel_initializers, _rowsPerPageLabel_extraInitializers);
+            tslib_1.__esDecorate(null, null, _pageSizes_decorators, { kind: "field", name: "pageSizes", static: false, private: false, access: { has: obj => "pageSizes" in obj, get: obj => obj.pageSizes, set: (obj, value) => { obj.pageSizes = value; } }, metadata: _metadata }, _pageSizes_initializers, _pageSizes_extraInitializers);
+            tslib_1.__esDecorate(null, null, _pageSize_decorators, { kind: "field", name: "pageSize", static: false, private: false, access: { has: obj => "pageSize" in obj, get: obj => obj.pageSize, set: (obj, value) => { obj.pageSize = value; } }, metadata: _metadata }, _pageSize_initializers, _pageSize_extraInitializers);
+            tslib_1.__esDecorate(null, null, _stickyHeader_decorators, { kind: "field", name: "stickyHeader", static: false, private: false, access: { has: obj => "stickyHeader" in obj, get: obj => obj.stickyHeader, set: (obj, value) => { obj.stickyHeader = value; } }, metadata: _metadata }, _stickyHeader_initializers, _stickyHeader_extraInitializers);
+            tslib_1.__esDecorate(null, null, _manualCheckboxHandling_decorators, { kind: "field", name: "manualCheckboxHandling", static: false, private: false, access: { has: obj => "manualCheckboxHandling" in obj, get: obj => obj.manualCheckboxHandling, set: (obj, value) => { obj.manualCheckboxHandling = value; } }, metadata: _metadata }, _manualCheckboxHandling_initializers, _manualCheckboxHandling_extraInitializers);
+            tslib_1.__esDecorate(null, null, _saveColumnWidths_decorators, { kind: "field", name: "saveColumnWidths", static: false, private: false, access: { has: obj => "saveColumnWidths" in obj, get: obj => obj.saveColumnWidths, set: (obj, value) => { obj.saveColumnWidths = value; } }, metadata: _metadata }, _saveColumnWidths_initializers, _saveColumnWidths_extraInitializers);
+            tslib_1.__esDecorate(null, null, _recordsCount_decorators, { kind: "field", name: "recordsCount", static: false, private: false, access: { has: obj => "recordsCount" in obj, get: obj => obj.recordsCount, set: (obj, value) => { obj.recordsCount = value; } }, metadata: _metadata }, _recordsCount_initializers, _recordsCount_extraInitializers);
+            tslib_1.__esDecorate(null, null, _activePage_decorators, { kind: "field", name: "activePage", static: false, private: false, access: { has: obj => "activePage" in obj, get: obj => obj.activePage, set: (obj, value) => { obj.activePage = value; } }, metadata: _metadata }, _activePage_initializers, _activePage_extraInitializers);
+            tslib_1.__esDecorate(null, null, _busy_decorators, { kind: "field", name: "busy", static: false, private: false, access: { has: obj => "busy" in obj, get: obj => obj.busy, set: (obj, value) => { obj.busy = value; } }, metadata: _metadata }, _busy_initializers, _busy_extraInitializers);
+            tslib_1.__esDecorate(null, null, _hoistPageSelectToBody_decorators, { kind: "field", name: "hoistPageSelectToBody", static: false, private: false, access: { has: obj => "hoistPageSelectToBody" in obj, get: obj => obj.hoistPageSelectToBody, set: (obj, value) => { obj.hoistPageSelectToBody = value; } }, metadata: _metadata }, _hoistPageSelectToBody_initializers, _hoistPageSelectToBody_extraInitializers);
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             MdcDataTable = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
         }
         header;
         content;
+        columnResized;
+        mutationObserver;
         /** Shows pagination footer */
-        pagination = __runInitializers(this, _pagination_initializers, void 0);
+        pagination = tslib_1.__runInitializers(this, _pagination_initializers, void 0);
         /** Caption for the page size selector */
-        rowsPerPageLabel = (__runInitializers(this, _pagination_extraInitializers), __runInitializers(this, _rowsPerPageLabel_initializers, 'Rows per page'));
+        rowsPerPageLabel = (tslib_1.__runInitializers(this, _pagination_extraInitializers), tslib_1.__runInitializers(this, _rowsPerPageLabel_initializers, 'Rows per page'));
         /** Page sizes available for selection, e.g. [10, 25, 100, 'All'] */
-        pageSizes = (__runInitializers(this, _rowsPerPageLabel_extraInitializers), __runInitializers(this, _pageSizes_initializers, [10, 25, 100]));
+        pageSizes = (tslib_1.__runInitializers(this, _rowsPerPageLabel_extraInitializers), tslib_1.__runInitializers(this, _pageSizes_initializers, [10, 25, 100]));
         /** Selected page size */
-        pageSize = (__runInitializers(this, _pageSizes_extraInitializers), __runInitializers(this, _pageSize_initializers, 10));
+        pageSize = (tslib_1.__runInitializers(this, _pageSizes_extraInitializers), tslib_1.__runInitializers(this, _pageSize_initializers, 10));
         /** Makes header row sticky (fixed) on vertical scroll.
          * (Note: Sticky header feature is not compatible with IE11 browsers.) */
-        stickyHeader = (__runInitializers(this, _pageSize_extraInitializers), __runInitializers(this, _stickyHeader_initializers, void 0));
+        stickyHeader = (tslib_1.__runInitializers(this, _pageSize_extraInitializers), tslib_1.__runInitializers(this, _stickyHeader_initializers, void 0));
+        /** Turns off checkbox handling by the MDC framework */
+        manualCheckboxHandling = (tslib_1.__runInitializers(this, _stickyHeader_extraInitializers), tslib_1.__runInitializers(this, _manualCheckboxHandling_initializers, void 0));
+        /** Turns on automatic column widths saving to localStorage */
+        saveColumnWidths = (tslib_1.__runInitializers(this, _manualCheckboxHandling_extraInitializers), tslib_1.__runInitializers(this, _saveColumnWidths_initializers, void 0));
         get paginationPosition() {
             if (typeof this.pageSize !== 'number' || this.pageSize === undefined || isNaN(this.activePage) || isNaN(this.recordsCount)) {
                 return undefined;
@@ -136,9 +155,9 @@ let MdcDataTable = (() => {
                 : (this.activePage === pagesCount ? 'last' : 'between');
         }
         /** Sets total number of records. Used in navigation row. */
-        recordsCount = (__runInitializers(this, _stickyHeader_extraInitializers), __runInitializers(this, _recordsCount_initializers, void 0));
+        recordsCount = (tslib_1.__runInitializers(this, _saveColumnWidths_extraInitializers), tslib_1.__runInitializers(this, _recordsCount_initializers, void 0));
         /** Sets the active page number. Used in navigation row. */
-        activePage = (__runInitializers(this, _recordsCount_extraInitializers), __runInitializers(this, _activePage_initializers, void 0));
+        activePage = (tslib_1.__runInitializers(this, _recordsCount_extraInitializers), tslib_1.__runInitializers(this, _activePage_initializers, void 0));
         get paginationTotal() {
             if (typeof this.pageSize !== 'number' || this.pageSize === undefined || isNaN(this.activePage) || isNaN(this.recordsCount)) {
                 return undefined;
@@ -148,7 +167,7 @@ let MdcDataTable = (() => {
             return `${firstRecord}-${lastRecord} of ${this.recordsCount}`;
         }
         /** Turns on a linear progress indicator at the top of the table */
-        busy = (__runInitializers(this, _activePage_extraInitializers), __runInitializers(this, _busy_initializers, void 0));
+        busy = (tslib_1.__runInitializers(this, _activePage_extraInitializers), tslib_1.__runInitializers(this, _busy_initializers, void 0));
         busyChanged() {
             if (this.busy) {
                 this.foundation?.showProgress();
@@ -157,14 +176,14 @@ let MdcDataTable = (() => {
                 this.foundation?.hideProgress();
             }
         }
-        hoistPageSelectToBody = (__runInitializers(this, _busy_extraInitializers), __runInitializers(this, _hoistPageSelectToBody_initializers, void 0));
+        hoistPageSelectToBody = (tslib_1.__runInitializers(this, _busy_extraInitializers), tslib_1.__runInitializers(this, _hoistPageSelectToBody_initializers, void 0));
         get rowCheckboxList() {
-            return Array.from(this.root.querySelectorAll(`.${cssClasses.ROW} .mdc-checkbox`))
-                .map(x => CustomElement.for(x).viewModel);
+            return Array.from(this.root.querySelectorAll(`.${data_table_1.cssClasses.ROW} .mdc-checkbox`))
+                .map(x => runtime_html_1.CustomElement.for(x).viewModel);
         }
         get headerRowCheckbox() {
-            const el = this.root.querySelector(`.${cssClasses.HEADER_ROW} .mdc-checkbox`);
-            return el ? CustomElement.for(el).viewModel : undefined;
+            const el = this.root.querySelector(`.${data_table_1.cssClasses.HEADER_ROW} .mdc-checkbox`);
+            return el ? runtime_html_1.CustomElement.for(el).viewModel : undefined;
         }
         handleHeaderRowCheckboxChange() {
             this.foundation?.handleHeaderRowCheckboxChange();
@@ -181,7 +200,7 @@ let MdcDataTable = (() => {
             this.emit(NAVIGATION_EVENT, { type }, true);
         }
         handleContentClick(event) {
-            const dataRowEl = closest(event.target, selectors.ROW);
+            const dataRowEl = (0, ponyfill_1.closest)(event.target, data_table_1.selectors.ROW);
             if (!dataRowEl) {
                 return;
             }
@@ -197,19 +216,19 @@ let MdcDataTable = (() => {
             this.foundation?.layout();
         }
         /**
-         * @return Returns array of header row cell elements.
+         * Returns array of header row cell elements.
          */
         getHeaderCells() {
-            return [].slice.call(this.root.querySelectorAll(selectors.HEADER_CELL));
+            return [].slice.call(this.root.querySelectorAll(data_table_1.selectors.HEADER_CELL));
         }
         /**
-         * @return Returns array of row elements.
+         * Returns array of row elements.
          */
         getRows() {
             return this.foundation.getRows();
         }
         /**
-         * @return Returns array of selected row ids.
+         * Returns array of selected row ids.
          */
         getSelectedRowIds() {
             return this.foundation.getSelectedRowIds();
@@ -243,35 +262,108 @@ let MdcDataTable = (() => {
             }
         }
         beforeFoundationCreated() {
-            this.header = this.root.querySelector(`.${cssClasses.HEADER_ROW}`);
-            this.header.addEventListener('change', this);
+            this.header = this.root.querySelector(`.${data_table_1.cssClasses.HEADER_ROW}`);
+            this.content = this.root.querySelector(`.${data_table_1.cssClasses.CONTENT}`);
             this.header.addEventListener('click', this);
-            this.content = this.root.querySelector(`.${cssClasses.CONTENT}`);
-            this.content.addEventListener('change', this);
-            this.content.addEventListener('click', this);
+            this.header.querySelectorAll('th[resizeable]').forEach(x => {
+                const resizeHandle = document.createElement('div');
+                resizeHandle.addEventListener('mousedown', (event) => this.startColumnResize(event, x));
+                x.insertBefore(document.createElement('div'), x.firstChild).classList.add('mdc-data-table__header-cell__hover-indicator');
+                x.appendChild(resizeHandle).classList.add('mdc-data-table__header-cell__resize-handle');
+            });
+            if (this.saveColumnWidths) {
+                this.restoreColumnWidths();
+                this.mutationObserver = new MutationObserver(() => this.restoreColumnWidths());
+                this.mutationObserver.observe(this.content, { childList: true, subtree: false });
+            }
+            if (!this.manualCheckboxHandling) {
+                this.header.addEventListener('change', this);
+                this.content.addEventListener('change', this);
+            }
             const rowCheckboxList = this.rowCheckboxList;
-            this.rowCheckboxList.forEach(x => x.root.classList.add(cssClasses.ROW_CHECKBOX));
+            this.rowCheckboxList.forEach(x => x.root.classList.add(data_table_1.cssClasses.ROW_CHECKBOX));
             if (this.headerRowCheckbox) {
-                this.headerRowCheckbox.root.classList.add(cssClasses.HEADER_ROW_CHECKBOX);
+                this.headerRowCheckbox.root.classList.add(data_table_1.cssClasses.HEADER_ROW_CHECKBOX);
                 rowCheckboxList.push(this.headerRowCheckbox);
             }
         }
+        restoreColumnWidths() {
+            const widths = JSON.parse(localStorage.getItem(`mdc-data-table-${this.root.id}-column-widths`) ?? '[]');
+            this.setColumnWidths(widths);
+        }
         initialSyncWithDOM() {
             if (this.busy !== undefined) {
                 this.busyChanged();
             }
-            const rowCheckboxList = this.rowCheckboxList;
-            for (let i = 0; i < rowCheckboxList.length; ++i) {
-                if (rowCheckboxList[i].checked) {
-                    this.getRowByIndex(i).classList.add(cssClasses.ROW_SELECTED);
+            if (!this.manualCheckboxHandling) {
+                const rowCheckboxList = this.rowCheckboxList;
+                for (let i = 0; i < rowCheckboxList.length; ++i) {
+                    if (rowCheckboxList[i].checked) {
+                        this.getRowByIndex(i).classList.add(data_table_1.cssClasses.ROW_SELECTED);
+                    }
                 }
             }
             this.foundation?.layout();
         }
+        startColumnResize(event, headerCell) {
+            this.columnResized = true;
+            const startX = event.clientX;
+            const resizeHandle = event.target;
+            const initialHandlePosition = resizeHandle.offsetLeft;
+            // Create a visual indicator for the resize handle
+            const handleIndicator = document.createElement('div');
+            handleIndicator.classList.add('mdc-data-table__header-cell__resize-handle-indicator');
+            handleIndicator.style.left = `${initialHandlePosition}px`;
+            handleIndicator.style.height = `${headerCell.offsetHeight}px`;
+            document.body.style.cursor = 'col-resize';
+            headerCell.classList.add('mdc-data-table__header-cell--resizing');
+            headerCell.appendChild(handleIndicator);
+            const onMouseMove = (moveEvent) => {
+                const deltaX = moveEvent.clientX - startX;
+                handleIndicator.style.left = `${Math.max(initialHandlePosition + deltaX, headerCell.clientLeft)}px`;
+            };
+            const onMouseUp = () => {
+                const finalDeltaX = parseInt(handleIndicator.style.left, 10) - initialHandlePosition;
+                const newWidth = Math.max(5, headerCell.offsetWidth + finalDeltaX); // Minimum width of 5px
+                // Apply the new width to the column
+                headerCell.style.minWidth = headerCell.style.maxWidth = `${newWidth}px`;
+                this.content.querySelectorAll(`tr td:nth-child(${Array.from(headerCell.parentElement.children).indexOf(headerCell) + 1})`)
+                    .forEach((cell) => {
+                    cell.style.minWidth = cell.style.maxWidth = `${newWidth}px`;
+                });
+                // Clean up
+                handleIndicator.remove();
+                this.columnResized = false;
+                document.body.style.cursor = '';
+                headerCell.classList.remove('mdc-data-table__header-cell--resizing');
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+                // Save the new widths if required
+                const widths = this.getHeaderCells().map(x => x.style.minWidth);
+                if (this.saveColumnWidths) {
+                    localStorage.setItem(`mdc-data-table-${this.root.id}-column-widths`, JSON.stringify(widths));
+                }
+                this.emit('mdcdatatable:columnsresized', { widths }, true);
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        }
         destroy() {
             this.header.removeEventListener('change', this);
             this.header.removeEventListener('click', this);
             this.content.removeEventListener('change', this);
+            this.mutationObserver?.disconnect();
+        }
+        setColumnWidths(widths) {
+            if (!widths || widths.length === 0) {
+                return;
+            }
+            this.getHeaderCells().forEach((x, i) => {
+                x.style.minWidth = x.style.maxWidth = widths[i];
+                this.content.querySelectorAll(`tr td:nth-child(${i + 1})`).forEach((cell) => {
+                    cell.style.minWidth = cell.style.maxWidth = widths[i];
+                });
+            });
         }
         getDefaultFoundation() {
             // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
@@ -289,10 +381,10 @@ let MdcDataTable = (() => {
                     this.getHeaderCells()[index].classList.remove(className);
                 },
                 notifySortAction: (data) => {
-                    this.emit(events.SORTED, data, /** shouldBubble */ true);
+                    this.emit(data_table_1.events.SORTED, data, /** shouldBubble */ true);
                 },
                 getTableContainerHeight: () => {
-                    const tableContainer = this.root.querySelector(`.${cssClasses.TABLE_CONTAINER}`);
+                    const tableContainer = this.root.querySelector(`.${data_table_1.cssClasses.TABLE_CONTAINER}`);
                     if (!tableContainer) {
                         throw new Error('MDCDataTable: Table container element not found.');
                     }
@@ -300,14 +392,14 @@ let MdcDataTable = (() => {
                     return tableContainer.getBoundingClientRect().height;
                 },
                 getTableHeaderHeight: () => {
-                    const tableHeader = this.root.querySelector(selectors.HEADER_ROW);
+                    const tableHeader = this.root.querySelector(data_table_1.selectors.HEADER_ROW);
                     if (!tableHeader) {
                         throw new Error('MDCDataTable: Table header element not found.');
                     }
                     return tableHeader.getBoundingClientRect().height;
                 },
                 setProgressIndicatorStyles: (styles) => {
-                    const progressIndicator = this.root.querySelector(selectors.PROGRESS_INDICATOR);
+                    const progressIndicator = this.root.querySelector(data_table_1.selectors.PROGRESS_INDICATOR);
                     if (!progressIndicator) {
                         throw new Error('MDCDataTable: Progress indicator element not found.');
                     }
@@ -317,15 +409,15 @@ let MdcDataTable = (() => {
                     this.getRows()[rowIndex].classList.add(className);
                 },
                 getRowCount: () => this.getRows().length,
-                getRowElements: () => [].slice.call(this.root.querySelectorAll(selectors.ROW)),
-                getRowIdAtIndex: (rowIndex) => this.getRows()[rowIndex].getAttribute(dataAttributes.ROW_ID),
-                getRowIndexByChildElement: (el) => this.getRows().indexOf(closest(el, selectors.ROW)),
-                getSelectedRowCount: () => this.root.querySelectorAll(selectors.ROW_SELECTED).length,
+                getRowElements: () => [].slice.call(this.root.querySelectorAll(data_table_1.selectors.ROW)),
+                getRowIdAtIndex: (rowIndex) => this.getRows()[rowIndex].getAttribute(data_table_1.dataAttributes.ROW_ID),
+                getRowIndexByChildElement: (el) => this.getRows().indexOf((0, ponyfill_1.closest)(el, data_table_1.selectors.ROW)),
+                getSelectedRowCount: () => this.root.querySelectorAll(data_table_1.selectors.ROW_SELECTED).length,
                 isCheckboxAtRowIndexChecked: (rowIndex) => this.rowCheckboxList[rowIndex].checked,
                 isHeaderRowCheckboxChecked: () => this.headerRowCheckbox?.checked ?? false,
-                isRowsSelectable: () => !!this.root.querySelector(selectors.ROW_CHECKBOX),
+                isRowsSelectable: () => !!this.root.querySelector(data_table_1.selectors.ROW_CHECKBOX),
                 notifyRowSelectionChanged: (data) => {
-                    this.emit(events.ROW_SELECTION_CHANGED, {
+                    this.emit(data_table_1.events.ROW_SELECTION_CHANGED, {
                         row: this.getRowByIndex(data.rowIndex),
                         rowId: this.getRowIdByIndex(data.rowIndex),
                         rowIndex: data.rowIndex,
@@ -333,13 +425,13 @@ let MdcDataTable = (() => {
                     }, /** shouldBubble */ true);
                 },
                 notifySelectedAll: () => {
-                    this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true);
+                    this.emit(data_table_1.events.SELECTED_ALL, {}, /** shouldBubble */ true);
                 },
                 notifyUnselectedAll: () => {
-                    this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true);
+                    this.emit(data_table_1.events.UNSELECTED_ALL, {}, /** shouldBubble */ true);
                 },
                 notifyRowClick: (data) => {
-                    this.emit(events.ROW_CLICK, data, /** shouldBubble */ true);
+                    this.emit(data_table_1.events.ROW_CLICK, data, /** shouldBubble */ true);
                 },
                 registerHeaderRowCheckbox: () => {
                     // const checkboxEl = this.root.querySelector<IMdcCheckboxElement>(selectors.HEADER_ROW_CHECKBOX);
@@ -375,7 +467,7 @@ let MdcDataTable = (() => {
                 },
                 setSortStatusLabelByHeaderCellIndex: (columnIndex, sortValue) => {
                     const headerCell = this.getHeaderCells()[columnIndex];
-                    const sortStatusLabel = headerCell.querySelector(selectors.SORT_STATUS_LABEL);
+                    const sortStatusLabel = headerCell.querySelector(data_table_1.selectors.SORT_STATUS_LABEL);
                     if (!sortStatusLabel) {
                         return;
                     }
@@ -383,20 +475,20 @@ let MdcDataTable = (() => {
                         this.getSortStatusMessageBySortValue(sortValue);
                 }
             };
-            return new MDCDataTableFoundation(adapter);
+            return new data_table_1.MDCDataTableFoundation(adapter);
         }
         getRowByIndex(index) {
             return this.getRows()[index];
         }
         getRowIdByIndex(index) {
-            return this.getRowByIndex(index).getAttribute(dataAttributes.ROW_ID);
+            return this.getRowByIndex(index).getAttribute(data_table_1.dataAttributes.ROW_ID);
         }
         handleHeaderRowClick(event) {
-            const headerCell = closest(event.target, selectors.HEADER_CELL_WITH_SORT);
+            const headerCell = (0, ponyfill_1.closest)(event.target, data_table_1.selectors.HEADER_CELL_WITH_SORT);
             if (!headerCell) {
                 return;
             }
-            const columnId = headerCell.getAttribute(dataAttributes.COLUMN_ID);
+            const columnId = headerCell.getAttribute(data_table_1.dataAttributes.COLUMN_ID);
             const columnIndex = this.getHeaderCells().indexOf(headerCell);
             if (columnIndex === -1) {
                 return;
@@ -405,23 +497,23 @@ let MdcDataTable = (() => {
         }
         getSortStatusMessageBySortValue(sortValue) {
             switch (sortValue) {
-                case SortValue.ASCENDING:
-                    return messages.SORTED_IN_ASCENDING;
-                case SortValue.DESCENDING:
-                    return messages.SORTED_IN_DESCENDING;
+                case data_table_1.SortValue.ASCENDING:
+                    return data_table_1.messages.SORTED_IN_ASCENDING;
+                case data_table_1.SortValue.DESCENDING:
+                    return data_table_1.messages.SORTED_IN_DESCENDING;
                 default:
                     return '';
             }
         }
         getRowIdByRowElement(rowElement) {
-            return rowElement.getAttribute(dataAttributes.ROW_ID);
+            return rowElement.getAttribute(data_table_1.dataAttributes.ROW_ID);
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _hoistPageSelectToBody_extraInitializers);
+            tslib_1.__runInitializers(this, _hoistPageSelectToBody_extraInitializers);
         }
     };
     return MdcDataTable = _classThis;
 })();
-export { MdcDataTable };
+exports.MdcDataTable = MdcDataTable;
 //# sourceMappingURL=mdc-data-table.js.map