@ukic/canary-web-components 3.0.0-canary.14 → 3.0.0-canary.16

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

@@ -1,6 +1,7 @@
 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 { d as defineCustomElement$h } from './ic-button2.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';
 import { d as defineCustomElement$f } from './ic-input-component-container2.js';
 import { d as defineCustomElement$e } from './ic-input-container2.js';
@@ -29,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}.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;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 IcDataTableStyle0 = icDataTableCss;
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
@@ -38,6 +39,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
+        this.icSelectAllRows = createEvent(this, "icSelectAllRows", 7);
         this.icSelectedRowChange = createEvent(this, "icSelectedRowChange", 7);
         this.icSortChange = createEvent(this, "icSortChange", 7);
         this.DENSITY_HEIGHT_MULTIPLIER = {
@@ -85,6 +87,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.fromRow = 0;
         this.scrollable = false;
         this.scrollOffset = 0;
+        this.selectedRows = [];
         this.debounceDelay = 0;
         /**
          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
@@ -106,10 +109,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
          * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
          */
         this.globalRowHeight = "auto";
-        /**
-         * If `true`, the selected row is highlighted using a background colour.
-         */
-        this.highlightSelectedRow = true;
         /**
          * If `true`, column headers will not be visible.
          */
@@ -144,6 +143,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             showItemsPerPageControl: true,
             type: "simple",
         };
