@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.11

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-6817cfbb.js');
+const helpers = require('./helpers-02b23286.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: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{--ic-typography-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 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);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{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-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.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-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n    --ic-data-table-cell-background-selected-hover\n  ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.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)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.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-space-1px) solid var(--ic-data-table-header-keyline) !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{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.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 ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.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-space-1px) solid var(--ic-data-table-header-keyline)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow);z-index:calc(var(--ic-z-index-dialog) - 1);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.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 .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg){fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.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,.column-header-alignment-center>.cell-text-wrapper,.row-header-alignment-right>ic-typography,.row-header-alignment-right>.cell-text-wrapper,.cell-alignment-center>ic-typography,.cell-alignment-center>.cell-text-wrapper{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%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}.loading-overlay{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ic-data-table-loading-indicator-overlay-background);z-index:calc(var(--ic-z-index-dialog) - 2);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading-overlay.show{visibility:visible;opacity:0.6}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){.loading-overlay{transition:none}}.cell-text-wrapper{overflow:hidden}.cell-text-wrapper>ic-typography{margin-left:2px}.cell-text-no-wrap{word-wrap:initial}.cell-container-with-description{display:flex;flex-direction:row}.cell-description{display:flex;flex-direction:row;margin-top:var(--ic-space-xxs);word-break:break-all}.cell-description-text{color:var(--ic-color-secondary-text)}.cell-description-icon{padding-right:var(--ic-space-xs)}.cell-description-icon>svg{height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs));display:flex}@media (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}@media (max-width: 577px){.cell-icon{flex-wrap:wrap}.cell-description-icon{padding-right:0}}@media (forced-colors: active){.icon,::slotted(svg),.cell-description-icon>svg{fill:currentcolor}.sort-button svg{color:currentcolor}.table-row-selected{background-color:Highlight !important}}";
 
 const DataTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.icRowHeightChange = index.createEvent(this, "icRowHeightChange", 7);
+        this.icSelectedRowChange = index.createEvent(this, "icSelectedRowChange", 7);
         this.icSortChange = index.createEvent(this, "icSortChange", 7);
         this.DENSITY_HEIGHT_MULTIPLIER = {
             dense: 0.8,
@@ -54,10 +55,43 @@ const DataTable = class {
         this.itemsPerPageChange = false;
         this.DATA_ROW_HEIGHT_STRING = "data-row-height";
         this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
+        this.LINE_CLAMP_CSS_VARIABLE = "--ic-line-clamp";
         this.DEFAULT_LINE_HEIGHT = 24;
         this.densityUpdate = false;
         this.truncationPatternUpdated = false;
         this.isNewDebounceDelaySet = false;
+        this.headerResizeObserver = null;
+        this.IC_TOOLTIP_STRING = "ic-tooltip";
+        this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
+        this.CELL_DESCRIPTION_STRING = ".cell-description";
+        this.CELL_CONTAINER_WITH_DESCRIPTION_STRING = "cell-container-with-description";
+        this.CELL_TEXT_WRAPPER_STRING = ".cell-text-wrapper";
+        this.IC_TYPOGRAPHY_STRING = "ic-typography";
+        this.runHeaderResizeObserver = () => {
+            this.headerResizeObserver = new ResizeObserver(() => {
+                this.headerResizeCallback();
+            });
+            this.headerResizeObserver.observe(this.el);
+        };
+        this.headerResizeCallback = () => {
+            if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
+                const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
+                if (tableContainerWidth !== this.prevTableContainerWidth) {
+                    const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+                    headers.forEach((header) => {
+                        const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                        const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
+                        if (tooltip && typographyEls && typographyEls.length === 2) {
+                            tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
+                                tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            }
+                        }
+                    });
+                    this.prevTableContainerWidth = tableContainerWidth;
+                }
+            }
+        };
         this.updateSetRowHeight = (typographyEl) => {
             const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
             if (typographyEl) {
@@ -114,8 +148,9 @@ const DataTable = class {
             }
             else {
                 if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
-                    typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
-                    cellContainer.appendChild(typographyEl);
+                    typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
+                    const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
+                    cellTextWrapper.prepend(typographyEl);
                     tooltip.remove();
                 }
                 if (this.truncationPattern === this.SHOW_HIDE_STRING &&
@@ -170,6 +205,7 @@ const DataTable = class {
             }
             this.truncate(typographyEl, cellContainer, tooltip);
         };
+        this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
         this.removeTextWrap = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tableCell = typographyEl.closest("td");
@@ -191,7 +227,7 @@ const DataTable = class {
                 this.timerStarted = null;
             }, this.minimumLoadingDisplayDuration);
         };
-        this.isObject = (value) => typeof value === "object";
+        this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
         this.notDefaultDensity = () => this.density !== "default";
         this.getCellContent = (cell, dataType) => {
             switch (dataType) {
@@ -214,19 +250,16 @@ const DataTable = class {
             return this.getObjectValue(cell, key);
         };
         this.createUpdatingIndicator = () => {
-            const { appearance, description, max, min, progress } = this.updatingOptions || {};
-            return (index.h("th", { colSpan: this.columns.length, class: "updating-state" }, index.h("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
+            const { description, max, min, progress, monochrome } = this.updatingOptions || {};
+            return (index.h("th", { colSpan: this.columns.length, class: "updating-state" }, index.h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
         };
         this.setRowHeight = (height) => {
             return helpers.pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
                 this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
         };
-        this.setTruncationClass = () => {
-            if (this.truncationPattern) {
-                return { [`truncation-${this.truncationPattern}`]: true };
-            }
-            return {};
-        };
+        this.setTruncationClass = () => this.truncationPattern
+            ? { [`truncation-${this.truncationPattern}`]: true }
+            : {};
         this.getColumnWidth = (columnWidth) => {
             // TODO: Setting max width on columns
             let columnWidthStyling = {};
@@ -257,6 +290,56 @@ const DataTable = class {
             }
             return {};
         };
+        this.adjustWidthForActionElement = () => {
+            const elements = this.el.shadowRoot.querySelectorAll(".action-element");
+            elements.forEach((element) => {
+                const width = element.firstChild.getBoundingClientRect()
+                    .width;
+                const gridWrapper = element.closest(".cell-grid-wrapper");
+                gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
+            });
+        };
+        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            return (index.h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                    !helpers.isSlotUsed(this.el, cellSlotName)
+                    ? cell
+                    : null, class: Object.assign(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) ||
+                        ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
+                        rowAlignment ||
+                        this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                        !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                        !!rowAlignment ||
+                        !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
+                        ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
+                        this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
+                        !!((_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), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                        rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                        !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                        !!rowEmphasis }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), 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)) &&
+                (cellValue("icon") || ((_l = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _l === void 0 ? void 0 : _l.icon)) && (index.h("span", { class: "icon", innerHTML: cellValue("icon") || ((_m = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _m === void 0 ? void 0 : _m.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
+                !helpers.isSlotUsed(this.el, cellSlotName) && (index.h("div", { class: {
+                    "cell-text-wrapper": true,
+                    "cell-text-no-wrap": !this.truncationPattern,
+                } }, index.h("ic-typography", { variant: "body", class: {
+                    [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                        rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                        !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                        !!rowEmphasis,
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (index.h("ic-link", { href: cellValue("href"), theme: this.theme, target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))), this.isObject(cell) &&
+                Object.keys(cell).includes("description") && (index.h("div", { class: {
+                    ["cell-description"]: true,
+                    [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
+                } }, ((_o = cellValue("description")) === null || _o === void 0 ? void 0 : _o.icon) && (index.h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), index.h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_q = (_p = cellValue("description")) === null || _p === void 0 ? void 0 : _p.data) !== null && _q !== void 0 ? _q : cellValue("description"))))))))));
+        };
         this.createCells = (row, rowIndex) => {
             var _a;
             const rowValues = Object.values(row);
@@ -274,7 +357,6 @@ const DataTable = class {
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return rowValues.map((cell, index$1) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 const columnProps = this.columns[index$1];
                 const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
                 const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
@@ -290,59 +372,48 @@ const DataTable = class {
                     return (index.h("td", { class: {
                             ["table-cell"]: true,
                             [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        }, 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) ||
-                                ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
-                                rowAlignment ||
-                                this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
-                                !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
-                                !!rowAlignment ||
-                                !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
-                                ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
-                                this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
-                                !!((_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: 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: {
-                            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                                rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                                !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                                !!rowEmphasis,
-                            [`text-${this.density}`]: this.notDefaultDensity(),
-                        } }, this.isObject(cell) &&
-                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (index.h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
+                            ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
+                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
+                        Object.keys(cell).includes("actionElement") ? (index.h("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), index.h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick: cell.actionOnClick
+                            ? (event) => this.handleClick(event, cell.actionOnClick)
+                            : undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
                 }
             });
         };
-        this.createColumnHeaders = () => {
-            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,
-                }, 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 &&
-                !icon.hideOnHeader && (index.h("span", { class: "icon", innerHTML: icon.icon }))), index.h("ic-typography", { variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title), this.sortable && (index.h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
-                    ? this.sortedColumnOrder
-                    : "unsorted"], class: {
-                    ["sort-button"]: true,
-                    ["sort-button-unsorted"]: this.sortedColumn !== key ||
-                        this.sortedColumnOrder === "unsorted",
-                } }))))));
-        };
+        this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, }, index$1) => (index.h("th", { scope: "col", class: {
+                ["column-header"]: true,
+                [`table-density-${this.density}`]: this.notDefaultDensity(),
+                ["updating-state-headers"]: this.updating && !this.loading,
+            }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, index.h("div", { class: {
+                "column-header-inner-container": true,
+                "truncation-tooltip": this.columnHeaderTruncation,
+                [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+            } }, helpers.isSlotUsed(this.el, `${key}-column-icon`) ? (index.h("slot", { name: `${key}-column-icon` })) : (icon &&
+            !icon.hideOnHeader && (index.h("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (index.h("ic-tooltip", { label: title, target: `column-header-${index$1}` }, index.h("ic-typography", { id: `column-header-${index$1}`, variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title))) : (index.h("ic-typography", { variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)), this.sortable && !excludeColumnFromSort && (index.h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
+                ? this.sortedColumnOrder
+                : "unsorted"], class: {
+                ["sort-button"]: true,
+                ["sort-button-unsorted"]: this.sortedColumn !== key ||
+                    this.sortedColumnOrder === "unsorted",
+            } }))), this.columnHeaderTruncation && (index.h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
+                ["column-header-text"]: true,
+                ["dummy-column-header-text"]: this.columnHeaderTruncation,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)))));
         this.onRowClick = (row) => {
+            if (!this.loading && !this.updating) {
+                this.icSelectedRowChange.emit(this.selectedRow !== row ? row : null);
+            }
             this.selectedRow =
                 this.selectedRow !== row && !this.loading && !this.updating && row;
         };
@@ -359,26 +430,28 @@ const DataTable = class {
             const organisedData = data.map((row, rowIndex) => {
                 const slottedColumns = this.columns
                     .map(({ key }, index) => helpers.isSlotUsed(this.el, `${key}-${rowIndex}`) && { key, index })
-                    .filter((col) => !!col);
+                    .filter((col) => !!col &&
+                    // skip the column if its already in the row
+                    !Object.prototype.hasOwnProperty.call(row, col.key));
                 return slottedColumns.length > 0
                     ? helpers.addDataToPosition(row, slottedColumns, "")
                     : row;
             });
             return organisedData
-                .sort(!this.sortable ? undefined : this.getSortFunction())
+                .sort(!this.sortable || this.disableAutoSort
+                ? undefined
+                : this.getSortFunction())
                 .map((row, index$1) => {
                 return (index.h("tr", {
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick: () => this.onRowClick(row), class: {
                         ["table-row"]: true,
-                        ["table-row-selected"]: this.selectedRow === row,
+                        ["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
                     }
                 }, this.createCells(row, index$1)));
             });
         };
-        this.getObjectValue = (cell, key) => {
-            return Object.values(cell)[Object.keys(cell).indexOf(key)];
-        };
+        this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
         this.getSortButtonLabel = (key) => {
             let label = "";
             const getNextSortOption = (option) => {
@@ -441,7 +514,8 @@ const DataTable = class {
             });
         };
         this.getTypographyElements = () => {
-            return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text)"));
+            // Filter out column headers and cell descriptions
+            return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)"));
         };
         this.getTooltip = (typographyEl) => {
             return typographyEl.closest(this.TOOLTIP);
@@ -452,7 +526,7 @@ const DataTable = class {
                 const cellContainer = this.getCellContainer(typographyEl);
                 if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
                     this.removeTooltip(cellContainer, typographyEl, tooltip);
-                    typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                    typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
                     return;
                 }
                 this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
@@ -461,6 +535,56 @@ const DataTable = class {
         this.updateScrollOffset = () => {
             this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
         };
+        this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
+            cellContainer.setAttribute("data-row-height", rowHeight.toString());
+            cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
+        };
+        // Method to update the row heights on cells with descriptions and tooltip truncation
+        this.updateCellHeightsWithDescriptions = () => {
+            const descriptions = this.el.shadowRoot.querySelectorAll(this.CELL_DESCRIPTION_STRING);
+            descriptions.forEach((description) => {
+                const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
+                const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
+                const descriptionMarginTop = window
+                    .getComputedStyle(description)
+                    .getPropertyValue("margin-top");
+                const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
+                if (this.globalRowHeight && this.globalRowHeight !== "auto") {
+                    if (!typography.textContent &&
+                        descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
+                        this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
+                    }
+                    else if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
+                            this.globalRowHeight) {
+                            const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
+                            if (helpers.deviceSizeMatches(helpers.IC_DEVICE_SIZES.XS) && cellIcon) {
+                                // recalculate descriptionHeight as when a word break occurs this value changes
+                                // Additional spacing given for 300-400% zoom
+                                this.updateRowHeightForDescriptions(descriptionHeight +
+                                    this.DEFAULT_LINE_HEIGHT +
+                                    cellIcon.clientHeight, cellContainer);
+                            }
+                            else {
+                                this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
+                            }
+                        }
+                        this.addLineClampCSS(typography, cellContainer);
+                        // Additional case for show/hide truncation for when a description is present, but the text
+                        // isn't overflowing the cell to trigger the show more button to appear.
+                    }
+                    else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                        descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight &&
+                        typography.style.getPropertyValue("--truncation-max-lines") !==
+                            "initial") {
+                        this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
+                        if (descriptionHeight) {
+                            this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
+                        }
+                    }
+                }
+            });
+        };
         this.setTableDimensions = () => {
             let tableHostDimensions = {};
             if (this.width) {
@@ -477,6 +601,93 @@ const DataTable = class {
             }
             return tableHostDimensions;
         };
+        this.fixCellTooltip = (element) => {
+            var _a, _b, _c;
+            let tooltip;
+            if (element.tagName === "IC-TOOLTIP") {
+                tooltip = element;
+            }
+            else if ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING)) {
+                tooltip = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.IC_TOOLTIP_STRING);
+            }
+            else {
+                if (((_c = element.children) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                    Array.from(element.children).forEach((el) => {
+                        this.fixCellTooltip(el);
+                    });
+                }
+                else {
+                    return;
+                }
+            }
+            if (tooltip) {
+                tooltip.setExternalPopperProps({
+                    strategy: "fixed",
+                });
+            }
+        };
+        this.fixCellTooltips = () => {
+            const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
+            elements.forEach((element) => {
+                const slotElements = helpers.getSlotElements(element);
+                slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
+                    this.fixCellTooltip(slottedEl);
+                });
+            });
+            const actionElements = this.el.shadowRoot.querySelectorAll(".action-element");
+            actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
+                const actionElement = actionElementSpan.firstChild;
+                if (actionElement) {
+                    this.fixCellTooltip(actionElement);
+                }
+            });
+        };
+        this.handleClick = (event, callback) => callback(event);
+        this.renderTableBody = (data, loading, overlay) => {
+            if (!(data === null || data === void 0 ? void 0 : data.length))
+                return;
+            if (overlay && loading) {
+                return index.h("tbody", null, this.createRows());
+            }
+            else if (loading && !overlay) {
+                return null;
+            }
+            else {
+                return index.h("tbody", null, this.createRows());
+            }
+        };
+        this.renderLoadingIndicator = (isLoading, loadingOptions) => {
+            if (!isLoading)
+                return null;
+            return (index.h(index.Fragment, null, index.h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), index.h("ic-loading-indicator", { theme: this.theme, monochrome: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.monochrome, class: {
+                    "loading-empty": isLoading,
+                    loading: true,
+                }, 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) })));
+        };
+        this.renderAriaLiveLoading = () => {
+            var _a, _b;
+            if (this.loading) {
+                return ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.label) || "Loading...";
+            }
+            else if (this.updating) {
+                return ((_b = this.updatingOptions) === null || _b === void 0 ? void 0 : _b.description) || "Updating table data";
+            }
+            else {
+                return "";
+            }
+        };
+        this.renderEmptyState = (data, loading, overlay) => {
+            const emptyStateEl = helpers.isSlotUsed(this.el, "empty-state") ? (index.h("slot", { name: "empty-state" })) : (index.h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
+            if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
+                return emptyStateEl;
+            }
+            else if (!loading && !(data === null || data === void 0 ? void 0 : data.length)) {
+                return emptyStateEl;
+            }
+            else {
+                return null;
+            }
+        };
         this.fromRow = 0;
         this.previousRowsPerPage = undefined;
         this.rowsPerPage = undefined;
@@ -489,12 +700,15 @@ const DataTable = class {
         this.currentRowHeight = undefined;
         this.debounceDelay = 0;
         this.caption = undefined;
+        this.columnHeaderTruncation = false;
         this.columns = undefined;
         this.data = undefined;
+        this.disableAutoSort = false;
         this.density = "default";
         this.embedded = false;
         this.globalRowHeight = "auto";
         this.height = undefined;
+        this.highlightSelectedRow = true;
         this.hideColumnHeaders = false;
         this.loading = false;
         this.loadingOptions = undefined;
@@ -502,20 +716,23 @@ const DataTable = class {
         this.minWidth = undefined;
         this.minimumLoadingDisplayDuration = 1000;
         this.paginationBarOptions = {
+            alignment: "right",
+            hideAllFromItemsPerPage: false,
+            hideRangeLabel: false,
+            itemLabel: "Item",
             itemsPerPageOptions: [
                 { label: "10", value: "10" },
                 { label: "25", value: "25" },
                 { label: "50", value: "50" },
             ],
+            monochrome: false,
+            pageLabel: "Page",
             rangeLabelType: "page",
-            type: "simple",
-            showItemsPerPageControl: true,
+            selectedItemsPerPage: 10,
+            setToFirstPageOnPaginationChange: false,
             showGoToPageControl: true,
-            alignment: "right",
-            appearance: "default",
-            itemLabel: "Item",
-            pageLabel: "Page",
-            hideRangeLabel: false,
+            showItemsPerPageControl: true,
+            type: "simple",
         };
         this.showPagination = false;
         this.sortable = false;
@@ -526,30 +743,46 @@ const DataTable = class {
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
         this.tableLayout = "fixed";
+        this.theme = "inherit";
         this.truncationPattern = undefined;
         this.updating = false;
         this.updatingOptions = undefined;
         this.variableRowHeight = undefined;
         this.width = undefined;
     }
+    headerTruncationChangeHandler() {
+        if (this.columnHeaderTruncation) {
+            this.prevTableContainerWidth = 0;
+        }
+        else {
+            const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+            headers.forEach((header) => {
+                const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                if (tooltip) {
+                    tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                }
+            });
+        }
+    }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     componentWillLoad() {
-        var _a;
         this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
         this.previousRowsPerPage = this.rowsPerPage;
         this.toRow = this.rowsPerPage;
         this.sortedColumn = this.sortOptions.defaultColumn;
         this.sortedColumnOrder = this.sortOptions.sortOrders[0];
-        this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
+        this.loadingOptions = Object.assign({}, this.loadingOptions);
         this.initialLoad = true;
         this.previousItemsPerPage = this.rowsPerPage;
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        helpers.checkResizeObserver(this.runHeaderResizeObserver);
         if (this.dataUpdated) {
             this.dataUpdated = false;
         }
@@ -573,6 +806,7 @@ const DataTable = class {
         if (this.globalRowHeight !== "auto") {
             this.updateSetRowHeight();
         }
+        window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
     }
     componentDidUpdate() {
         // truncation updates invoked here once new/updated data has
@@ -582,6 +816,11 @@ const DataTable = class {
             this.truncateUpdatedData();
         }
     }
+    componentDidRender() {
+        this.fixCellTooltips();
+        this.updateCellHeightsWithDescriptions();
+        this.adjustWidthForActionElement();
+    }
     truncateUpdatedData() {
         if (this.dataUpdated) {
             if (this.truncationPattern === this.SHOW_HIDE_STRING) {
@@ -638,7 +877,7 @@ const DataTable = class {
                     cellContainer.style.height = null;
                     if (this.truncationPattern === this.TOOLTIP_STRING) {
                         this.removeTooltip(cellContainer, typographyEl, tooltipEl);
-                        typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                        typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
                     }
                     else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
                         this.resetShowHideTruncation(typographyEl);
@@ -649,7 +888,8 @@ const DataTable = class {
                     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) &&
+                if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
+                    !((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
                     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));
@@ -682,7 +922,7 @@ const DataTable = class {
                 const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
                 newRows.forEach((row) => {
                     row
-                        .querySelectorAll("ic-typography")
+                        .querySelectorAll(this.IC_TYPOGRAPHY_STRING)
                         .forEach((typographyEl) => {
                         const cellContainer = this.getCellContainer(typographyEl);
                         const tooltipEl = this.getTooltip(typographyEl);
@@ -744,9 +984,17 @@ const DataTable = class {
             }
         }
     }
-    createShowHideTruncation(typographyEl, cellContainer) {
+    createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
         typographyEl.checkMaxLines(typographyEl.scrollHeight);
         typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
+            descriptionHeight) {
+            typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
+                this.DEFAULT_LINE_HEIGHT)}`);
+        }
+        else {
+            typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        }
         typographyEl.setShowHideExpanded(false);
         cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
     }
@@ -760,9 +1008,6 @@ const DataTable = class {
         cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
         this.createShowHideTruncation(typographyEl, cellContainer);
     }
-    getTruncWrapper(typographyEl) {
-        return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
-    }
     // Set the height to initial if row height is set and the show / hide truncation
     // is clicked
     handleTypographyTruncationExpandToggle({ detail, }) {
@@ -852,8 +1097,8 @@ const DataTable = class {
         }
         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 });
+    async dataHandler() {
+        this.loadingOptions = Object.assign({}, this.loadingOptions);
         if (this.loading) {
             !this.hasLoadedForOneSecond
                 ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
@@ -880,7 +1125,7 @@ const DataTable = class {
                 typographyEl.setShowHideExpanded(false);
                 cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
             }
-            else {
+            else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
                 typographyEl.resetTruncation().then(() => {
                     if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
                         cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
@@ -916,7 +1161,11 @@ const DataTable = class {
         this.variableRowHeight = null;
     }
     showLoadingIndicator() {
-        this.loadingIndicator.classList.add("show");
+        var _a, _b, _c;
+        if ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) {
+            (_b = this.loadingOverlay) === null || _b === void 0 ? void 0 : _b.classList.add("show");
+        }
+        (_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
     }
     getRowOptions(rowKeys, rowValues) {
         const rowOptionsIndex = rowKeys.indexOf("rowOptions");
@@ -945,23 +1194,44 @@ const DataTable = class {
         if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
             this.truncationPattern === this.TOOLTIP_STRING) {
             if (!typographyEl.getAttribute("style") ||
-                typographyEl.style.cssText.includes("--ic-line-clamp: 0;")) {
+                typographyEl.style.cssText.includes(`${this.LINE_CLAMP_CSS_VARIABLE}: 0;`)) {
                 this.addLineClampCSS(typographyEl, cellContainer);
             }
-            this.createTruncationTooltip(typographyEl, cellContainer);
+            if (!cellContainer.querySelector(this.IC_TOOLTIP_STRING))
+                this.createTruncationTooltip(typographyEl, cellContainer);
         }
     }
     removeTooltip(cellContainer, typographyEl, tooltip) {
-        cellContainer.appendChild(typographyEl);
+        const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
+        cellTextWrapper.prepend(typographyEl);
         if (tooltip) {
             tooltip.remove();
         }
     }
     addLineClampCSS(typographyEl, cellContainer) {
-        typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
+        var _a, _b;
+        const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
+            (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > descriptionCellHeight) {
+            let iconHeight;
+            if (helpers.deviceSizeMatches(helpers.IC_DEVICE_SIZES.XS)) {
+                const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
+                iconHeight = cellIcon ? cellIcon.clientHeight : 0;
+            }
+            else {
+                iconHeight = 0;
+            }
+            const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
+                ((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
+                iconHeight;
+            typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
+        }
+        else {
+            typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
+        }
     }
     createTruncationTooltip(typographyEl, cellContainer) {
-        const tooltipEl = document.createElement("ic-tooltip");
+        const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
         tooltipEl.setAttribute("target", typographyEl.id);
         tooltipEl.setAttribute("label", typographyEl.textContent);
         tooltipEl.classList.add("ic-tooltip-overflow");
@@ -969,33 +1239,30 @@ const DataTable = class {
             // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
             strategy: "fixed",
         });
-        cellContainer.appendChild(tooltipEl);
-        tooltipEl.appendChild(typographyEl);
+        const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
+        cellTextWrapper.prepend(tooltipEl);
+        tooltipEl.prepend(typographyEl);
     }
     render() {
-        const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
-        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: {
+        var _a, _b;
+        const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, theme, } = this;
+        return (index.h(index.Host, { style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, 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", { style: {
+            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, 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 &&
             !loading &&
-            (hideColumnHeaders ? (index.h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && index.h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
-            !loading &&
-            (helpers.isSlotUsed(this.el, "empty-state") ? (index.h("slot", { name: "empty-state" })) : (index.h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (index.h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
-                "loading-empty": loading,
-                loading: true,
-                "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}`
+            (hideColumnHeaders ? (index.h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), index.h("div", { "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (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", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (index.h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            ? `${((_b = this.columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) || sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "columnHeaderTruncation": ["headerTruncationChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],