@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

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

@@ -1,15 +1,223 @@
-import { h } from "@stencil/core";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { h, Fragment, Host, } from "@stencil/core";
 import unsortedIcon from "./assets/unsorted-icon.svg";
 import ascendingIcon from "./assets/ascending-icon.svg";
 import descendingIcon from "./assets/descending-icon.svg";
+// Unable to import helper functions via @ukic/web-components
+import { isEmptyString, isSlotUsed, pxToRem, addDataToPosition, dynamicDebounce, getSlotElements, checkResizeObserver, deviceSizeMatches, } from "../../utils/helpers";
+import { IC_DEVICE_SIZES } from "../../utils/constants";
+/**
+ * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
+ * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
+ * @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.
+ * @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.
+ * @slot pagination-bar - A custom ic-pagination-bar can be slotted below the data to provide enhanced control over how the data is interacted with when being fetched externally.
+ */
 export class DataTable {
     constructor() {
+        this.DENSITY_HEIGHT_MULTIPLIER = {
+            dense: 0.8,
+            default: 1,
+            spacious: 1.2,
+        };
+        this.DENSITY_PADDING_HEIGHT_DIFF = {
+            dense: 8,
+            default: 16,
+            spacious: 20,
+        };
         this.SORT_ICONS = {
             unsorted: unsortedIcon,
             ascending: ascendingIcon,
             descending: descendingIcon,
         };
-        this.isObject = (value) => typeof value === "object";
+        this.hasLoadedForOneSecond = true;
+        this.resizeObserver = null;
+        this.SHOW_HIDE_STRING = "show-hide";
+        this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
+        this.TOOLTIP_STRING = "tooltip";
+        this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
+        this.TEXT_WRAP_STRING = "text-wrap";
+        this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
+        this.dataUpdated = false;
+        this.rowHeightSet = false;
+        this.initialLoad = false;
+        this.icPageChangeEvent = false;
+        this.itemsPerPageChange = false;
+        this.DATA_ROW_HEIGHT_STRING = "data-row-height";
+        this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
+        this.LINE_CLAMP_CSS_VARIABLE = "--ic-line-clamp";
+        this.DEFAULT_LINE_HEIGHT = 24;
+        this.densityUpdate = false;
+        this.truncationPatternUpdated = false;
+        this.isNewDebounceDelaySet = false;
+        this.headerResizeObserver = null;
+        this.IC_TOOLTIP_STRING = "ic-tooltip";
+        this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
+        this.CELL_DESCRIPTION_STRING = ".cell-description";
+        this.CELL_CONTAINER_WITH_DESCRIPTION_STRING = "cell-container-with-description";
+        this.CELL_TEXT_WRAPPER_STRING = ".cell-text-wrapper";
+        this.IC_TYPOGRAPHY_STRING = "ic-typography";
+        this.runHeaderResizeObserver = () => {
+            this.headerResizeObserver = new ResizeObserver(() => {
+                this.headerResizeCallback();
+            });
+            this.headerResizeObserver.observe(this.el);
+        };
+        this.headerResizeCallback = () => {
+            if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
+                const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
+                if (tableContainerWidth !== this.prevTableContainerWidth) {
+                    const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+                    headers.forEach((header) => {
+                        const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                        const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
+                        if (tooltip && typographyEls && typographyEls.length === 2) {
+                            tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
+                                tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            }
+                        }
+                    });
+                    this.prevTableContainerWidth = tableContainerWidth;
+                }
+            }
+        };
+        this.updateSetRowHeight = (typographyEl) => {
+            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (typographyEl) {
+                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);
+                }
+            }
+            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);
+                    }
+                });
+            }
+        };
+        this.debounceDataTruncation = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.resizeObserver = new ResizeObserver(
+                    // This gets triggered twice due to updated data and see more/see less button
+                    dynamicDebounce(() => {
+                        this.dataTruncation(typographyEl);
+                        if (!this.isNewDebounceDelaySet) {
+                            this.setNewDebounceDelay(200);
+                        }
+                    }, () => this.debounceDelay));
+                    this.resizeObserver.observe(typographyEl);
+                }
+            });
+        };
+        this.setNewDebounceDelay = (delay) => {
+            this.debounceDelay = delay;
+            this.isNewDebounceDelaySet = true;
+        };
+        this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
+        this.truncate = (typographyEl, cellContainer, tooltip) => {
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                //24 is the height of a single line
+                if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                    if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
+                    }
+                    if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                }
+            }
+            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);
+                    tooltip.remove();
+                }
+                if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                    !isEmptyString(typographyEl.getAttribute("max-lines"))) {
+                    this.resetShowHideTruncation(typographyEl);
+                }
+            }
+        };
+        this.dataTruncation = (typographyEl) => {
+            // 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")) ||
+                this.dataUpdated) {
+                return;
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                typographyEl.shadowRoot.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")) {
+                        this.resetShowHideTruncation(typographyEl);
+                    }
+                }
+            }
+            // Deals with setting and resetting row height and re-truncating data
+            if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                // cellContainer.clientHeight - 24 removes the extra line by see more/see less
+                if (truncWrapper &&
+                    cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
+                        truncWrapper.scrollHeight) {
+                    this.resetShowHideTruncation(typographyEl);
+                    return;
+                }
+                if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                    this.addShowHideTruncation(cellContainer, typographyEl);
+                    return;
+                }
+            }
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
+                (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
+                (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                if (tooltip) {
+                    this.removeTooltip(cellContainer, typographyEl, tooltip);
+                }
+                return;
+            }
+            this.truncate(typographyEl, cellContainer, tooltip);
+        };
+        this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
+        this.removeTextWrap = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const tableCell = typographyEl.closest("td");
+                if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
+                    tableCell.classList.remove(this.TEXT_WRAP_STRING);
+                }
+            });
+        };
+        this.getCellContainer = (typographyEl) => {
+            return typographyEl.closest(".cell-container");
+        };
+        this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
+            array.forEach((val) => val.textWrap && delete val.textWrap);
+        this.startLoadingTimer = () => {
+            this.hasLoadedForOneSecond = false;
+            this.timerStarted = Date.now();
+            setTimeout(() => {
+                this.hasLoadedForOneSecond = true;
+                this.timerStarted = null;
+            }, this.minimumLoadingDisplayDuration);
+        };
+        this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
         this.notDefaultDensity = () => this.density !== "default";
         this.getCellContent = (cell, dataType) => {
             switch (dataType) {
@@ -26,9 +234,103 @@ export class DataTable {
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
-        this.createCells = (row) => {
+        this.getCellOptions = (cell, key) => {
+            if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
+                return;
+            return this.getObjectValue(cell, key);
+        };
+        this.createUpdatingIndicator = () => {
+            const { appearance, description, max, min, progress } = this.updatingOptions || {};
+            return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { appearance: appearance, 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.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 === "object" && !!Object.keys(columnWidth)) {
+                    if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth) {
+                        columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
+                    }
+                    if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
+                        columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
+                    }
+                }
+            }
+            return columnWidthStyling;
+        };
+        this.getRowHeight = (currentRowHeight, columnProps, rowTextWrap, cell) => {
+            if ((this.truncationPattern || currentRowHeight) &&
+                !(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
+                !rowTextWrap &&
+                !this.getCellOptions(cell, "textWrap") &&
+                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element") {
+                return {
+                    [this.ROW_HEIGHT_CSS_VARIABLE]: this.setRowHeight(currentRowHeight),
+                };
+            }
+            return {};
+        };
+        this.adjustWidthForActionElement = () => {
+            const elements = this.el.shadowRoot.querySelectorAll(".action-element");
+            elements.forEach((element) => {
+                const width = element.firstChild.getBoundingClientRect()
+                    .width;
+                const gridWrapper = element.closest(".cell-grid-wrapper");
+                gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
+            });
+        };
+        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            return (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) ||
+                        ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
+                        rowAlignment ||
+                        this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                        !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                        !!rowAlignment ||
+                        !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
+                        ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
+                        this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
+                        !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
+                        !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
+                        (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
+                        !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
+                    ? this.setRowHeight(currentRowHeight)
+                    : null }, 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" &&
+                !isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
+                    "cell-text-wrapper": true,
+                    "cell-text-no-wrap": !this.truncationPattern,
+                } }, h("ic-typography", { variant: "body", class: {
+                    [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                        rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                        !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                        !!rowEmphasis,
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))), this.isObject(cell) &&
+                Object.keys(cell).includes("description") && (h("div", { class: {
+                    ["cell-description"]: true,
+                    [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
+                } }, ((_o = cellValue("description")) === null || _o === void 0 ? void 0 : _o.icon) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_q = (_p = cellValue("description")) === null || _p === void 0 ? void 0 : _p.data) !== null && _q !== void 0 ? _q : cellValue("description"))))))))));
+        };
+        this.createCells = (row, rowIndex) => {
+            var _a;
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
+            const rowOptions = this.getRowOptions(rowKeys, rowValues);
             let rowAlignment;
             let rowEmphasis;
             const headerIndex = rowKeys.indexOf("header");
@@ -36,70 +338,110 @@ export class DataTable {
                 rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
+            const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
+            const currentRowHeight = variableRowHeightVal
+                ? variableRowHeightVal !== "auto" && variableRowHeightVal
+                : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return rowValues.map((cell, index) => {
-                const { columnAlignment, dataType, emphasis } = this.columns[index];
+                const columnProps = this.columns[index];
+                const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
+                const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
                 const cellValue = (key) => this.getObjectValue(cell, key);
-                return rowKeys[index] === "header" ? (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
-                        ["row-header"]: true,
-                        [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
-                        ["row-header-sticky"]: this.stickyRowHeaders,
-                    } }, cellValue("title"))) : (h("td", { innerHTML: dataType === "element" ? cell : null, class: {
-                        ["table-cell"]: true,
-                        [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        [`data-type-${dataType}`]: true,
-                        [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
-                            this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
-                            !!this.getCellAlignment(cell, "horizontal"),
-                        [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
-                            rowAlignment ||
-                            this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
-                            !!rowAlignment ||
-                            !!this.getCellAlignment(cell, "vertical"),
-                    } }, h("ic-typography", { variant: "body", class: {
-                        [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                            emphasis ||
-                            rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                            !!emphasis ||
-                            !!rowEmphasis,
-                        [`text-${this.density}`]: this.notDefaultDensity(),
-                    } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
+                if (rowKeys[index] === "header") {
+                    return (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
+                            ["row-header"]: true,
+                            [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
+                            ["row-header-sticky"]: this.stickyRowHeaders,
+                        } }, cellValue("title")));
+                }
+                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"),
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick: cell.actionOnClick
+                            ? (event) => this.handleClick(event, cell.actionOnClick)
+                            : undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
+                }
             });
         };
-        this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
-                    ["column-header"]: true,
-                    [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
-                    [`table-density-${this.density}`]: this.notDefaultDensity(),
-                }, colSpan: colspan }, this.sortable ? (h("div", { class: "column-header-inner-container" }, h("ic-typography", { variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title), h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
-                    ? this.sortedColumnOrder
-                    : "unsorted"], class: {
-                    ["sort-button"]: true,
-                    ["sort-button-unsorted"]: this.sortedColumn !== key ||
-                        this.sortedColumnOrder === "unsorted",
-                } }))) : (h("ic-typography", { variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title)))));
+        this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, }, index) => (h("th", { scope: "col", class: {
+                ["column-header"]: true,
+                [`table-density-${this.density}`]: this.notDefaultDensity(),
+                ["updating-state-headers"]: this.updating && !this.loading,
+            }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
+                "column-header-inner-container": true,
+                "truncation-tooltip": this.columnHeaderTruncation,
+                [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+            } }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
+            !icon.hideOnHeader && (h("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (h("ic-tooltip", { label: title, target: `column-header-${index}` }, h("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title))) : (h("ic-typography", { variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)), this.sortable && !excludeColumnFromSort && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
+                ? this.sortedColumnOrder
+                : "unsorted"], class: {
+                ["sort-button"]: true,
+                ["sort-button-unsorted"]: this.sortedColumn !== key ||
+                    this.sortedColumnOrder === "unsorted",
+            } }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
+                ["column-header-text"]: true,
+                ["dummy-column-header-text"]: this.columnHeaderTruncation,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)))));
+        this.onRowClick = (row) => {
+            if (!this.loading && !this.updating) {
+                this.icSelectedRowChange.emit(this.selectedRow !== row ? row : null);
+            }
+            this.selectedRow =
+                this.selectedRow !== row && !this.loading && !this.updating && row;
         };
         this.createRows = () => {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
                 : this.data.slice();
-            return data
-                .sort(!this.sortable ? undefined : this.getSortFunction())
-                .map((row) => (h("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
-                    ["table-row"]: true,
-                    ["table-row-selected"]: this.selectedRow === row,
-                } }, this.createCells(row))));
-        };
-        this.getObjectValue = (cell, key) => {
-            return Object.values(cell)[Object.keys(cell).indexOf(key)];
+            const paginationOffset = this.showPagination ? this.fromRow : 0;
+            /**
+             * Ensures that createCells has a value in data to map over to actually render the slot.
+             * Removes the need for the user to add it multiple times.
+             * `addDataToPosition` used to add the element in the correct column order.
+             * Adding empty string value in to give `createCells` something to loop over.
+             */
+            const organisedData = data.map((row, rowIndex) => {
+                const slottedColumns = this.columns
+                    .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
+                    key,
+                    index,
+                })
+                    .filter((col) => !!col &&
+                    // skip the column if its already in the row
+                    !Object.prototype.hasOwnProperty.call(row, col.key));
+                return slottedColumns.length > 0
+                    ? addDataToPosition(row, slottedColumns, "")
+                    : row;
+            });
+            return organisedData
+                .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.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
         this.getSortButtonLabel = (key) => {
             let label = "";
             const getNextSortOption = (option) => {
@@ -155,10 +497,174 @@ export class DataTable {
             }
             this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
             sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
+            this.tableSorted = true;
+            this.icSortChange.emit({
+                columnName: column,
+                sorted: this.sortedColumnOrder,
+            });
+        };
+        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);
+        };
+        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;
+                }
+                this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
+            });
         };
         this.updateScrollOffset = () => {
             this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
         };