+        /**
+         * If `true`, a checkbox column will be displayed to the left of the table which allows multiple rows to be selected.
+         */
+        this.rowSelection = false;
         /**
          * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -186,11 +189,12 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.headerResizeObserver.observe(this.el);
         };
         this.headerResizeCallback = () => {
+            var _a, _b, _c;
             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 tableContainerWidth = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-container")) === null || _b === void 0 ? void 0 : _b.clientWidth;
+                if (tableContainerWidth &&
+                    tableContainerWidth !== this.prevTableContainerWidth) {
+                    (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("th.column-header").forEach((header) => {
                         const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
                         const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
                         if (tooltip && typographyEls && typographyEls.length === 2) {
@@ -204,49 +208,46 @@ 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.updateSetRowHeight = (typographyEl) => {
-            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
-            if (typographyEl) {
-                const cellContainer = this.getCellContainer(typographyEl);
-                const rowHeight = fontSize *
-                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                if (typographyEl.scrollHeight > rowHeight) {
+            const removeRowHeightVariable = (element) => {
+                const cellContainer = this.getCellContainer(element);
+                if (cellContainer &&
+                    element.scrollHeight > this.getRowHeight(cellContainer)) {
                     cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
                 }
+            };
+            if (typographyEl) {
+                removeRowHeightVariable(typographyEl);
             }
             else {
                 this.getTypographyElements().forEach((typographyEl) => {
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    const rowHeight = fontSize *
-                        parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                    if (typographyEl.scrollHeight > rowHeight) {
-                        cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
-                    }
+                    removeRowHeightVariable(typographyEl);
                 });
             }
         };
         this.debounceDataTruncation = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const cellContainer = this.getCellContainer(typographyEl);
-                if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                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.setNewDebounceDelay(200);
+                            this.debounceDelay = 200;
+                            this.isNewDebounceDelaySet = true;
                         }
                     }, () => this.debounceDelay));
                     this.resizeObserver.observe(typographyEl);
                 }
             });
         };
-        this.setNewDebounceDelay = (delay) => {
-            this.debounceDelay = delay;
-            this.isNewDebounceDelaySet = true;
-        };
         this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
         this.truncate = (typographyEl, cellContainer, tooltip) => {
+            var _a;
             if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
                 //24 is the height of a single line
                 if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
@@ -261,33 +262,36 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             else {
                 if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
                     typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
-                    const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
-                    cellTextWrapper.prepend(typographyEl);
+                    (_a = cellContainer
+                        .querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(typographyEl);
                     tooltip.remove();
                 }
                 if (this.truncationPattern === this.SHOW_HIDE_STRING &&
-                    !isEmptyString(typographyEl.getAttribute("max-lines"))) {
+                    !isEmptyString(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.getAttribute("max-lines"))) {
                     this.resetShowHideTruncation(typographyEl);
                 }
             }
         };
         this.dataTruncation = (typographyEl) => {
+            var _a;
             // Tooltip truncation mentioned in AC. Will need revisiting
             const tooltip = this.getTooltip(typographyEl);
             const cellContainer = this.getCellContainer(typographyEl);
-            if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
+            if (!cellContainer ||
+                cellContainer.classList.contains("data-type-element") ||
                 this.dataUpdated) {
                 return;
             }
             if (this.truncationPattern === this.SHOW_HIDE_STRING &&
-                typographyEl.shadowRoot.querySelector("button")) {
+                ((_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"))) {
                 const showHideBtn = typographyEl.shadowRoot.querySelector("button");
                 // 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 (this.getLines(truncWrapper.scrollHeight) ===
-                        +typographyEl.getAttribute("max-lines")) {
+                    if (truncWrapper &&
+                        this.getLines(truncWrapper.scrollHeight) ===
+                            Number(typographyEl.getAttribute("max-lines"))) {
                         this.resetShowHideTruncation(typographyEl);
                     }
                 }
@@ -317,18 +321,16 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             }
             this.truncate(typographyEl, cellContainer, tooltip);
         };
-        this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
+        this.getTruncWrapper = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".trunc-wrapper"); };
         this.removeTextWrap = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tableCell = typographyEl.closest("td");
-                if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
+                if (tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
                     tableCell.classList.remove(this.TEXT_WRAP_STRING);
                 }
             });
         };
-        this.getCellContainer = (typographyEl) => {
-            return typographyEl.closest(".cell-container");
-        };
+        this.getCellContainer = (typographyEl) => typographyEl.closest(".cell-container");
         this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
             array.forEach((val) => val.textWrap && delete val.textWrap);
         this.startLoadingTimer = () => {
@@ -336,7 +338,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.timerStarted = Date.now();
             setTimeout(() => {
                 this.hasLoadedForOneSecond = true;
-                this.timerStarted = null;
+                this.timerStarted = 0;
             }, this.minimumLoadingDisplayDuration);
         };
         this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
@@ -365,32 +367,28 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             const { description, max, min, progress, monochrome } = this.updatingOptions || {};
             return (h("th", { colSpan: this.columns.length, class: "updating-state" }, 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 pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
-                this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
-        };
+        this.setRowHeight = (height) => pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
+            this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
         this.setTruncationClass = () => this.truncationPattern
             ? { [`truncation-${this.truncationPattern}`]: true }
             : {};
         this.getColumnWidth = (columnWidth) => {
             // TODO: Setting max width on columns
             let columnWidthStyling = {};
-            if (columnWidth) {
-                if (typeof columnWidth === "string") {
-                    columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
+            if (typeof columnWidth === "string") {
+                columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
+            }
+            else if (columnWidth && Object.keys(columnWidth).length > 0) {
+                if (columnWidth.minWidth) {
+                    columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth.minWidth });
                 }
-                if (typeof columnWidth === "object" && !!Object.keys(columnWidth)) {
-                    if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth) {
-                        columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
-                    }
-                    if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
-                        columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
-                    }
+                if (columnWidth.maxWidth) {
+                    columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth.maxWidth });
                 }
             }
             return columnWidthStyling;
         };
-        this.getRowHeight = (currentRowHeight, columnProps, rowTextWrap, cell) => {
+        this.getCalculatedRowHeight = (columnProps, rowTextWrap, cell, currentRowHeight) => {
             if ((this.truncationPattern || currentRowHeight) &&
                 !(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
                 !rowTextWrap &&
@@ -403,20 +401,22 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             return {};
         };
         this.adjustWidthForActionElement = () => {
-            const elements = this.el.shadowRoot.querySelectorAll(".action-element");
-            elements.forEach((element) => {
+            var _a;
+            const elements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".action-element");
+            elements === null || elements === void 0 ? void 0 : 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))`;
+                if (gridWrapper)
+                    gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
             });
         };
-        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
+        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;
             return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
                     !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) ||
+                    : 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) ||
@@ -432,7 +432,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                         (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
+                        !!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" &&
@@ -480,17 +480,18 @@ 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);
                 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",
                         }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
-                        Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
+                        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
                         onClick: cell.actionOnClick
                             ? (event) => this.handleClick(event, cell.actionOnClick)
-                            : undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
+                            : undefined }))) : (CellContent)));
                 }
             });
         };
@@ -523,16 +524,28 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 [`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;
+            const notCurrentlySelected = !this.selectedRows.includes(row);
+            this.selectedRows = notCurrentlySelected
+                ? [...this.selectedRows, row]
+                : this.selectedRows.filter((selectedRow) => selectedRow !== row);
+            this.icSelectedRowChange.emit({
+                row: notCurrentlySelected ? row : null,
+                selectedRows: this.selectedRows,
+            });
+        };
+        this.selectAllRows = () => {
+            this.selectedRows =
+                this.organisedData &&
+                    this.selectedRows.length !== this.organisedData.length
+                    ? [...this.organisedData]
+                    : [];
+            this.icSelectAllRows.emit(this.selectedRows);
         };
         this.createRows = () => {
+            var _a, _b, _c;
             const data = this.showPagination
-                ? this.data.slice(this.fromRow, this.toRow)
-                : this.data.slice();
+                ? (_a = this.data) === null || _a === void 0 ? void 0 : _a.slice(this.fromRow, this.toRow)
+                : (_b = this.data) === null || _b === void 0 ? void 0 : _b.slice();
             const paginationOffset = this.showPagination ? this.fromRow : 0;
             /**
              * Ensures that createCells has a value in data to map over to actually render the slot.
@@ -540,7 +553,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
              * `addDataToPosition` used to add the element in the correct column order.
              * Adding empty string value in to give `createCells` something to loop over.
              */
