@ukic/canary-web-components 2.0.0-canary.23 → 2.0.0-canary.25

package/dist/cjs/ic-data-table.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cf27b16.js');
-const helpers = require('./helpers-85c5ca15.js');
+const helpers = require('./helpers-6817cfbb.js');
 
 const unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
     <path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
@@ -17,12 +17,13 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
     <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
 </svg>`;
 
-const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden}.truncation-show-hide{overflow:visible;display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:fixed;border-spacing:0;width:100%}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-border-light)}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.column-header,.row-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-border-light)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading.show-background{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
+const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height)}.truncation-show-hide{overflow:visible;display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-border-light)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-border-light)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading.show-background{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
 
 const DataTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.icRowHeightChange = index.createEvent(this, "icRowHeightChange", 7);
+        this.icSortChange = index.createEvent(this, "icSortChange", 7);
         this.DENSITY_HEIGHT_MULTIPLIER = {
             dense: 0.8,
             default: 1,
@@ -52,8 +53,11 @@ const DataTable = class {
         this.icPageChangeEvent = false;
         this.itemsPerPageChange = false;
         this.DATA_ROW_HEIGHT_STRING = "data-row-height";
+        this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
         this.DEFAULT_LINE_HEIGHT = 24;
         this.densityUpdate = false;
+        this.truncationPatternUpdated = false;
+        this.isNewDebounceDelaySet = false;
         this.updateSetRowHeight = (typographyEl) => {
             const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
             if (typographyEl) {
@@ -61,7 +65,7 @@ const DataTable = class {
                 const rowHeight = fontSize *
                     parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
                 if (typographyEl.scrollHeight > rowHeight) {
-                    cellContainer.style.removeProperty("height");
+                    cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
                 }
             }
             else {
@@ -70,24 +74,31 @@ const DataTable = class {
                     const rowHeight = fontSize *
                         parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
                     if (typographyEl.scrollHeight > rowHeight) {
-                        cellContainer.style.removeProperty("height");
+                        cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
                     }
                 });
             }
         };
         this.debounceDataTruncation = () => {
             this.getTypographyElements().forEach((typographyEl) => {
-                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                const cellContainer = this.getCellContainer(typographyEl);
+                if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
                     this.resizeObserver = new ResizeObserver(
                     // This gets triggered twice due to updated data and see more/see less button
-                    helpers.debounce(() => {
-                        // console.log("resizeObserver triggered");
+                    helpers.dynamicDebounce(() => {
                         this.dataTruncation(typographyEl);
-                    }, 200));
+                        if (!this.isNewDebounceDelaySet) {
+                            this.setNewDebounceDelay(200);
+                        }
+                    }, () => this.debounceDelay));
                     this.resizeObserver.observe(typographyEl);
                 }
             });
         };
+        this.setNewDebounceDelay = (delay) => {
+            this.debounceDelay = delay;
+            this.isNewDebounceDelaySet = true;
+        };
         this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
         this.truncate = (typographyEl, cellContainer, tooltip) => {
             if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
@@ -216,11 +227,40 @@ const DataTable = class {
             }
             return {};
         };
+        this.getColumnWidth = (columnWidth) => {
+            // TODO: Setting max width on columns
+            let columnWidthStyling = {};
+            if (columnWidth) {
+                if (typeof columnWidth === "string") {
+                    columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
+                }
+                if (typeof columnWidth === "object" && !!Object.keys(columnWidth)) {
+                    if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth) {
+                        columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
+                    }
+                    if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
+                        columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
+                    }
+                }
+            }
+            return columnWidthStyling;
+        };
+        this.getRowHeight = (currentRowHeight, columnProps, rowTextWrap, cell) => {
+            if ((this.truncationPattern || currentRowHeight) &&
+                !(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
+                !rowTextWrap &&
+                !this.getCellOptions(cell, "textWrap") &&
+                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element") {
+                return {
+                    [this.ROW_HEIGHT_CSS_VARIABLE]: this.setRowHeight(currentRowHeight),
+                };
+            }
+            return {};
+        };
         this.createCells = (row, rowIndex) => {
             var _a;
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
-            const index$1 = rowIndex;
             const rowOptions = this.getRowOptions(rowKeys, rowValues);
             let rowAlignment;
             let rowEmphasis;
@@ -229,7 +269,7 @@ const DataTable = class {
                 rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
-            const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: index$1 }));
+            const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
             const currentRowHeight = variableRowHeightVal
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
@@ -250,7 +290,7 @@ const DataTable = class {
                     return (index.h("td", { class: {
                             ["table-cell"]: true,
                             [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        } }, index.h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, index.h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
                             !helpers.isSlotUsed(this.el, cellSlotName)
                             ? cell
                             : null, class: Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
@@ -265,15 +305,7 @@ const DataTable = class {
                                 !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
                                 !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
                                 (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
-                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: {
-                            height: (this.truncationPattern || currentRowHeight) &&
-                                !columnProps.textWrap &&
-                                !rowOptions.textWrap &&
-                                !this.getCellOptions(cell, "textWrap") &&
-                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element"
-                                ? this.setRowHeight(currentRowHeight)
-                                : null,
-                        }, "data-row-height": this.truncationPattern || currentRowHeight
+                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
                             ? this.setRowHeight(currentRowHeight)
                             : null }, helpers.isSlotUsed(this.el, cellSlotName) ? (index.h("slot", { name: cellSlotName })) : (index.h(index.Fragment, null, helpers.isSlotUsed(this.el, `${cellSlotName}-icon`) ? (index.h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) && (index.h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
                         !helpers.isSlotUsed(this.el, cellSlotName) && (index.h("ic-typography", { variant: "body", class: {
@@ -289,11 +321,11 @@ const DataTable = class {
             });
         };
         this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, icon, key, title }) => (index.h("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }) => (index.h("th", { scope: "col", class: {
                     ["column-header"]: true,
                     [`table-density-${this.density}`]: this.notDefaultDensity(),
                     ["updating-state-headers"]: this.updating && !this.loading,
-                }, colSpan: colspan }, index.h("div", { class: {
+                }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, index.h("div", { class: {
                     "column-header-inner-container": true,
                     [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
                 } }, helpers.isSlotUsed(this.el, `${key}-column-icon`) ? (index.h("slot", { name: `${key}-column-icon` })) : (icon &&
@@ -321,16 +353,18 @@ const DataTable = class {
             /**
              * Ensures that createCells has a value in data to map over to actually render the slot.
              * Removes the need for the user to add it multiple times.
+             * `addDataToPosition` used to add the element in the correct column order.
+             * Adding empty string value in to give `createCells` something to loop over.
              */
-            this.columns.forEach(({ key }) => {
-                data.forEach((row, rowIndex) => {
-                    const cellSlotName = `${key}-${rowIndex}`;
-                    if (helpers.isSlotUsed(this.el, cellSlotName)) {
-                        row[key] = helpers.getSlotContent(this.el, cellSlotName);
-                    }
-                });
+            const organisedData = data.map((row, rowIndex) => {
+                const slottedColumns = this.columns
+                    .map(({ key }, index) => helpers.isSlotUsed(this.el, `${key}-${rowIndex}`) && { key, index })
+                    .filter((col) => !!col);
+                return slottedColumns.length > 0
+                    ? helpers.addDataToPosition(row, slottedColumns, "")
+                    : row;
             });
-            return data
+            return organisedData
                 .sort(!this.sortable ? undefined : this.getSortFunction())
                 .map((row, index$1) => {
                 return (index.h("tr", {
@@ -401,6 +435,10 @@ const DataTable = class {
             this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
             sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
             this.tableSorted = true;
+            this.icSortChange.emit({
+                columnName: column,
+                sorted: this.sortedColumnOrder,
+            });
         };
         this.getTypographyElements = () => {
             return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text)"));
@@ -423,6 +461,22 @@ const DataTable = class {
         this.updateScrollOffset = () => {
             this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
         };
+        this.setTableDimensions = () => {
+            let tableHostDimensions = {};
+            if (this.width) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-width"]: this.width });
+            }
+            if (this.height) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-height"]: this.height });
+            }
+            if (this.maxWidth) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-max-width"]: this.maxWidth });
+            }
+            if (this.minWidth) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-min-width"]: this.minWidth });
+            }
+            return tableHostDimensions;
+        };
         this.fromRow = 0;
         this.previousRowsPerPage = undefined;
         this.rowsPerPage = undefined;
@@ -433,15 +487,19 @@ const DataTable = class {
         this.sortedColumnOrder = undefined;
         this.toRow = undefined;
         this.currentRowHeight = undefined;
+        this.debounceDelay = 0;
         this.caption = undefined;
         this.columns = undefined;
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
         this.globalRowHeight = "auto";
+        this.height = undefined;
         this.hideColumnHeaders = false;
         this.loading = false;
         this.loadingOptions = undefined;
+        this.maxWidth = undefined;
+        this.minWidth = undefined;
         this.minimumLoadingDisplayDuration = 1000;
         this.paginationBarOptions = {
             itemsPerPageOptions: [
@@ -467,10 +525,12 @@ const DataTable = class {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.tableLayout = "fixed";
         this.truncationPattern = undefined;
         this.updating = false;
         this.updatingOptions = undefined;
         this.variableRowHeight = undefined;
+        this.width = undefined;
     }
     disconnectedCallback() {
         var _a;
@@ -503,7 +563,8 @@ const DataTable = class {
         }
         if (this.truncationPattern) {
             this.getTypographyElements().forEach((typographyEl) => {
-                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                const cellContainer = this.getCellContainer(typographyEl);
+                if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
                     this.dataTruncation(typographyEl);
                 }
             });
@@ -514,12 +575,31 @@ const DataTable = class {
         }
     }
     componentDidUpdate() {
-        this.truncateUpdatedData();
+        // truncation updates invoked here once new/updated data has
+        // rendered to take into account updated .cell-container/ic-typography box model updates.
+        if (this.truncationPattern === this.SHOW_HIDE_STRING ||
+            this.truncationPattern === this.TOOLTIP_STRING) {
+            this.truncateUpdatedData();
+        }
     }
     truncateUpdatedData() {
         if (this.dataUpdated) {
             if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.resetShowHideTruncation();
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const truncWrapper = this.getTruncWrapper(typographyEl);
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >=
+                        (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
+                        this.resetShowHideTruncation(typographyEl);
+                        return;
+                    }
+                    setTimeout(() => {
+                        // slight delay due to data rendering
+                        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                            this.addShowHideTruncation(cellContainer, typographyEl);
+                        }
+                    }, 150);
+                });
             }
             if (this.truncationPattern === this.TOOLTIP_STRING) {
                 this.updateTruncationTooltip();
@@ -530,23 +610,49 @@ const DataTable = class {
             if (this.truncationPattern === this.TOOLTIP_STRING) {
                 this.updateTruncationTooltip();
             }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                        this.createShowHideTruncation(typographyEl, cellContainer);
+                    }
+                    else {
+                        typographyEl.resetTruncation().then(() => {
+                            cellContainer.removeAttribute("style");
+                        });
+                    }
+                });
+            }
             this.tableSorted = false;
         }
         // This function recalculates the tooltip truncation when the rowHeight has been set.
         // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
         if (this.rowHeightSet) {
             const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            const hasAutoRowHeight = this.globalRowHeight === "auto";
             this.getTypographyElements().forEach((typographyEl) => {
                 var _a;
                 const cellContainer = this.getCellContainer(typographyEl);
                 const tooltipEl = this.getTooltip(typographyEl);
+                if (hasAutoRowHeight) {
+                    cellContainer.style.height = null;
+                    if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        this.removeTooltip(cellContainer, typographyEl, tooltipEl);
+                        typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                    }
+                    else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        this.resetShowHideTruncation(typographyEl);
+                    }
+                    return;
+                }
                 const rowHeight = fontSize *
                     parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
                 // If the set row height is bigger than the cell container even
                 // with textWrap, set the row height
                 if (!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
-                    rowHeight > cellContainer.clientHeight) {
-                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    rowHeight > cellContainer.clientHeight &&
+                    !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                    cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
                 }
                 if (this.truncationPattern) {
                     // If the set row height is bigger than the typography truncation wrapper
@@ -612,12 +718,37 @@ const DataTable = class {
             });
             this.densityUpdate = false;
         }
+        if (this.truncationPatternUpdated) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const tooltipEl = this.getTooltip(typographyEl);
+                    if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
+                    }
+                });
+            }
+            else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const truncWrapper = this.getTruncWrapper(typographyEl);
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
+                        (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
+                        this.resetShowHideTruncation(typographyEl);
+                        return;
+                    }
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+        }
     }
     createShowHideTruncation(typographyEl, cellContainer) {
         typographyEl.checkMaxLines(typographyEl.scrollHeight);
         typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
         typographyEl.setShowHideExpanded(false);
-        cellContainer.style.height = null;
+        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
     }
     addTooltipTruncation(typographyEl, cellContainer, tooltip) {
         this.addLineClampCSS(typographyEl, cellContainer);
@@ -637,8 +768,9 @@ const DataTable = class {
     handleTypographyTruncationExpandToggle({ detail, }) {
         const { expanded, typographyEl } = detail;
         const cellContainer = this.getCellContainer(typographyEl);
-        if (cellContainer.style.height && expanded) {
-            cellContainer.style.height = "inherit";
+        if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
+            expanded) {
+            cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
         }
     }
     handlePageChange({ detail, target }) {
@@ -688,7 +820,8 @@ const DataTable = class {
         }
     }
     truncationPatternHandler(newValue) {
-        if (newValue === this.SHOW_HIDE_STRING) {
+        if (newValue === this.TOOLTIP_STRING) {
+            this.resetShowHideTruncation();
             this.updateTruncationTooltip(true);
             // Not using debounceDataTruncation here due to resizeObserver not being triggered
             this.getTypographyElements().forEach((typographyEl) => {
@@ -697,11 +830,27 @@ const DataTable = class {
                 this.truncate(typographyEl, cellContainer, tooltip);
             });
         }
-        if (newValue === this.TOOLTIP_STRING) {
+        if (newValue === this.SHOW_HIDE_STRING) {
             // ResizeObserver is trigger here due to the see more/see less links being removed.
             // The resizeObserver will also apply the tooltip where relevant
-            this.resetShowHideTruncation();
+            this.updateTruncationTooltip(true);
+            this.getTypographyElements().forEach((typographyEl) => {
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                const cellContainer = this.getCellContainer(typographyEl);
+                if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
+                    (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
+                    this.resetShowHideTruncation(typographyEl);
+                    return;
+                }
+                setTimeout(() => {
+                    // slight delay due to data rendering
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                }, 150);
+            });
         }
+        this.truncationPatternUpdated = true;
     }
     async dataHandler(newData) {
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 });
@@ -729,11 +878,13 @@ const DataTable = class {
                 typographyEl.checkMaxLines(truncWrapper.scrollHeight);
                 typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
                 typographyEl.setShowHideExpanded(false);
-                cellContainer.style.height = null;
+                cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
             }
             else {
                 typographyEl.resetTruncation().then(() => {
-                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
                 });
             }
         }
@@ -741,7 +892,9 @@ const DataTable = class {
             this.getTypographyElements().forEach((typographyEl) => {
                 const cellContainer = this.getCellContainer(typographyEl);
                 typographyEl.resetTruncation().then(() => {
-                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
                 });
             });
         }
@@ -789,11 +942,10 @@ const DataTable = class {
         if (!typographyEl.getAttribute("style") && this.dataUpdated) {
             this.addLineClampCSS(typographyEl, cellContainer);
         }
-        // Adding the tableSorted boolean prevents the tooltip
-        // being regenerated and flashing
         if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
-            !this.tableSorted) {
-            if (!typographyEl.getAttribute("style")) {
+            this.truncationPattern === this.TOOLTIP_STRING) {
+            if (!typographyEl.getAttribute("style") ||
+                typographyEl.style.cssText.includes("--ic-line-clamp: 0;")) {
                 this.addLineClampCSS(typographyEl, cellContainer);
             }
             this.createTruncationTooltip(typographyEl, cellContainer);
@@ -822,10 +974,12 @@ const DataTable = class {
     }
     render() {
         const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
-        return (index.h("div", { class: "table-container" }, helpers.isSlotUsed(this.el, "title-bar") && index.h("slot", { name: "title-bar" }), index.h("div", { class: {
+        return (index.h(index.Host, { style: Object.assign({}, this.setTableDimensions()) }, index.h("div", { class: "table-container" }, helpers.isSlotUsed(this.el, "title-bar") && index.h("slot", { name: "title-bar" }), index.h("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, helpers.isSlotUsed(this.el, "title-bar") && index.h("slot", { name: "title-bar" }), index.h("table", null, index.h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (index.h("thead", { class: {
+            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, helpers.isSlotUsed(this.el, "title-bar") && index.h("slot", { name: "title-bar" }), index.h("table", { style: {
+                ["--table-layout"]: this.tableLayout,
+            } }, index.h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (index.h("thead", { class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
             } }, index.h("tr", null, createColumnHeaders()))), updating &&
@@ -838,7 +992,7 @@ const DataTable = class {
                 "show-background": loadingOptions.showBackground,
             }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), (showPagination || helpers.isSlotUsed(this.el, "pagination-bar")) && (index.h("div", { class: "pagination-container" }, helpers.isSlotUsed(this.el, "pagination-bar") ? (index.h("slot", { name: "pagination-bar" })) : (index.h("ic-pagination-bar", { totalItems: data.length, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel })))), sortable && (index.h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
-            : "table unsorted"))));
+            : "table unsorted")))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {