@ukic/canary-web-components 3.0.0-canary.18 → 3.0.0-canary.19

package/dist/components/ic-data-table.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { d as dynamicDebounce, b as isEmptyString, p as pxToRem, i as isSlotUsed, c as addDataToPosition, e as deviceSizeMatches, f as getSlotElements, h as checkResizeObserver, j as IC_DEVICE_SIZES } from './helpers2.js';
+import { b as isEmptyString, p as pxToRem, i as isSlotUsed, c as addDataToPosition, d as deviceSizeMatches, e as getSlotElements, f as checkResizeObserver, h as dynamicDebounce, j as IC_DEVICE_SIZES } from './helpers2.js';
 import { d as defineCustomElement$i } from './ic-button2.js';
 import { d as defineCustomElement$h } from './ic-checkbox2.js';
 import { d as defineCustomElement$g } from './ic-empty-state2.js';
@@ -30,7 +30,7 @@ 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);--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),.cell-description-icon>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}.checkbox-cell{--column-width:var(--ic-space-xxl);align-content:center;border-right:none}.table-density-dense.checkbox-cell{--column-width:2.5rem}.checkbox-wrapper{display:flex;justify-content:center}.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-data-table-cell-description-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 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}.data-type-number,.data-type-date{text-align:right;justify-content:end}.cell-vertical-align-top{vertical-align:top;align-items:flex-start}.cell-vertical-align-middle{vertical-align:middle;align-items:center}.cell-vertical-align-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),.cell-description-icon>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}.checkbox-cell{--column-width:var(--ic-space-xxl);align-content:center;border-right:none}.table-density-dense.checkbox-cell{--column-width:2.5rem}.checkbox-wrapper{display:flex;justify-content:center}.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-data-table-cell-description-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 IcDataTableStyle0 = icDataTableCss;
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
@@ -138,6 +138,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             pageLabel: "Page",
             rangeLabelType: "page",
             selectedItemsPerPage: 10,
+            selectItemsPerPageOnEnter: true,
             setToFirstPageOnPaginationChange: false,
             showGoToPageControl: true,
             showItemsPerPageControl: true,
@@ -210,6 +211,176 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.getRowHeight = (cellContainer) => parseInt(getComputedStyle(document.documentElement).fontSize) *
             parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING) || "");
+        this.truncateUpdatedData = () => {
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer) {
+                        const truncWrapper = this.getTruncWrapper(typographyEl);
+                        if (truncWrapper &&
+                            cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
+                                truncWrapper.scrollHeight) {
+                            this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                            return;
+                        }
+                        setTimeout(() => {
+                            // slight delay due to data rendering
+                            this.addShowHideTruncationIfNeeded(typographyEl, cellContainer);
+                        }, 150);
+                    }
+                });
+            }
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.dataUpdated = false;
+        };
+        this.truncateTableSorted = () => {
+            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) {
+                        if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                            this.createShowHideTruncation(typographyEl, cellContainer);
+                        }
+                        else {
+                            typographyEl.resetTruncation().then(() => {
+                                cellContainer.removeAttribute("style");
+                            });
+                        }
+                    }
+                });
+            }
+            this.tableSorted = false;
+        };
+        this.truncateRowHeightSet = () => {
+            // 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
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                if (cellContainer) {
+                    if (this.globalRowHeight === "auto") {
+                        cellContainer.style.height = "";
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
+                        cellContainer.removeAttribute(this.DATA_ROW_HEIGHT_STRING);
+                        if (this.truncationPattern === this.TOOLTIP_STRING) {
+                            this.removeTooltip(cellContainer, typographyEl, tooltipEl);
+                            typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
+                        }
+                        else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                            this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                        }
+                        return;
+                    }
+                    // If the set row height is bigger than the cell container even
+                    // with textWrap, set the row height
+                    if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
+                        !cellContainer.style.height &&
+                        this.getRowHeight(cellContainer) > 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
+                        // scroll height, remove see more / see less button
+                        if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                            const truncWrapper = this.getTruncWrapper(typographyEl);
+                            if (this.getShowHideButton(typographyEl) &&
+                                truncWrapper &&
+                                truncWrapper.scrollHeight <= cellContainer.clientHeight) {
+                                this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                                return;
+                            }
+                        }
+                        this.truncate(typographyEl, cellContainer, tooltipEl);
+                    }
+                    else {
+                        this.updateSetRowHeight(typographyEl);
+                    }
+                }
+            });
+            this.rowHeightSet = false;
+        };
+        this.truncateItemsPerPageChange = () => {
+            var _a;
+            // Only run truncation on the new rows
+            // when the number of items per page has increased
+            const allRows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".table-row");
+            if (allRows && this.rowsPerPage > this.previousItemsPerPage) {
+                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
+                newRows.forEach((row) => {
+                    row.querySelectorAll("ic-typography").forEach((typographyEl) => {
+                        const cellContainer = this.getCellContainer(typographyEl);
+                        const tooltipEl = this.getTooltip(typographyEl);
+                        if (cellContainer)
+                            this.truncate(typographyEl, cellContainer, tooltipEl);
+                    });
+                });
+            }
+            this.previousItemsPerPage = this.rowsPerPage;
+            this.itemsPerPageChange = false;
+        };
+        this.truncatePageChange = () => {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                // set truncation to see more if opened and next/previous page is pressed
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer &&
+                        this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer) &&
+                        !this.getShowHideButton(typographyEl)) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+            this.icPageChangeEvent = false;
+        };
+        this.truncateDensityUpdate = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                if (cellContainer)
+                    this.truncate(typographyEl, cellContainer, tooltipEl);
+            });
+            this.densityUpdate = false;
+        };
+        this.typographyScrollHeightExceedsContainerHeight = (typographyEl, cellContainer) => cellContainer && typographyEl.scrollHeight > cellContainer.clientHeight;
+        this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight = (typographyEl, cellContainer) => {
+            const truncWrapper = this.getTruncWrapper(typographyEl);
+            return (truncWrapper &&
+                cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
+                    truncWrapper.scrollHeight);
+        };
+        this.truncatePatternUpdated = () => {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const tooltipEl = this.getTooltip(typographyEl);
+                    if (cellContainer &&
+                        this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer)) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
+                    }
+                });
+            }
+            else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer) {
+                        if (this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight(typographyEl, cellContainer)) {
+                            this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                            return;
+                        }
+                        this.addShowHideTruncationIfNeeded(typographyEl, cellContainer);
+                    }
+                });
+            }
+        };
         this.updateSetRowHeight = (typographyEl) => {
             const removeRowHeightVariable = (element) => {
                 const cellContainer = this.getCellContainer(element);
@@ -227,28 +398,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 });
             }
         };
-        this.debounceDataTruncation = () => {
-            this.getTypographyElements().forEach((typographyEl) => {
-                const cellContainer = this.getCellContainer(typographyEl);
-                if (cellContainer &&
-                    !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
-                    dynamicDebounce(() => {
-                        this.dataTruncation(typographyEl);
-                        if (!this.isNewDebounceDelaySet) {
-                            this.debounceDelay = 200;
-                            this.isNewDebounceDelaySet = true;
-                        }
-                    }, () => this.debounceDelay));
-                    this.resizeObserver.observe(typographyEl);
-                }
-            });
-        };
         this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
         this.truncate = (typographyEl, cellContainer, tooltip) => {
             var _a;
-            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+            if (this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer)) {
                 //24 is the height of a single line
                 if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
                     if (this.truncationPattern === this.TOOLTIP_STRING) {
@@ -268,52 +421,49 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 }
                 if (this.truncationPattern === this.SHOW_HIDE_STRING &&
                     !isEmptyString(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.getAttribute("max-lines"))) {
-                    this.resetShowHideTruncation(typographyEl);
+                    this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                 }
             }
         };
-        this.dataTruncation = (typographyEl) => {
-            var _a;
+        this.addShowHideTruncationIfNeeded = (typographyEl, cellContainer) => {
+            if (this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer)) {
+                this.addShowHideTruncation(cellContainer, typographyEl);
+                return true;
+            }
+            return false;
+        };
+        this.dataTruncation = (typographyEl, cellContainer) => {
             // Tooltip truncation mentioned in AC. Will need revisiting
             const tooltip = this.getTooltip(typographyEl);
-            const cellContainer = this.getCellContainer(typographyEl);
-            if (!cellContainer ||
-                cellContainer.classList.contains("data-type-element") ||
+            if (cellContainer.classList.contains("data-type-element") ||
                 this.dataUpdated) {
                 return;
             }
             if (this.truncationPattern === this.SHOW_HIDE_STRING &&
-                ((_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"))) {
-                const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                this.getShowHideButton(typographyEl)) {
                 // If the see more/see less is present and the max lines is equal to the cell container
                 // remove the see more/see less button
-                if (showHideBtn) {
-                    const truncWrapper = this.getTruncWrapper(typographyEl);
-                    if (truncWrapper &&
-                        this.getLines(truncWrapper.scrollHeight) ===
-                            Number(typographyEl.getAttribute("max-lines"))) {
-                        this.resetShowHideTruncation(typographyEl);
-                    }
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                if (truncWrapper &&
+                    this.getLines(truncWrapper.scrollHeight) ===
+                        Number(typographyEl.getAttribute("max-lines"))) {
+                    this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                 }
             }
             // Deals with setting and resetting row height and re-truncating data
             if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
-                const truncWrapper = this.getTruncWrapper(typographyEl);
                 // cellContainer.clientHeight - 24 removes the extra line by see more/see less
-                if (truncWrapper &&
-                    cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
-                        truncWrapper.scrollHeight) {
-                    this.resetShowHideTruncation(typographyEl);
+                if (this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight(typographyEl, cellContainer)) {
+                    this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                     return;
                 }
-                if (typographyEl.scrollHeight > cellContainer.clientHeight) {
-                    this.addShowHideTruncation(cellContainer, typographyEl);
+                if (this.addShowHideTruncationIfNeeded(typographyEl, cellContainer)) {
                     return;
                 }
             }
-            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
-                (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
-                (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+            if (typographyEl.scrollHeight > 0 &&
+                cellContainer.clientHeight > 0 &&
+                typographyEl.scrollHeight === cellContainer.clientHeight) {
                 if (tooltip) {
                     this.removeTooltip(cellContainer, typographyEl, tooltip);
                 }
@@ -322,6 +472,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.truncate(typographyEl, cellContainer, tooltip);
         };
         this.getTruncWrapper = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".trunc-wrapper"); };
+        this.getShowHideButton = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"); };
         this.removeTextWrap = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tableCell = typographyEl.closest("td");
@@ -333,6 +484,37 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.getCellContainer = (typographyEl) => typographyEl.closest(".cell-container");
         this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
             array.forEach((val) => val.textWrap && delete val.textWrap);
+        this.resetSingleShowHideTruncation = (typographyEl, cellContainer) => {
+            const truncWrapper = this.getTruncWrapper(typographyEl);
+            if (!(cellContainer && truncWrapper))
+                return;
+            if (truncWrapper.scrollHeight > cellContainer.clientHeight &&
+                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
+                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
+                    Number(typographyEl.getAttribute("max-lines"))) {
+                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.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
+            }
+            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));
+                    }
+                });
+            }
+        };
+        this.resetAllShowHideTruncation = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                typographyEl.resetTruncation().then(() => {
+                    if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
+                });
+            });
+        };
         this.startLoadingTimer = () => {
             this.hasLoadedForOneSecond = false;
             this.timerStarted = Date.now();
@@ -411,31 +593,25 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
             });
         };
-        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
                     !isSlotUsed(this.el, cellSlotName)
                     ? cell
-                    : undefined, 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) ||
+                    : undefined, 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.horizontal) ||
+                        ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.horizontal) ||
+                        this.getCellAlignment(cell, "horizontal")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
+                        !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.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")) ||
+                        !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.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.getCalculatedRowHeight(columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell, currentRowHeight)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
                     ? this.setRowHeight(currentRowHeight)
-                    : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (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)) && (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" &&
+                    : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_f = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _f === void 0 ? void 0 : _f.onAllCells)) &&
+                (cellValue("icon") || ((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _g === void 0 ? void 0 : _g.icon)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || ((_h = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _h === void 0 ? void 0 : _h.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
                 !isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
                     "cell-text-wrapper": true,
                     "cell-text-no-wrap": !this.truncationPattern,
@@ -450,7 +626,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 Object.keys(cell).includes("description") && (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) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), 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"))))))))));
+                } }, ((_j = cellValue("description")) === null || _j === void 0 ? void 0 : _j.icon) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_l = (_k = cellValue("description")) === null || _k === void 0 ? void 0 : _k.data) !== null && _l !== void 0 ? _l : cellValue("description"))))))))));
         };
         this.createCells = (row, rowIndex) => {
             var _a;
@@ -468,6 +644,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return this.columns.map((columnName, index) => {
+                var _a, _b, _c, _d;
                 const cell = this.getObjectValue(row, columnName["key"]);
                 const columnProps = this.columns[index];
                 const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
@@ -480,12 +657,19 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                             ["row-header-sticky"]: this.stickyRowHeaders,
                         } }, cellValue("title")));
                 }
-                const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
+                const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
                 if (rowKeys[index] !== "rowOptions") {
                     return (h("td", { class: {
                             ["table-cell"]: true,
                             [`table-density-${this.density}`]: this.notDefaultDensity(),
                             ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
+                            [`cell-vertical-align-${((_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"),
                         }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
                         Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
                         // eslint-disable-next-line react/jsx-no-bind
@@ -672,52 +856,50 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             cellContainer.setAttribute(this.DATA_ROW_HEIGHT_STRING, rowHeight.toString());
             cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
         };
+        this.getDescriptionHeight = (description) => {
+            const descriptionMarginTop = window
+                .getComputedStyle(description)
+                .getPropertyValue("margin-top");
+            return description.clientHeight + parseInt(descriptionMarginTop, 10);
+        };
         /** Method to update the row heights on cells with descriptions and tooltip truncation */
         this.updateCellHeightsWithDescriptions = () => {
             var _a, _b;
+            const isXSDevice = deviceSizeMatches(IC_DEVICE_SIZES.XS);
             (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.forEach((description) => {
                 const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
                 const typography = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
-                const descriptionMarginTop = window
-                    .getComputedStyle(description)
-                    .getPropertyValue("margin-top");
-                const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
                 if (typography &&
                     cellContainer &&
                     this.globalRowHeight &&
                     this.globalRowHeight !== "auto") {
+                    const descriptionHeight = this.getDescriptionHeight(description);
+                    const descriptionHeightPlusLineHeight = descriptionHeight + this.DEFAULT_LINE_HEIGHT;
                     if (!typography.textContent &&
-                        descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
+                        descriptionHeightPlusLineHeight > this.globalRowHeight) {
                         this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
                     }
                     else if (this.truncationPattern === this.TOOLTIP_STRING) {
-                        if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
-                            this.globalRowHeight) {
+                        if (descriptionHeightPlusLineHeight > this.globalRowHeight) {
                             const cellIcon = cellContainer.querySelector(".icon");
-                            if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
+                            let rowHeight = descriptionHeightPlusLineHeight;
+                            if (cellIcon && isXSDevice) {
                                 // 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);
+                                rowHeight += cellIcon.clientHeight;
                             }
+                            this.updateRowHeightForDescriptions(rowHeight, 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 &&
+                        descriptionHeightPlusLineHeight > 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.updateRowHeightForDescriptions(descriptionHeightPlusLineHeight, cellContainer);
+                        this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
                     }
                 }
             });
@@ -768,12 +950,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     this.fixCellTooltip(slottedEl);
                 });
             });
-            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => {
-                const actionElement = actionElementSpan.firstChild;
-                if (actionElement) {
-                    this.fixCellTooltip(actionElement);
-                }
-            });
+            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => this.fixCellTooltip(actionElementSpan));
         };
         this.handleClick = (event, callback) => callback(event);
         this.renderTableBody = (loading, data, overlay) => {
@@ -873,10 +1050,19 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 const cellContainer = this.getCellContainer(typographyEl);
                 if (cellContainer &&
                     !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                    this.dataTruncation(typographyEl);
+                    this.dataTruncation(typographyEl, cellContainer);
+                    this.resizeObserver = new ResizeObserver(
+                    // This gets triggered twice due to updated data and see more/see less button
+                    dynamicDebounce(() => {
+                        this.dataTruncation(typographyEl, cellContainer);
+                        if (!this.isNewDebounceDelaySet) {
+                            this.debounceDelay = 200;
+                            this.isNewDebounceDelaySet = true;
+                        }
+                    }, () => this.debounceDelay));
+                    this.resizeObserver.observe(typographyEl);
                 }
             });
-            this.debounceDataTruncation();
         }
         if (this.globalRowHeight !== "auto") {
             this.updateSetRowHeight();
@@ -888,188 +1074,34 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         // 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();
-        }
-    }
-    componentDidRender() {
-        this.fixCellTooltips();
-        this.updateCellHeightsWithDescriptions();
-        this.adjustWidthForActionElement();
-    }
-    truncateUpdatedData() {
-        var _a;
-        if (this.dataUpdated) {
-            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    const truncWrapper = this.getTruncWrapper(typographyEl);
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    if (truncWrapper &&
-                        cellContainer &&
-                        cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
-                            truncWrapper.scrollHeight) {
-                        this.resetShowHideTruncation(typographyEl);
-                        return;
-                    }
-                    setTimeout(() => {
-                        // slight delay due to data rendering
-                        if (cellContainer &&
-                            typographyEl.scrollHeight > cellContainer.clientHeight) {
-                            this.addShowHideTruncation(cellContainer, typographyEl);
-                        }
-                    }, 150);
-                });
-            }
-            if (this.truncationPattern === this.TOOLTIP_STRING) {
-                this.updateTruncationTooltip();
+            if (this.dataUpdated) {
+                this.truncateUpdatedData();
             }
-            this.dataUpdated = false;
-        }
-        if (this.tableSorted) {
-            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) {
-                        if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                            this.createShowHideTruncation(typographyEl, cellContainer);
-                        }
-                        else {
-                            typographyEl.resetTruncation().then(() => {
-                                cellContainer.removeAttribute("style");
-                            });
-                        }
-                    }
-                });
+            if (this.tableSorted) {
+                this.truncateTableSorted();
             }
-            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) {
-            this.getTypographyElements().forEach((typographyEl) => {
-                var _a, _b;
-                const cellContainer = this.getCellContainer(typographyEl);
-                const tooltipEl = this.getTooltip(typographyEl);
-                if (cellContainer) {
-                    if (this.globalRowHeight === "auto") {
-                        cellContainer.style.height = "";
-                        if (this.truncationPattern === this.TOOLTIP_STRING) {
-                            this.removeTooltip(cellContainer, typographyEl, tooltipEl);
-                            typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
-                        }
-                        else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                            this.resetShowHideTruncation(typographyEl);
-                        }
-                        return;
-                    }
-                    // If the set row height is bigger than the cell container even
-                    // with textWrap, set the row 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) &&
-                        this.getRowHeight(cellContainer) > 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
-                        // scroll height, remove see more / see less button
-                        if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                            const truncWrapper = this.getTruncWrapper(typographyEl);
-                            const showHideBtn = (_b = typographyEl.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
-                            if (showHideBtn &&
-                                truncWrapper &&
-                                truncWrapper.scrollHeight <= cellContainer.clientHeight) {
-                                this.resetShowHideTruncation(typographyEl);
-                                return;
-                            }
-                        }
-                        this.truncate(typographyEl, cellContainer, tooltipEl);
-                    }
-                    else {
-                        this.updateSetRowHeight(typographyEl);
-                    }
-                }
-            });
-            this.rowHeightSet = false;
-        }
-        // Only run truncation on the new rows
-        // when the number of items per page has increased
-        if (this.itemsPerPageChange) {
-            const allRows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".table-row");
-            if (allRows && this.rowsPerPage > this.previousItemsPerPage) {
-                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
-                newRows.forEach((row) => {
-                    row.querySelectorAll("ic-typography").forEach((typographyEl) => {
-                        const cellContainer = this.getCellContainer(typographyEl);
-                        const tooltipEl = this.getTooltip(typographyEl);
-                        if (cellContainer)
-                            this.truncate(typographyEl, cellContainer, tooltipEl);
-                    });
-                });
+            if (this.rowHeightSet) {
+                this.truncateRowHeightSet();
             }
-            this.previousItemsPerPage = this.rowsPerPage;
-            this.itemsPerPageChange = false;
-        }
-        if (!this.initialLoad && this.icPageChangeEvent) {
-            if (this.truncationPattern === this.TOOLTIP_STRING) {
-                this.updateTruncationTooltip();
+            if (this.itemsPerPageChange) {
+                this.truncateItemsPerPageChange();
             }
-            // set truncation to see more if opened and next/previous page is pressed
-            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    var _a;
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    const showHideBtn = (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-                    if (cellContainer &&
-                        (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
-                        !showHideBtn) {
-                        this.addShowHideTruncation(cellContainer, typographyEl);
-                    }
-                });
+            if (!this.initialLoad && this.icPageChangeEvent) {
+                this.truncatePageChange();
             }
-            this.icPageChangeEvent = false;
-        }
-        if (this.densityUpdate) {
-            this.getTypographyElements().forEach((typographyEl) => {
-                const cellContainer = this.getCellContainer(typographyEl);
-                const tooltipEl = this.getTooltip(typographyEl);
-                if (cellContainer)
-                    this.truncate(typographyEl, cellContainer, tooltipEl);
-            });
-            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 (cellContainer &&
-                        typographyEl.scrollHeight > cellContainer.clientHeight) {
-                        this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
-                    }
-                });
+            if (this.densityUpdate) {
+                this.truncateDensityUpdate();
             }
-            else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    const truncWrapper = this.getTruncWrapper(typographyEl);
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    if (cellContainer) {
-                        if (truncWrapper &&
-                            (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
-                                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);
-                        }
-                    }
-                });
+            if (this.truncationPatternUpdated) {
+                this.truncatePatternUpdated();
             }
         }
     }
+    componentDidRender() {
+        this.fixCellTooltips();
+        this.updateCellHeightsWithDescriptions();
+        this.adjustWidthForActionElement();
+    }
     createShowHideTruncation(typographyEl, cellContainer, descriptionHeight = 0) {
         typographyEl.checkMaxLines(typographyEl.scrollHeight);
         typographyEl.setAttribute("max-lines", `${this.getLines(cellContainer.clientHeight - descriptionHeight)}`);
@@ -1133,18 +1165,17 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     handleDensityChange(ev) {
         this.density = ev.detail.value;
     }
-    loadingHandler(newValue) {
-        if (newValue)
-            this.startLoadingTimer();
+    loadingHandler() {
         if (this.loading) {
+            this.startLoadingTimer();
             setTimeout(() => {
                 this.showLoadingIndicator();
             }, 500);
         }
     }
-    truncationPatternHandler(newValue) {
-        if (newValue === this.TOOLTIP_STRING) {
-            this.resetShowHideTruncation();
+    truncationPatternHandler() {
+        if (this.truncationPattern === this.TOOLTIP_STRING) {
+            this.resetAllShowHideTruncation();
             this.updateTruncationTooltip(true);
             // Not using debounceDataTruncation here due to resizeObserver not being triggered
             this.getTypographyElements().forEach((typographyEl) => {
@@ -1154,25 +1185,20 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     this.truncate(typographyEl, cellContainer, tooltip);
             });
         }
-        if (newValue === this.SHOW_HIDE_STRING) {
+        else if (this.truncationPattern === 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.updateTruncationTooltip(true);
             this.getTypographyElements().forEach((typographyEl) => {
-                const truncWrapper = this.getTruncWrapper(typographyEl);
                 const cellContainer = this.getCellContainer(typographyEl);
                 if (cellContainer) {
-                    if (truncWrapper &&
-                        cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
-                            truncWrapper.scrollHeight) {
-                        this.resetShowHideTruncation(typographyEl);
+                    if (this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight(typographyEl, cellContainer)) {
+                        this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                         return;
                     }
                     setTimeout(() => {
                         // slight delay due to data rendering
-                        if (typographyEl.scrollHeight > cellContainer.clientHeight) {
-                            this.addShowHideTruncation(cellContainer, typographyEl);
-                        }
+                        this.addShowHideTruncationIfNeeded(typographyEl, cellContainer);
                     }, 150);
                 }
             });
@@ -1194,40 +1220,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     async densityHandler() {
         this.densityUpdate = true;
     }
-    resetShowHideTruncation(typographyEl) {
-        if (typographyEl) {
-            const truncWrapper = this.getTruncWrapper(typographyEl);
-            const cellContainer = this.getCellContainer(typographyEl);
-            if (!(cellContainer && truncWrapper))
-                return;
-            if (truncWrapper.scrollHeight > cellContainer.clientHeight &&
-                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
-                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
-                    Number(typographyEl.getAttribute("max-lines"))) {
-                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.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
-            }
-            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));
-                    }
-                });
-            }
-        }
-        else {
-            this.getTypographyElements().forEach((typographyEl) => {
-                const cellContainer = this.getCellContainer(typographyEl);
-                typographyEl.resetTruncation().then(() => {
-                    if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
-                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                    }
-                });
-            });
-        }
-    }
     rowHeightChangeHandler(newValue, oldValue) {
         if (+newValue !== +oldValue) {
             this.deleteTextWrapDataKey(this.data);
@@ -1326,22 +1318,22 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: 'b1a8a027c223f8ec8a82eaeadc6fcd584bcadaa3', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '7abde36f7f17075a3f25632a14090fe85c6c610d', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '8ef1e2c34b7a0aed1558fb393dda3c869b1fed1e', name: "title-bar" }), h("div", { key: '39984060ae40b37df7a84ff46f1d73a355ba491b', class: {
+        return (h(Host, { key: '2b548f8d26428034d51e7475883d6e7b407f28ec', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '5663c5ce124cf6f67435a8d18ddda4bc63a88e4f', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '1ea59340e9633ca9a2f6d9fdba53d734050ddf84', name: "title-bar" }), h("div", { key: 'f2aef7502ca0c4124bf70b0fb4173e29b892004b', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '7c7fe1ce4ff82644f52325129f392b5d6dfb7635', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '061ab3f20e857b05a4cd668656b0a730f1d0645a', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: 'de772f10cbaa802c0df5be9225312a946b64fdaa', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '5e41deeb29ab3a0f4b2daf9a17b6ed0cd2a756e7', class: {
+            } }, h("caption", { key: '727550fa24947c102cd231b1a4e262ffcba6e3b3', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'c07fa1fddf4fa8364c52444a3cc8df0d1bdaabaf', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: '93b3e712a034c666d90329bcd0c9e05d64f2633b' }, rowSelection && data && (h("th", { key: '38be7fab691d5cf1db9c817134dc2fa64b28073e', class: {
+            } }, h("tr", { key: '01735185f99abdd22a71edcaf944642d6e2c45de' }, rowSelection && data && (h("th", { key: '40c7157f3f3e45b6e9a9a0dfc65e2374526e150d', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: 'ff716f89433450095aad287521f76e5bfc630646', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '88b6dbb7c0320233ef273cc23951e7b347955e79', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, h("div", { key: '8d53b98f553294d9b2b9483f4ed001da905fcff4', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'b08cd440baff49256037e3ca3d27059a64c19d98', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '6f01be0ef7e54bf99cae567dca5cb75c271d2a6f', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '0d01727d838b4f4e5cce597bbbebb14721904f25', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (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 && (h("div", { key: 'c73c4ffe5a0633bce3ccf116a69e3007342b27af', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '8ddc07463825ac2c637cf7f413840acc2662d2c2', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'd619ff136af4258047c21f7ea83ad8dd9ec77873', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (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, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, 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 && (h("div", { key: 'f0a61b27a9e5dda26ed7c7ad0b4b7cadb0d910d7', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));