-            const organisedData = data.map((row, rowIndex) => {
+            this.organisedData = data === null || data === void 0 ? void 0 : data.map((row, rowIndex) => {
                 const slottedColumns = this.columns
                     .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
                     key,
@@ -553,18 +566,19 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     ? addDataToPosition(row, slottedColumns, "")
                     : row;
             });
-            return organisedData
-                .sort(!this.sortable || this.disableAutoSort
+            return (_c = this.organisedData) === null || _c === void 0 ? void 0 : _c.sort(!this.sortable || this.disableAutoSort
                 ? undefined
-                : this.getSortFunction())
-                .map((row, index) => {
-                return (h("tr", {
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onClick: () => this.onRowClick(row), class: {
-                        ["table-row"]: true,
-                        ["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
-                    }
-                }, this.createCells(row, index + paginationOffset)));
+                : this.getSortFunction()).map((row, index) => {
+                const isRowSelected = this.rowSelection && this.selectedRows.includes(row);
+                const cellIndex = index + paginationOffset;
+                return (h("tr", { class: {
+                        "table-row": true,
+                        "table-row-selected": isRowSelected,
+                    } }, this.rowSelection && (h("td", { class: {
+                        "table-cell": true,
+                        "checkbox-cell": true,
+                        [`table-density-${this.density}`]: this.notDefaultDensity(),
+                    } }, h("div", { class: "checkbox-wrapper" }, h("ic-checkbox", { class: "ic-data-table-checkbox", checked: isRowSelected, disabled: this.updating || this.loading, hideLabel: true, label: `${isRowSelected ? "Deselect" : "Select"} row ${cellIndex}`, onIcCheck: () => this.onRowClick(row), size: this.density === "dense" ? "small" : "medium", value: cellIndex })))), this.createCells(row, cellIndex)));
             });
         };
         this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
@@ -607,12 +621,11 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             }
         };
         this.sortRows = (column) => {
-            const sortButton = this.el.shadowRoot.querySelector(`#sort-button-${column}`);
+            var _a, _b, _c, _d;
             const sortOrders = this.sortOptions.sortOrders;
             if (column !== this.sortedColumn) {
                 if (this.sortedColumn) {
-                    const previousSortedButton = this.el.shadowRoot.querySelector(`#sort-button-${this.sortedColumn}`);
-                    previousSortedButton.setAttribute("aria-label", this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
+                    (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#sort-button-${this.sortedColumn}`)) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-label", this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
                 }
                 this.sortedColumn = column;
                 this.sortedColumnOrder = "unsorted";
@@ -622,50 +635,57 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 nextSortOrderIndex = 0;
             }
             this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
-            sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
+            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#sort-button-${column}`)) === null || _d === void 0 ? void 0 : _d.setAttribute("aria-label", this.getSortButtonLabel(column));
             this.tableSorted = true;
             this.icSortChange.emit({
                 columnName: column,
                 sorted: this.sortedColumnOrder,
             });
         };
+        /** Gets all `ic-typography`elements within the data table, excluding column headers and cell descriptions */
         this.getTypographyElements = () => {
-            // 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);
+            var _a;
+            return Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)")) || []);
         };
+        this.getTooltip = (typographyEl) => typographyEl.closest(this.TOOLTIP);
         this.updateTruncationTooltip = (removeTooltipOnly = false) => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tooltip = this.getTooltip(typographyEl);
                 const cellContainer = this.getCellContainer(typographyEl);
-                if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
-                    this.removeTooltip(cellContainer, typographyEl, tooltip);
-                    typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
-                    return;
+                if (cellContainer) {
+                    if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        this.removeTooltip(cellContainer, typographyEl, tooltip);
+                        typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
+                        return;
+                    }
+                    this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
                 }
-                this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
             });
         };
         this.updateScrollOffset = () => {
-            this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
+            var _a;
+            const tableRowContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-row-container");
+            if (tableRowContainer)
+                this.scrollOffset = tableRowContainer.scrollTop;
         };
         this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