+        this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
+            cellContainer.setAttribute("data-row-height", rowHeight.toString());
+            cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
+        };
+        // Method to update the row heights on cells with descriptions and tooltip truncation
+        this.updateCellHeightsWithDescriptions = () => {
+            const descriptions = this.el.shadowRoot.querySelectorAll(this.CELL_DESCRIPTION_STRING);
+            descriptions.forEach((description) => {
+                const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
+                const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
+                const descriptionMarginTop = window
+                    .getComputedStyle(description)
+                    .getPropertyValue("margin-top");
+                const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
+                if (this.globalRowHeight && this.globalRowHeight !== "auto") {
+                    if (!typography.textContent &&
+                        descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
+                        this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
+                    }
+                    else if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
+                            this.globalRowHeight) {
+                            const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
+                            if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
+                                // recalculate descriptionHeight as when a word break occurs this value changes
+                                // Additional spacing given for 300-400% zoom
+                                this.updateRowHeightForDescriptions(descriptionHeight +
+                                    this.DEFAULT_LINE_HEIGHT +
+                                    cellIcon.clientHeight, cellContainer);
+                            }
+                            else {
+                                this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
+                            }
+                        }
+                        this.addLineClampCSS(typography, cellContainer);
+                        // Additional case for show/hide truncation for when a description is present, but the text
+                        // isn't overflowing the cell to trigger the show more button to appear.
+                    }
+                    else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                        descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight &&
+                        typography.style.getPropertyValue("--truncation-max-lines") !==
+                            "initial") {
+                        this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
+                        if (descriptionHeight) {
+                            this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
+                        }
+                    }
+                }
+            });
+        };
+        this.setTableDimensions = () => {
+            let tableHostDimensions = {};
+            if (this.width) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-width"]: this.width });
+            }
+            if (this.height) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-height"]: this.height });
+            }
+            if (this.maxWidth) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-max-width"]: this.maxWidth });
+            }
+            if (this.minWidth) {
+                tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-min-width"]: this.minWidth });
+            }
+            return tableHostDimensions;
+        };
+        this.fixCellTooltip = (element) => {
+            var _a;
+            const tooltipEl = (element.tagName === "IC-TOOLTIP"
+                ? element
+                : (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING));
+            if (tooltipEl) {
+                tooltipEl.setExternalPopperProps({
+                    strategy: "fixed",
+                });
+            }
+        };
+        this.fixCellTooltips = () => {
+            const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
+            elements.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) => {
+                const actionElement = actionElementSpan.firstChild;
+                if (actionElement) {
+                    this.fixCellTooltip(actionElement);
+                }
+            });
+        };
+        this.handleClick = (event, callback) => callback(event);
+        this.renderTableBody = (data, loading, overlay) => {
+            if (!(data === null || data === void 0 ? void 0 : data.length))
+                return;
+            if (overlay && loading) {
+                return h("tbody", null, this.createRows());
+            }
+            else if (loading && !overlay) {
+                return null;
+            }
+            else {
+                return h("tbody", null, this.createRows());
+            }
+        };
+        this.renderLoadingIndicator = (isLoading, loadingOptions) => {
+            if (!isLoading)
+                return null;
+            return (h(Fragment, null, h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
+                    "loading-empty": isLoading,
+                    loading: true,
+                    "show-background": loadingOptions.showBackground || loadingOptions.overlay,
+                }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })));
+        };
+        this.renderAriaLiveLoading = () => {
+            var _a, _b;
+            if (this.loading) {
+                return ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.label) || "Loading...";
+            }
+            else if (this.updating) {
+                return ((_b = this.updatingOptions) === null || _b === void 0 ? void 0 : _b.description) || "Updating table data";
+            }
+            else {
+                return "";
+            }
+        };
+        this.renderEmptyState = (data, loading, overlay) => {
+            const emptyStateEl = 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;
+            }
+            else if (!loading && !(data === null || data === void 0 ? void 0 : data.length)) {
+                return emptyStateEl;
+            }
+            else {
+                return null;
+            }
+        };
         this.fromRow = 0;
         this.previousRowsPerPage = undefined;
         this.rowsPerPage = undefined;
@@ -168,23 +674,42 @@ export class DataTable {
         this.sortedColumn = undefined;
         this.sortedColumnOrder = undefined;
         this.toRow = undefined;
+        this.currentRowHeight = undefined;
+        this.debounceDelay = 0;
         this.caption = undefined;
+        this.columnHeaderTruncation = false;
         this.columns = undefined;
         this.data = undefined;
+        this.disableAutoSort = false;
         this.density = "default";
         this.embedded = false;
+        this.globalRowHeight = "auto";
+        this.height = undefined;
+        this.highlightSelectedRow = true;
         this.hideColumnHeaders = false;
-        this.paginationOptions = {
-            itemsPerPage: [
+        this.loading = false;
+        this.loadingOptions = undefined;
+        this.maxWidth = undefined;
+        this.minWidth = undefined;
+        this.minimumLoadingDisplayDuration = 1000;
+        this.paginationBarOptions = {
+            alignment: "right",
+            appearance: "default",
+            hideAllFromItemsPerPage: false,
+            hideRangeLabel: false,
+            itemLabel: "Item",
+            itemsPerPageOptions: [
                 { label: "10", value: "10" },
                 { label: "25", value: "25" },
                 { label: "50", value: "50" },
             ],
-            type: "page",
-            control: "simple",
-            itemsPerPageControl: true,
-            goToPageControl: true,
-            alignment: "right",
+            pageLabel: "Page",
+            rangeLabelType: "page",
+            selectedItemsPerPage: 10,
+            setToFirstPageOnPaginationChange: false,
+            showGoToPageControl: true,
+            showItemsPerPageControl: true,
+            type: "simple",
         };
         this.showPagination = false;
         this.sortable = false;
@@ -194,56 +719,524 @@ export class DataTable {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.tableLayout = "fixed";
+        this.truncationPattern = undefined;
+        this.updating = false;
+        this.updatingOptions = undefined;
+        this.variableRowHeight = undefined;
+        this.width = undefined;
+    }
+    headerTruncationChangeHandler() {
+        if (this.columnHeaderTruncation) {
+            this.prevTableContainerWidth = 0;
+        }
+        else {
+            const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+            headers.forEach((header) => {
+                const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                if (tooltip) {
+                    tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                }
+            });
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     componentWillLoad() {
-        this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
+        var _a, _b;
+        this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
         this.previousRowsPerPage = this.rowsPerPage;
         this.toRow = this.rowsPerPage;
         this.sortedColumn = this.sortOptions.defaultColumn;
         this.sortedColumnOrder = this.sortOptions.sortOrders[0];
+        this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 || !!((_b = this.loadingOptions) === null || _b === void 0 ? void 0 : _b.overlay) });
+        this.initialLoad = true;
+        this.previousItemsPerPage = this.rowsPerPage;
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.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)) {
             this.scrollable = true;
         }
+        if (this.loading) {
+            this.startLoadingTimer();
+            this.showLoadingIndicator();
+        }
+        if (this.truncationPattern) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.dataTruncation(typographyEl);
+                }
+            });
+            this.debounceDataTruncation();
+        }
+        if (this.globalRowHeight !== "auto") {
+            this.updateSetRowHeight();
+        }
+        window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
     }
-    handleItemsPerPageChange(ev) {
-        this.previousRowsPerPage = this.rowsPerPage;
-        this.rowsPerPage = ev.detail.value;
+    componentDidUpdate() {
+        // truncation updates invoked here once new/updated data has
+        // rendered to take into account updated .cell-container/ic-typography box model updates.
+        if (this.truncationPattern === this.SHOW_HIDE_STRING ||
+            this.truncationPattern === this.TOOLTIP_STRING) {
+            this.truncateUpdatedData();
+        }
     }
-    handlePageChange(ev) {
-        this.fromRow = (ev.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;
+    componentDidRender() {
+        this.fixCellTooltips();
+        this.updateCellHeightsWithDescriptions();
+        this.adjustWidthForActionElement();
+    }
+    truncateUpdatedData() {
+        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)) {
+                        this.resetShowHideTruncation(typographyEl);
+                        return;
+                    }
+                    setTimeout(() => {
+                        // slight delay due to data rendering
+                        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                            this.addShowHideTruncation(cellContainer, typographyEl);
+                        }
+                    }, 150);
+                });
+            }
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.dataUpdated = false;
         }
-        else if (this.previousRowsPerPage < this.rowsPerPage) {
-            tableRowsContainer.scrollTop = this.scrollOffset;
-            this.previousRowsPerPage = this.rowsPerPage;
+        if (this.tableSorted) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                        this.createShowHideTruncation(typographyEl, cellContainer);
+                    }
+                    else {
+                        typographyEl.resetTruncation().then(() => {
+                            cellContainer.removeAttribute("style");
+                        });
+                    }
+                });
+            }
+            this.tableSorted = false;
+        }
+        // This function recalculates the tooltip truncation when the rowHeight has been set.
+        // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
+        if (this.rowHeightSet) {
+            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            const hasAutoRowHeight = this.globalRowHeight === "auto";
+            this.getTypographyElements().forEach((typographyEl) => {
+                var _a;
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                if (hasAutoRowHeight) {
+                    cellContainer.style.height = null;
+                    if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        this.removeTooltip(cellContainer, typographyEl, tooltipEl);
+                        typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
+                    }
+                    else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        this.resetShowHideTruncation(typographyEl);
+                    }
+                    return;
+                }
+                const rowHeight = fontSize *
+                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                // If the set row height is bigger than the cell container even
+                // with textWrap, set the row height
+                if (!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;
+                        }
+                    }
+                    this.truncate(typographyEl, cellContainer, tooltipEl);
+                }
+                else {
+                    this.updateSetRowHeight(typographyEl);
+                }
+            });
+            this.rowHeightSet = false;
+        }
+        // Only run truncation on the new rows
+        // when the number of items per page has increased
+        if (this.itemsPerPageChange) {
+            const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
+            if (this.rowsPerPage > this.previousItemsPerPage) {
+                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
+                newRows.forEach((row) => {
+                    row
+                        .querySelectorAll(this.IC_TYPOGRAPHY_STRING)
+                        .forEach((typographyEl) => {
+                        const cellContainer = this.getCellContainer(typographyEl);
+                        const tooltipEl = this.getTooltip(typographyEl);
+                        this.truncate(typographyEl, cellContainer, tooltipEl);
+                    });
+                });
+            }
+            this.previousItemsPerPage = this.rowsPerPage;
+            this.itemsPerPageChange = false;
+        }
+        if (!this.initialLoad && this.icPageChangeEvent) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            // set truncation to see more if opened and next/previous page is pressed
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
+                        !showHideBtn) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+            this.icPageChangeEvent = false;
+        }
+        if (this.densityUpdate) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                this.truncate(typographyEl, cellContainer, tooltipEl);
+            });
+            this.densityUpdate = false;
+        }
+        if (this.truncationPatternUpdated) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const tooltipEl = this.getTooltip(typographyEl);
+                    if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
+                    }
+                });
+            }
+            else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const truncWrapper = this.getTruncWrapper(typographyEl);
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
+                        (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
+                        this.resetShowHideTruncation(typographyEl);
+                        return;
+                    }
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+        }
+    }
+    createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
+        typographyEl.checkMaxLines(typographyEl.scrollHeight);
+        typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
+            descriptionHeight) {
+            typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
+                this.DEFAULT_LINE_HEIGHT)}`);
         }
         else {
+            typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        }
+        typographyEl.setShowHideExpanded(false);
+        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
+    }
+    addTooltipTruncation(typographyEl, cellContainer, tooltip) {
+        this.addLineClampCSS(typographyEl, cellContainer);
+        if (!tooltip) {
+            this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    addShowHideTruncation(cellContainer, typographyEl) {
+        cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
+        this.createShowHideTruncation(typographyEl, cellContainer);
+    }
+    // Set the height to initial if row height is set and the show / hide truncation
+    // is clicked
+    handleTypographyTruncationExpandToggle({ detail, }) {
+        const { expanded, typographyEl } = detail;
+        const cellContainer = this.getCellContainer(typographyEl);
+        if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
+            expanded) {
+            cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
+        }
+    }
+    handlePageChange({ detail, target }) {
+        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;
+            }
+        }
+        if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
+            // This is to prevent icPageChange from triggering truncation on first load
+            this.icPageChangeEvent = true;
+        }
+        this.previousPaginationPage = detail.value;
+        this.initialLoad = false;
+    }
+    handleItemsPerPageChange({ detail, target, }) {
+        if (target.parentElement !== this.el) {
             this.previousRowsPerPage = this.rowsPerPage;
+            this.rowsPerPage = detail.value;
         }
+        this.itemsPerPageChange = true;
+    }
+    handleDensityChange(ev) {
+        this.density = ev.detail.value;
     }
     clickListener(ev) {
         if (ev.target !== this.el)
             this.selectedRow = undefined;
     }
+    loadingHandler(newValue) {
+        if (newValue)
+            this.startLoadingTimer();
+        if (this.loading) {
+            setTimeout(() => {
+                this.showLoadingIndicator();
+            }, 500);
+        }
+    }
+    truncationPatternHandler(newValue) {
+        if (newValue === this.TOOLTIP_STRING) {
+            this.resetShowHideTruncation();
+            this.updateTruncationTooltip(true);
+            // Not using debounceDataTruncation here due to resizeObserver not being triggered
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltip = this.getTooltip(typographyEl);
+                this.truncate(typographyEl, cellContainer, tooltip);
+            });
+        }
+        if (newValue === this.SHOW_HIDE_STRING) {
+            // ResizeObserver is trigger here due to the see more/see less links being removed.
+            // The resizeObserver will also apply the tooltip where relevant
+            this.updateTruncationTooltip(true);
+            this.getTypographyElements().forEach((typographyEl) => {
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                const cellContainer = this.getCellContainer(typographyEl);
+                if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
+                    (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
+                    this.resetShowHideTruncation(typographyEl);
+                    return;
+                }
+                setTimeout(() => {
+                    // slight delay due to data rendering
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                }, 150);
+            });
+        }
+        this.truncationPatternUpdated = true;
+    }
+    async dataHandler(newData) {
+        var _a;
+        this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 || !!((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) });
+        if (this.loading) {
+            !this.hasLoadedForOneSecond
+                ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
+                    (Date.now() - this.timerStarted))
+                : (this.loading = false);
+        }
+        if (this.updating)
+            this.updating = false;
+        this.dataUpdated = true;
+    }
+    async densityHandler() {
+        this.densityUpdate = true;
+    }
+    resetShowHideTruncation(typographyEl) {
+        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) &&
+                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
+                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
+                    +typographyEl.getAttribute("max-lines")) {
+                typographyEl.checkMaxLines(truncWrapper.scrollHeight);
+                typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+                typographyEl.setShowHideExpanded(false);
+                cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
+            }
+            else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
+                typographyEl.resetTruncation().then(() => {
+                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
+                });
+            }
+        }
+        else {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                typographyEl.resetTruncation().then(() => {
+                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
+                });
+            });
+        }
+    }
+    rowHeightChangeHandler(newValue, oldValue) {
+        if (+newValue !== +oldValue) {
+            this.deleteTextWrapDataKey(this.data);
+            this.deleteTextWrapDataKey(this.columns);
+            this.removeTextWrap();
+            this.icRowHeightChange.emit();
+            this.rowHeightSet = true;
+        }
+    }
+    /**
+     * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
+     */
+    async resetRowHeights(rowHeight) {
+        this.globalRowHeight = rowHeight || "auto";
+        this.variableRowHeight = null;
+    }
+    showLoadingIndicator() {
+        var _a, _b, _c;
+        if ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) {
+            (_b = this.loadingOverlay) === null || _b === void 0 ? void 0 : _b.classList.add("show");
+        }
+        (_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
+    }
+    getRowOptions(rowKeys, rowValues) {
+        const rowOptionsIndex = rowKeys.indexOf("rowOptions");
+        return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
+    }
+    regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
+        // When sorting the table, instead of regenerating the tooltip,
+        // the tooltip details are updated
+        if (tooltip) {
+            if (this.tableSorted) {
+                tooltip.setAttribute("target", typographyEl.id);
+                tooltip.setAttribute("label", typographyEl.textContent);
+            }
+            else {
+                this.removeTooltip(cellContainer, typographyEl, tooltip);
+            }
+            if (removeTooltipOnly) {
+                return;
+            }
+        }
+        // This add line clamp to data only when
+        // the data object has been updated
+        if (!typographyEl.getAttribute("style") && this.dataUpdated) {
+            this.addLineClampCSS(typographyEl, cellContainer);
+        }
+        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+            this.truncationPattern === this.TOOLTIP_STRING) {
+            if (!typographyEl.getAttribute("style") ||
+                typographyEl.style.cssText.includes(`${this.LINE_CLAMP_CSS_VARIABLE}: 0;`)) {
+                this.addLineClampCSS(typographyEl, cellContainer);
+            }
+            if (!cellContainer.querySelector(this.IC_TOOLTIP_STRING))
+                this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    removeTooltip(cellContainer, typographyEl, tooltip) {
+        const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
+        cellTextWrapper.prepend(typographyEl);
+        if (tooltip) {
+            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;
+        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)}`);
+        }
+    }
+    createTruncationTooltip(typographyEl, cellContainer) {
+        const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
+        tooltipEl.setAttribute("target", typographyEl.id);
+        tooltipEl.setAttribute("label", typographyEl.textContent);
+        tooltipEl.classList.add("ic-tooltip-overflow");
+        tooltipEl.setExternalPopperProps({
+            // 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);
+        tooltipEl.prepend(typographyEl);
+    }
     render() {
-        const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
-        return (h("div", { class: "table-container" }, h("div", { class: {
+        var _a, _b;
+        const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, } = this;
+        return (h(Host, { style: Object.assign({}, this.setTableDimensions()) }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
+            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("table", { style: {
+                ["--table-layout"]: this.tableLayout,
+            } }, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", null, createColumnHeaders()))), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows()))), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, paginationType: paginationOptions.type, paginationControl: paginationOptions.control, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
-            ? `${sortedColumn} sorted ${sortedColumnOrder}`
-            : "table unsorted"))));
+            } }, h("tr", null, createColumnHeaders()))), updating &&
+            !loading &&
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), h("div", { "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            ? `${((_b = this.columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) || sortedColumn} sorted ${sortedColumnOrder}`
+            : "table unsorted")))));
     }
     static get is() { return "ic-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -276,6 +1269,24 @@ export class DataTable {
                 "attribute": "caption",
                 "reflect": false
             },
+            "columnHeaderTruncation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the column header should be truncated and display a tooltip. Default is `false`."
+                },
+                "attribute": "column-header-truncation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "columns": {
                 "type": "unknown",
                 "mutable": false,
@@ -301,28 +1312,13 @@ export class DataTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ [key: string]: any }[]",
-                    "resolved": "{ [key: string]: any; }[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The row content for the table."
-                }
-            },
-            "density": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcDataTableDensityOptions",
-                    "resolved": "\"default\" | \"dense\" | \"spacious\"",
+                    "original": "IcDataTableDataType[]",
+                    "resolved": "IcDataTableDataType[]",
                     "references": {
-                        "IcDataTableDensityOptions": {
+                        "IcDataTableDataType": {
                             "location": "import",
                             "path": "./ic-data-table.types",
-                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDataType"
                         }
                     }
                 },
@@ -330,7 +1326,46 @@ export class DataTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the density of the table including font and padding."
+                    "text": "The row content for the table."
+                }
+            },
+            "disableAutoSort": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source."
+                },
+                "attribute": "disable-auto-sort",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "density": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcDataTableDensityOptions",
+                    "resolved": "\"default\" | \"dense\" | \"spacious\"",
+                    "references": {
+                        "IcDataTableDensityOptions": {
+                            "location": "import",
+                            "path": "./ic-data-table.types",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the density of the table including font and padding."
                 },
                 "attribute": "density",
                 "reflect": false,
@@ -354,6 +1389,65 @@ export class DataTable {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "globalRowHeight": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcDataTableRowHeights",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "IcDataTableRowHeights": {
+                            "location": "import",
+                            "path": "./ic-data-table.types",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableRowHeights"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method."
+                },
+                "attribute": "global-row-height",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "highlightSelectedRow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the selected row is highlighted using a background colour."
+                },
+                "attribute": "highlight-selected-row",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "hideColumnHeaders": {
                 "type": "boolean",
                 "mutable": false,
@@ -372,27 +1466,108 @@ export class DataTable {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "paginationOptions": {
+            "loading": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to `true`, the full table will show a loading state, featuring a radial indicator."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loadingOptions": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\n    itemsPerPage?: { label: string; value: string }[];\n    type?: IcPaginationTypes;\n    control?: IcPaginationControlTypes;\n    itemsPerPageControl?: boolean;\n    goToPageControl?: boolean;\n    alignment?: IcPaginationAlignmentOptions;\n  }",
-                    "resolved": "{ itemsPerPage?: { label: string; value: string; }[]; type?: IcPaginationTypes; control?: IcPaginationControlTypes; itemsPerPageControl?: boolean; goToPageControl?: boolean; alignment?: IcPaginationAlignmentOptions; }",
+                    "original": "{\n    appearance?: IcThemeForegroundNoDefault;\n    description?: string;\n    label?: string;\n    labelDuration?: number;\n    max?: number;\n    min?: number;\n    progress?: number;\n    showBackground?: boolean;\n    overlay?: boolean;\n  }",
+                    "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; overlay?: boolean; }",
                     "references": {
-                        "IcPaginationTypes": {
-                            "location": "import",
-                            "path": "../ic-pagination/ic-pagination.types",
-                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
-                        },
-                        "IcPaginationControlTypes": {
+                        "IcThemeForegroundNoDefault": {
                             "location": "import",
-                            "path": "../ic-pagination/ic-pagination.types",
-                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
-                        },
-                        "IcPaginationAlignmentOptions": {
+                            "path": "@ukic/web-components/dist/types/utils/types",
+                            "id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the props for the circular loading indicator used in the loading state."
+                }
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`."
+                },
+                "attribute": "max-width",
+                "reflect": false
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`."
+                },
+                "attribute": "min-width",
+                "reflect": false
+            },
+            "minimumLoadingDisplayDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component."
+                },
+                "attribute": "minimum-loading-display-duration",
+                "reflect": false,
+                "defaultValue": "1000"
+            },
+            "paginationBarOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationBarOptions",
+                    "resolved": "IcPaginationBarOptions",
+                    "references": {
+                        "IcPaginationBarOptions": {
                             "location": "import",
-                            "path": "../ic-pagination/ic-pagination.types",
-                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcPaginationBarOptions"
                         }
                     }
                 },
@@ -400,9 +1575,9 @@ export class DataTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the props for the pagination bar."
+                    "text": "Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored."
                 },
-                "defaultValue": "{\n    itemsPerPage: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    type: \"page\",\n    control: \"simple\",\n    itemsPerPageControl: true,\n    goToPageControl: true,\n    alignment: \"right\",\n  }"
+                "defaultValue": "{\n    alignment: \"right\",\n    appearance: \"default\",\n    hideAllFromItemsPerPage: false,\n    hideRangeLabel: false,\n    itemLabel: \"Item\",\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    pageLabel: \"Page\",\n    rangeLabelType: \"page\",\n    selectedItemsPerPage: 10,\n    setToFirstPageOnPaginationChange: false,\n    showGoToPageControl: true,\n    showItemsPerPageControl: true,\n    type: \"simple\",\n  }"
             },
             "showPagination": {
                 "type": "boolean",
@@ -497,6 +1672,124 @@ export class DataTable {
                 "attribute": "sticky-row-headers",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tableLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"fixed\" | \"auto\"",
+                    "resolved": "\"auto\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the layout of the table"
+                },
+                "attribute": "table-layout",
+                "reflect": false,
+                "defaultValue": "\"fixed\""
+            },
+            "truncationPattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDataTableTruncationTypes",
+                    "resolved": "\"show-hide\" | \"tooltip\"",
+                    "references": {
+                        "IcDataTableTruncationTypes": {
+                            "location": "import",
+                            "path": "./ic-data-table.types",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableTruncationTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography \"See more\"/\"See less\" buttons."
+                },
+                "attribute": "truncation-pattern",
+                "reflect": false
+            },
+            "updating": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the table displays a linear loading indicator below the header row to indicate an updating state."
+                },
+                "attribute": "updating",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "updatingOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    appearance?: IcThemeForegroundNoDefault;\n    description?: string;\n    max?: number;\n    min?: number;\n    progress?: number;\n  }",
+                    "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; max?: number; min?: number; progress?: number; }",
+                    "references": {
+                        "IcThemeForegroundNoDefault": {
+                            "location": "import",
+                            "path": "@ukic/web-components/dist/types/utils/types",
+                            "id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the props for the linear loading indicator used in the updating state."
+                }
+            },
+            "variableRowHeight": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "(params: {\n    [key: string]: any;\n    index: number;\n  }) => IcDataTableRowHeights | null",
+                    "resolved": "(params: { [key: string]: any; index: number; }) => IcDataTableRowHeights",
+                    "references": {
+                        "IcDataTableRowHeights": {
+                            "location": "import",
+                            "path": "./ic-data-table.types",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableRowHeights"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index.\nIf the function returns `null`, that row's height will be set to the `globalRowHeight` property."
+                }
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`."
+                },
+                "attribute": "width",
+                "reflect": false
             }
         };
     }
@@ -510,14 +1803,119 @@ export class DataTable {
             "selectedRow": {},
             "sortedColumn": {},
             "sortedColumnOrder": {},
-            "toRow": {}
+            "toRow": {},
+            "currentRowHeight": {},
+            "debounceDelay": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icRowHeightChange",
+                "name": "icRowHeightChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "icSelectedRowChange",
+                "name": "icSelectedRowChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected row changes in the data table."
+                },
+                "complexType": {
+                    "original": "object",
+                    "resolved": "object",
+                    "references": {}
+                }
+            }, {
+                "method": "icSortChange",
+                "name": "icSortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a column sort button is clicked."
+                },
+                "complexType": {
+                    "original": "IcSortEventDetail",
+                    "resolved": "IcSortEventDetail",
+                    "references": {
+                        "IcSortEventDetail": {
+                            "location": "import",
+                            "path": "./ic-data-table.types",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcSortEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resetRowHeights": {
+                "complexType": {
+                    "signature": "(rowHeight?: number | \"auto\") => Promise<void>",
+                    "parameters": [{
+                            "name": "rowHeight",
+                            "type": "number | \"auto\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.",
+                    "tags": []
+                }
+            }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columnHeaderTruncation",
+                "methodName": "headerTruncationChangeHandler"
+            }, {
+                "propName": "loading",
+                "methodName": "loadingHandler"
+            }, {
+                "propName": "truncationPattern",
+                "methodName": "truncationPatternHandler"
+            }, {
+                "propName": "data",
+                "methodName": "dataHandler"
+            }, {
+                "propName": "density",
+                "methodName": "densityHandler"
+            }, {
+                "propName": "globalRowHeight",
+                "methodName": "rowHeightChangeHandler"
+            }, {
+                "propName": "variableRowHeight",
+                "methodName": "rowHeightChangeHandler"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "icItemsPerPageChange",
-                "method": "handleItemsPerPageChange",
+                "name": "typographyTruncationExpandToggle",
+                "method": "handleTypographyTruncationExpandToggle",
                 "target": undefined,
                 "capture": false,
                 "passive": false
@@ -527,6 +1925,18 @@ export class DataTable {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "icItemsPerPageChange",
+                "method": "handleItemsPerPageChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "icTableDensityUpdate",
+                "method": "handleDensityChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
                 "method": "clickListener",