-            cellContainer.setAttribute("data-row-height", rowHeight.toString());
+            cellContainer.setAttribute(this.DATA_ROW_HEIGHT_STRING, 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
+        /** 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) => {
+            var _a, _b;
+            (_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.querySelector(this.IC_TYPOGRAPHY_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 (this.globalRowHeight && this.globalRowHeight !== "auto") {
+                if (typography &&
+                    cellContainer &&
+                    this.globalRowHeight &&
+                    this.globalRowHeight !== "auto") {
                     if (!typography.textContent &&
                         descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
                         this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
@@ -673,7 +693,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     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");
+                            const cellIcon = cellContainer.querySelector(".icon");
                             if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
                                 // recalculate descriptionHeight as when a word break occurs this value changes
                                 // Additional spacing given for 300-400% zoom
@@ -690,7 +710,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                         // 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 &&
+                        descriptionHeight + this.DEFAULT_LINE_HEIGHT >
+                            this.globalRowHeight &&
                         typography.style.getPropertyValue("--truncation-max-lines") !==
                             "initial") {
                         this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
@@ -718,40 +739,36 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             return tableHostDimensions;
         };
         this.fixCellTooltip = (element) => {
-            var _a, _b, _c;
-            let tooltip;
+            var _a, _b;
+            let tooltip = null;
+            const tooltipChildElement = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING);
             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 (tooltipChildElement) {
+                tooltip = tooltipChildElement;
             }
-            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",
+            else if (((_b = element.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                Array.from(element.children).forEach((el) => {
+                    this.fixCellTooltip(el);
                 });
             }
+            else {
+                return;
+            }
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.setExternalPopperProps({
+                strategy: "fixed",
+            });
         };
         this.fixCellTooltips = () => {
-            const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
-            elements.forEach((element) => {
+            var _a, _b, _c, _d;
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".data-type-element")) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
                 const slotElements = 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) => {
+            (_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);
@@ -759,7 +776,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             });
         };
         this.handleClick = (event, callback) => callback(event);
-        this.renderTableBody = (data, loading, overlay) => {
+        this.renderTableBody = (loading, data, overlay) => {
             if (!(data === null || data === void 0 ? void 0 : data.length))
                 return;
             if (overlay && loading) {
@@ -778,7 +795,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             return (h(Fragment, null, h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), 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) })));
+                }, description: (loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.description) || "Loading table data", label: (loadingOptions === null || loadingOptions === void 0 ? void 0 : 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;
@@ -792,7 +809,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 return "";
             }
         };
-        this.renderEmptyState = (data, loading, overlay) => {
+        this.renderEmptyState = (loading, data, overlay) => {
             const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (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;
@@ -806,16 +823,15 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
     }
     headerTruncationChangeHandler() {
+        var _a, _b;
         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);
-                }
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("th.column-header")) === null || _b === void 0 ? void 0 : _b.forEach((header) => {
+                var _a;
+                (_a = header
+                    .querySelector(this.IC_TOOLTIP_STRING)) === null || _a === void 0 ? void 0 : _a.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
             });
         }
     }
@@ -835,14 +851,17 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.previousItemsPerPage = this.rowsPerPage;
     }
     componentDidLoad() {
-        const tableElement = this.el.shadowRoot.querySelector("table");
-        const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        var _a, _b;
+        const tableElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("table");
+        const tableContainer = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".table-container");
         checkResizeObserver(this.runHeaderResizeObserver);
         if (this.dataUpdated) {
             this.dataUpdated = false;
         }
-        if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
-            (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
+        if (tableElement &&
+            tableContainer &&
+            (tableElement.clientHeight > tableContainer.clientHeight ||
+                tableElement.clientWidth > tableContainer.clientWidth)) {
             this.scrollable = true;
         }
         if (this.loading) {
@@ -852,7 +871,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         if (this.truncationPattern) {
             this.getTypographyElements().forEach((typographyEl) => {
                 const cellContainer = this.getCellContainer(typographyEl);
-                if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                if (cellContainer &&
+                    !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
                     this.dataTruncation(typographyEl);
                 }
             });
@@ -877,19 +897,23 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         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 ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >=
-                        (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
+                    if (truncWrapper &&
+                        cellContainer &&
+                        cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
+                            truncWrapper.scrollHeight) {
                         this.resetShowHideTruncation(typographyEl);
                         return;
                     }
                     setTimeout(() => {
                         // slight delay due to data rendering
-                        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                        if (cellContainer &&
+                            typographyEl.scrollHeight > cellContainer.clientHeight) {
                             this.addShowHideTruncation(cellContainer, typographyEl);
                         }
                     }, 150);
@@ -907,13 +931,15 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             if (this.truncationPattern === this.SHOW_HIDE_STRING) {
                 this.getTypographyElements().forEach((typographyEl) => {
                     const cellContainer = this.getCellContainer(typographyEl);
-                    if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                        this.createShowHideTruncation(typographyEl, cellContainer);
-                    }
-                    else {
-                        typographyEl.resetTruncation().then(() => {
-                            cellContainer.removeAttribute("style");
-                        });
+                    if (cellContainer) {
+                        if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                            this.createShowHideTruncation(typographyEl, cellContainer);
+                        }
+                        else {
+                            typographyEl.resetTruncation().then(() => {
+                                cellContainer.removeAttribute("style");
+                            });
+                        }
                     }
                 });
             }
@@ -922,49 +948,48 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         // This function recalculates the tooltip truncation when the rowHeight has been set.
         // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
         if (this.rowHeightSet) {
-            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
-            const hasAutoRowHeight = this.globalRowHeight === "auto";
             this.getTypographyElements().forEach((typographyEl) => {
-                var _a;
+                var _a, _b;
                 const cellContainer = this.getCellContainer(typographyEl);
                 const tooltipEl = this.getTooltip(typographyEl);
-                if (hasAutoRowHeight) {
-                    cellContainer.style.height = null;
-                    if (this.truncationPattern === this.TOOLTIP_STRING) {
-                        this.removeTooltip(cellContainer, typographyEl, tooltipEl);
-                        typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
+                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;
                     }
-                    else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                        this.resetShowHideTruncation(typographyEl);
+                    // 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));
                     }
-                    return;
-                }
-                const rowHeight = fontSize *
-                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                // If the set row height is bigger than the cell container even
-                // with textWrap, set the row height
-                if (!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));
-                }
-                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 = typographyEl.shadowRoot.querySelector("button");
-                        if (showHideBtn &&
-                            (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
-                            this.resetShowHideTruncation(typographyEl);
-                            return;
+                    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.truncate(typographyEl, cellContainer, tooltipEl);
-                }
-                else {
-                    this.updateSetRowHeight(typographyEl);
                 }
             });
             this.rowHeightSet = false;
@@ -972,16 +997,15 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         // Only run truncation on the new rows
         // when the number of items per page has increased
         if (this.itemsPerPageChange) {
-            const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
-            if (this.rowsPerPage > this.previousItemsPerPage) {
+            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(this.IC_TYPOGRAPHY_STRING)
-                        .forEach((typographyEl) => {
+                    row.querySelectorAll("ic-typography").forEach((typographyEl) => {
                         const cellContainer = this.getCellContainer(typographyEl);
                         const tooltipEl = this.getTooltip(typographyEl);
-                        this.truncate(typographyEl, cellContainer, tooltipEl);
+                        if (cellContainer)
+                            this.truncate(typographyEl, cellContainer, tooltipEl);
                     });
                 });
             }
@@ -995,9 +1019,11 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             // 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 = typographyEl.shadowRoot.querySelector("button");
-                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
+                    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);
                     }
@@ -1009,7 +1035,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.getTypographyElements().forEach((typographyEl) => {
                 const cellContainer = this.getCellContainer(typographyEl);
                 const tooltipEl = this.getTooltip(typographyEl);
-                this.truncate(typographyEl, cellContainer, tooltipEl);
+                if (cellContainer)
+                    this.truncate(typographyEl, cellContainer, tooltipEl);
             });
             this.densityUpdate = false;
         }
@@ -1018,7 +1045,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 this.getTypographyElements().forEach((typographyEl) => {
                     const cellContainer = this.getCellContainer(typographyEl);
                     const tooltipEl = this.getTooltip(typographyEl);
-                    if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                    if (cellContainer &&
+                        typographyEl.scrollHeight > cellContainer.clientHeight) {
                         this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
                     }
                 });
@@ -1027,29 +1055,24 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 this.getTypographyElements().forEach((typographyEl) => {
                     const truncWrapper = this.getTruncWrapper(typographyEl);
                     const cellContainer = this.getCellContainer(typographyEl);
-                    if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
-                        (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
-                        this.resetShowHideTruncation(typographyEl);
-                        return;
-                    }
-                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
-                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    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);
+                        }
                     }
                 });
             }
         }
     }
-    createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
+    createShowHideTruncation(typographyEl, cellContainer, descriptionHeight = 0) {
         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.setAttribute("max-lines", `${this.getLines(cellContainer.clientHeight - descriptionHeight)}`);
         typographyEl.setShowHideExpanded(false);
         cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
     }
@@ -1068,26 +1091,30 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     handleTypographyTruncationExpandToggle({ detail, }) {
         const { expanded, typographyEl } = detail;
         const cellContainer = this.getCellContainer(typographyEl);
-        if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
+        if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE)) &&
             expanded) {
             cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
         }
     }
     handlePageChange({ detail, target }) {
+        var _a;
         if (target.parentElement !== this.el) {
             this.fromRow = (detail.value - 1) * this.rowsPerPage;
             this.toRow = this.fromRow + this.rowsPerPage;
-            const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
-            if (this.previousRowsPerPage === this.rowsPerPage) {
-                tableRowsContainer.scrollTop = 0;
-            }
-            else if (this.previousRowsPerPage < this.rowsPerPage) {
-                tableRowsContainer.scrollTop = this.scrollOffset;
-                this.previousRowsPerPage = this.rowsPerPage;
-            }
-            else {
-                this.previousRowsPerPage = this.rowsPerPage;
+            const tableRowsContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-row-container");
+            if (tableRowsContainer) {
+                if (this.previousRowsPerPage === this.rowsPerPage) {
+                    tableRowsContainer.scrollTop = 0;
+                }
+                else if (this.previousRowsPerPage < this.rowsPerPage) {
+                    tableRowsContainer.scrollTop = this.scrollOffset;
+                    this.previousRowsPerPage = this.rowsPerPage;
+                }
+                else {
+                    this.previousRowsPerPage = this.rowsPerPage;
+                }
             }
+            this.selectedRows = [];
         }
         if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
             // This is to prevent icPageChange from triggering truncation on first load
@@ -1106,10 +1133,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     handleDensityChange(ev) {
         this.density = ev.detail.value;
     }
-    clickListener(ev) {
-        if (ev.target !== this.el)
-            this.selectedRow = undefined;
-    }
     loadingHandler(newValue) {
         if (newValue)
             this.startLoadingTimer();
@@ -1127,7 +1150,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.getTypographyElements().forEach((typographyEl) => {
                 const cellContainer = this.getCellContainer(typographyEl);
                 const tooltip = this.getTooltip(typographyEl);
-                this.truncate(typographyEl, cellContainer, tooltip);
+                if (cellContainer)
+                    this.truncate(typographyEl, cellContainer, tooltip);
             });
         }
         if (newValue === this.SHOW_HIDE_STRING) {
@@ -1137,17 +1161,20 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.getTypographyElements().forEach((typographyEl) => {
                 const truncWrapper = this.getTruncWrapper(typographyEl);
                 const cellContainer = this.getCellContainer(typographyEl);
-                if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
-                    (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
-                    this.resetShowHideTruncation(typographyEl);
-                    return;
-                }
-                setTimeout(() => {
-                    // slight delay due to data rendering
-                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
-                        this.addShowHideTruncation(cellContainer, typographyEl);
+                if (cellContainer) {
+                    if (truncWrapper &&
+                        cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
+                            truncWrapper.scrollHeight) {
+                        this.resetShowHideTruncation(typographyEl);
+                        return;
                     }
-                }, 150);
+                    setTimeout(() => {
+                        // slight delay due to data rendering
+                        if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                            this.addShowHideTruncation(cellContainer, typographyEl);
+                        }
+                    }, 150);
+                }
             });
         }
         this.truncationPatternUpdated = true;
@@ -1171,10 +1198,12 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         if (typographyEl) {
             const truncWrapper = this.getTruncWrapper(typographyEl);
             const cellContainer = this.getCellContainer(typographyEl);
-            if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+            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) !==
-                    +typographyEl.getAttribute("max-lines")) {
+                    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);
@@ -1192,7 +1221,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.getTypographyElements().forEach((typographyEl) => {
                 const cellContainer = this.getCellContainer(typographyEl);
                 typographyEl.resetTruncation().then(() => {
-                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                    if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
                         cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
                     }
                 });
@@ -1213,7 +1242,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
      */
     async resetRowHeights(rowHeight) {
         this.globalRowHeight = rowHeight || "auto";
-        this.variableRowHeight = null;
+        this.variableRowHeight = undefined;
     }
     showLoadingIndicator() {
         var _a, _b, _c;
@@ -1257,35 +1286,28 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         }
     }
     removeTooltip(cellContainer, typographyEl, tooltip) {
-        const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
-        cellTextWrapper.prepend(typographyEl);
-        if (tooltip) {
-            tooltip.remove();
-        }
+        var _a;
+        (_a = cellContainer
+            .querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(typographyEl);
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.remove();
     }
     addLineClampCSS(typographyEl, cellContainer) {
         var _a, _b;
         const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        const cellContainerHeight = cellContainer.clientHeight;
+        let totalHeight = cellContainerHeight;
         if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
-            (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > descriptionCellHeight) {
-            let iconHeight;
-            if (deviceSizeMatches(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)}`);
+            descriptionCellHeight &&
+            cellContainerHeight > descriptionCellHeight) {
+            const iconHeight = (deviceSizeMatches(IC_DEVICE_SIZES.XS) &&
+                ((_b = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon")) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
+                0;
+            totalHeight = totalHeight - descriptionCellHeight - iconHeight;
         }
+        typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(totalHeight || 0)}`);
     }
     createTruncationTooltip(typographyEl, cellContainer) {
+        var _a;
         const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
         tooltipEl.setAttribute("target", typographyEl.id);
         tooltipEl.setAttribute("label", typographyEl.textContent);
@@ -1294,25 +1316,38 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
             strategy: "fixed",
         });
-        const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
-        cellTextWrapper.prepend(tooltipEl);
+        (_a = cellContainer
+            .querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(tooltipEl);
         tooltipEl.prepend(typographyEl);
     }
     render() {
         var _a, _b;
-        const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, theme, } = this;
-        return (h(Host, { key: '9fa1cc109610d4370a73d9e9d1dc39ad9b2e34fc', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '7af203ceb2819160686a3074b9800820ed7100a3', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '3cf4ec7bc6edaea9fe152c48b2dad4a8bdf8e347', name: "title-bar" }), h("div", { key: '6fee471259fe2cb37f1646b5e4ffd83b97d6765c', class: {
+        const { caption, columns, createColumnHeaders, createUpdatingIndicator, data, density, hideColumnHeaders, rowSelection, loading, loadingOptions, paginationBarOptions, rowsPerPage, scrollable, scrollOffset, selectAllRows, selectedRows, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, tableLayout, theme, } = this;
+        const rowsSelected = selectedRows.length > 0;
+        const allRowsSelected = selectedRows.length === (showPagination ? rowsPerPage : data === null || data === void 0 ? void 0 : data.length);
+        const headerCheckboxLabelState = rowsSelected
+            ? allRowsSelected
+                ? "deselect all"
+                : "select all remaining"
+            : "select all";
+        return (h(Host, { key: 'c70d98425c01e5f0d7b23d12a0a22fcde6bfa8aa', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'b7411965f1bd64038922da836d86791d9fce0766', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: 'de14d3c9613fc5f216f9318c8b584a4fe6d7d0b9', name: "title-bar" }), h("div", { key: 'c28d8074bb81266c7104ce842b2ea0e415ea7576', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", { key: 'e054307fa0e64ba9ee446315db0ab693af13f076', style: {
-                ["--table-layout"]: this.tableLayout,
-            } }, h("caption", { key: '79a44a034f1718e9a4bca422ec67cba2cf168530', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '0275b1bbf9983e1cdda744148ffe2e404dfc343f', class: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '283aac0915752eb13c7651fe2594cbbce7eb1164', style: {
+                "--table-layout": tableLayout,
+            } }, h("caption", { key: '9d49941bb4a1f14337af61c35057895a32466c0e', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '970d0ecda5d04b06b394f0f1cf1e58dfdd93660f', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: '3be8c99629bef5f9be93a907dacd9c3609ae9167' }, createColumnHeaders()))), updating &&
+            } }, h("tr", { key: 'dd2b7e0e731a8652d726b98c4d4b53de1d4bc89a' }, rowSelection && data && (h("th", { key: 'd1c97faa5830737aa4c9d7020b7bf89a2357d127', class: {
+                "column-header": true,
+                "checkbox-cell": true,
+                "updating-state-headers": updating && !loading,
+                [`table-density-${density}`]: this.notDefaultDensity(),
+            } }, h("div", { key: '93aad327435bc6bc944fc3c7e141c0281beb421b', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '9f984d73bf5172d756d1553c631a571adad238f6', 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(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), h("div", { key: 'f39b60c55de7d1769a84429d203ba67d4db7b391', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '243db49f9f520eb7cc784574e8cd8e55a317069b', 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: 'c67e73ce64617844507147a3a5abb5c54990918e', 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}`
+            (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: '3b3d4811530dabad832180f06631b32724b7c3c8', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '4efe794f7f5e48ff1ad762780b5a8e3f291cb8f0', 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: '2eadf2de56bcbccfdb70707846a5eaa920cba050', 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")))));
     }
     get el() { return this; }
@@ -1336,7 +1371,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "embedded": [4],
         "globalRowHeight": [1032, "global-row-height"],
         "height": [1],
-        "highlightSelectedRow": [4, "highlight-selected-row"],
         "hideColumnHeaders": [4, "hide-column-headers"],
         "loading": [1028],
         "loadingOptions": [16],
@@ -1344,6 +1378,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "minWidth": [1, "min-width"],
         "minimumLoadingDisplayDuration": [2, "minimum-loading-display-duration"],
         "paginationBarOptions": [16],
+        "rowSelection": [4, "row-selection"],
         "showPagination": [4, "show-pagination"],
         "sortable": [4],
         "sortOptions": [16],
@@ -1361,14 +1396,14 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "rowsPerPage": [32],
         "scrollable": [32],
         "scrollOffset": [32],
-        "selectedRow": [32],
+        "selectedRows": [32],
         "sortedColumn": [32],
         "sortedColumnOrder": [32],
         "toRow": [32],
         "currentRowHeight": [32],
         "debounceDelay": [32],
         "resetRowHeights": [64]
-    }, [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]], {
+    }, [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"]], {
         "columnHeaderTruncation": ["headerTruncationChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
@@ -1381,7 +1416,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-data-table", "ic-button", "ic-empty-state", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
+    const components = ["ic-data-table", "ic-button", "ic-checkbox", "ic-empty-state", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-data-table":
             if (!customElements.get(tagName)) {
@@ -1389,6 +1424,11 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "ic-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }