@ukic/canary-web-components 2.0.0-canary.21 → 2.0.0-canary.22

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

@@ -4,17 +4,7 @@ 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 { getSlotContent, isSlotUsed } from "../../utils/helpers";
-const DENSITY_HEIGHT_MULTIPLIER = {
-    dense: 0.8,
-    default: 1,
-    spacious: 1.2,
-};
-const SORT_ICONS = {
-    unsorted: unsortedIcon,
-    ascending: ascendingIcon,
-    descending: descendingIcon,
-};
+import { getSlotContent, isEmptyString, isSlotUsed, pxToRem, debounce, } from "../../utils/helpers";
 /**
  * @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.
@@ -24,7 +14,155 @@ const SORT_ICONS = {
  */
 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.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.DEFAULT_LINE_HEIGHT = 24;
+        this.densityUpdate = false;
+        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("height");
+                }
+            }
+            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("height");
+                    }
+                });
+            }
+        };
+        this.debounceDataTruncation = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.resizeObserver = new ResizeObserver(
+                    // This gets triggered twice due to updated data and see more/see less button
+                    debounce(() => {
+                        // console.log("resizeObserver triggered");
+                        this.dataTruncation(typographyEl);
+                    }, 200));
+                    this.resizeObserver.observe(typographyEl);
+                }
+            });
+        };
+        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", `--ic-line-clamp: 0`);
+                    cellContainer.appendChild(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.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();
@@ -50,13 +188,31 @@ export class DataTable {
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
+        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 = () => {
+            if (this.truncationPattern) {
+                return { [`truncation-${this.truncationPattern}`]: true };
+            }
+            return {};
+        };
         this.createCells = (row, rowIndex) => {
+            var _a;
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
+            const index = rowIndex;
+            const rowOptions = this.getRowOptions(rowKeys, rowValues);
             let rowAlignment;
             let rowEmphasis;
             const headerIndex = rowKeys.indexOf("header");
@@ -64,42 +220,63 @@ 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 }));
+            const currentRowHeight = variableRowHeightVal
+                ? variableRowHeightVal !== "auto" && variableRowHeightVal
+                : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return rowValues.map((cell, index) => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 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", { class: {
-                        ["table-cell"]: true,
-                        [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                        [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
-                            rowAlignment ||
-                            this.getCellAlignment(cell, "vertical")}`]: !!((_b = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
-                            !!rowAlignment ||
-                            !!this.getCellAlignment(cell, "vertical"),
-                    } }, h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
-                        !isSlotUsed(this.el, cellSlotName)
-                        ? cell
-                        : null, class: {
-                        "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element",
-                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                        [`cell-alignment-${((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
-                            this.getCellAlignment(cell, "horizontal")}`]: !!((_d = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
-                            !!this.getCellAlignment(cell, "horizontal"),
-                    } }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.onAllCells)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), 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") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.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(),
+                        } }, h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                            !isSlotUsed(this.el, cellSlotName)
+                            ? cell
+                            : null, class: Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
+                                ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
+                                rowAlignment ||
+                                this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                                !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                                !!rowAlignment ||
+                                !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
+                                ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
+                                this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
+                                !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
+                                !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
+                                (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
+                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: {
+                            height: (this.truncationPattern || currentRowHeight) &&
+                                !columnProps.textWrap &&
+                                !rowOptions.textWrap &&
+                                !this.getCellOptions(cell, "textWrap") &&
+                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element"
+                                ? this.setRowHeight(currentRowHeight)
+                                : null,
+                        }, "data-row-height": this.truncationPattern || currentRowHeight
+                            ? this.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)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
+                        !isSlotUsed(this.el, cellSlotName) && (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") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
+                }
             });
         };
         this.createColumnHeaders = () => {
@@ -116,7 +293,7 @@ export class DataTable {
                     [`text-${this.density}`]: this.notDefaultDensity(),
                 } }, title), this.sortable && (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: SORT_ICONS[this.sortedColumn === key
+                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
                     : "unsorted"], class: {
                     ["sort-button"]: true,
@@ -124,6 +301,10 @@ export class DataTable {
                         this.sortedColumnOrder === "unsorted",
                 } }))))));
         };
+        this.onRowClick = (row) => {
+            this.selectedRow =
+                this.selectedRow !== row && !this.loading && !this.updating && row;
+        };
         this.createRows = () => {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
@@ -143,24 +324,11 @@ export class DataTable {
             return data
                 .sort(!this.sortable ? undefined : this.getSortFunction())
                 .map((row, index) => {
-                var _a;
-                const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
-                const findRowHeight = variableRowHeightVal
-                    ? variableRowHeightVal !== "auto" && variableRowHeightVal
-                    : this.globalRowHeight !== "auto" && this.globalRowHeight;
                 return (h("tr", {
                     // eslint-disable-next-line react/jsx-no-bind
-                    onClick: () => (this.selectedRow =
-                        this.selectedRow !== row &&
-                            !this.loading &&
-                            !this.updating &&
-                            row), class: {
+                    onClick: () => this.onRowClick(row), class: {
                         ["table-row"]: true,
                         ["table-row-selected"]: this.selectedRow === row,
-                    }, style: {
-                        height: findRowHeight
-                            ? `${findRowHeight * DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
-                            : null,
                     }
                 }, this.createCells(row, index)));
             });
@@ -223,6 +391,25 @@ export class DataTable {
             }
             this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
             sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
+            this.tableSorted = true;
+        };
+        this.getTypographyElements = () => {
+            return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-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", `--ic-line-clamp: 0`);
+                    return;
+                }
+                this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
+            });
         };
         this.updateScrollOffset = () => {
             this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
@@ -236,12 +423,13 @@ export class DataTable {
         this.sortedColumn = undefined;
         this.sortedColumnOrder = undefined;
         this.toRow = undefined;
+        this.currentRowHeight = undefined;
         this.caption = undefined;
         this.columns = undefined;
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
-        this.globalRowHeight = 40;
+        this.globalRowHeight = "auto";
         this.hideColumnHeaders = false;
         this.loading = false;
         this.loadingOptions = undefined;
@@ -270,10 +458,15 @@ export class DataTable {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.truncationPattern = undefined;
         this.updating = false;
         this.updatingOptions = undefined;
         this.variableRowHeight = undefined;
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         var _a;
         this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
@@ -282,10 +475,15 @@ export class DataTable {
         this.sortedColumn = this.sortOptions.defaultColumn;
         this.sortedColumnOrder = this.sortOptions.sortOrders[0];
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
+        this.initialLoad = true;
+        this.previousItemsPerPage = this.rowsPerPage;
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        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;
@@ -294,11 +492,144 @@ export class DataTable {
             this.startLoadingTimer();
             this.showLoadingIndicator();
         }
+        if (this.truncationPattern) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.dataTruncation(typographyEl);
+                }
+            });
+            this.debounceDataTruncation();
+        }
+        if (this.globalRowHeight !== "auto") {
+            this.updateSetRowHeight();
+        }
     }
-    handleItemsPerPageChange({ detail, target, }) {
-        if (target.parentElement !== this.el) {
-            this.previousRowsPerPage = this.rowsPerPage;
-            this.rowsPerPage = detail.value;
+    componentDidUpdate() {
+        this.truncateUpdatedData();
+    }
+    truncateUpdatedData() {
+        if (this.dataUpdated) {
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.resetShowHideTruncation();
+            }
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.dataUpdated = false;
+        }
+        if (this.tableSorted) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            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);
+            this.getTypographyElements().forEach((typographyEl) => {
+                var _a;
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                const rowHeight = fontSize *
+                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                // If the set row height is bigger than the cell container even
+                // with textWrap, set the row height
+                if (!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
+                    rowHeight > cellContainer.clientHeight) {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                }
+                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("ic-typography")
+                        .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;
+        }
+    }
+    createShowHideTruncation(typographyEl, cellContainer) {
+        typographyEl.checkMaxLines(typographyEl.scrollHeight);
+        typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        typographyEl.setShowHideExpanded(false);
+        cellContainer.style.height = null;
+    }
+    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);
+    }
+    getTruncWrapper(typographyEl) {
+        return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
+    }
+    // Set the height to initial if row height is set and the show / hide truncation
+    // is clicked
+    handleTypographyTruncationExpandToggle({ detail, }) {
+        const { expanded, typographyEl } = detail;
+        const cellContainer = this.getCellContainer(typographyEl);
+        if (cellContainer.style.height && expanded) {
+            cellContainer.style.height = "inherit";
         }
     }
     handlePageChange({ detail, target }) {
@@ -317,6 +648,19 @@ export class DataTable {
                 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;
@@ -334,7 +678,23 @@ export class DataTable {
             }, 500);
         }
     }
-    dataHandler(newData) {
+    truncationPatternHandler(newValue) {
+        if (newValue === this.SHOW_HIDE_STRING) {
+            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.TOOLTIP_STRING) {
+            // ResizeObserver is trigger here due to the see more/see less links being removed.
+            // The resizeObserver will also apply the tooltip where relevant
+            this.resetShowHideTruncation();
+        }
+    }
+    async dataHandler(newData) {
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 });
         if (this.loading) {
             !this.hasLoadedForOneSecond
@@ -344,31 +704,124 @@ export class DataTable {
         }
         if (this.updating)
             this.updating = false;
+        this.dataUpdated = true;
     }
-    rowHeightChangeHandler() {
-        this.icRowHeightChange.emit();
+    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.height = null;
+            }
+            else {
+                typographyEl.resetTruncation().then(() => {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                });
+            }
+        }
+        else {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                typographyEl.resetTruncation().then(() => {
+                    cellContainer.style.setProperty("height", 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 `40px` and sets the `variableRowHeight` prop to `null`.
+     * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
      */
-    async resetRowHeights() {
-        this.globalRowHeight = 40;
+    async resetRowHeights(rowHeight) {
+        this.globalRowHeight = rowHeight || "auto";
         this.variableRowHeight = null;
     }
     showLoadingIndicator() {
         this.loadingIndicator.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);
+        }
+        // Adding the tableSorted boolean prevents the tooltip
+        // being regenerated and flashing
+        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+            !this.tableSorted) {
+            if (!typographyEl.getAttribute("style")) {
+                this.addLineClampCSS(typographyEl, cellContainer);
+            }
+            this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    removeTooltip(cellContainer, typographyEl, tooltip) {
+        cellContainer.appendChild(typographyEl);
+        if (tooltip) {
+            tooltip.remove();
+        }
+    }
+    addLineClampCSS(typographyEl, cellContainer) {
+        typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
+    }
+    createTruncationTooltip(typographyEl, cellContainer) {
+        const tooltipEl = document.createElement("ic-tooltip");
+        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",
+        });
+        cellContainer.appendChild(tooltipEl);
+        tooltipEl.appendChild(typographyEl);
+    }
     render() {
         const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
         return (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", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
             } }, h("tr", null, createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
             !loading &&
             (isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
                 "loading-empty": loading,
@@ -509,7 +962,7 @@ export class DataTable {
                 },
                 "attribute": "global-row-height",
                 "reflect": false,
-                "defaultValue": "40"
+                "defaultValue": "\"auto\""
             },
             "hideColumnHeaders": {
                 "type": "boolean",
@@ -702,6 +1155,29 @@ export class DataTable {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "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 longer text in cells where textWrap is `false`.\nThe `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,
@@ -774,7 +1250,8 @@ export class DataTable {
             "selectedRow": {},
             "sortedColumn": {},
             "sortedColumnOrder": {},
-            "toRow": {}
+            "toRow": {},
+            "currentRowHeight": {}
         };
     }
     static get events() {
@@ -799,8 +1276,12 @@ export class DataTable {
         return {
             "resetRowHeights": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(rowHeight?: number | \"auto\") => Promise<void>",
+                    "parameters": [{
+                            "name": "rowHeight",
+                            "type": "number | \"auto\"",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -810,7 +1291,7 @@ export class DataTable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.",
+                    "text": "Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.",
                     "tags": []
                 }
             }
@@ -821,9 +1302,15 @@ export class DataTable {
         return [{
                 "propName": "loading",
                 "methodName": "loadingHandler"
+            }, {
+                "propName": "truncationPattern",
+                "methodName": "truncationPatternHandler"
             }, {
                 "propName": "data",
                 "methodName": "dataHandler"
+            }, {
+                "propName": "density",
+                "methodName": "densityHandler"
             }, {
                 "propName": "globalRowHeight",
                 "methodName": "rowHeightChangeHandler"
@@ -834,8 +1321,8 @@ export class DataTable {
     }
     static get listeners() {
         return [{
-                "name": "icItemsPerPageChange",
-                "method": "handleItemsPerPageChange",
+                "name": "typographyTruncationExpandToggle",
+                "method": "handleTypographyTruncationExpandToggle",
                 "target": undefined,
                 "capture": false,
                 "passive": false
@@ -845,6 +1332,12 @@ export class DataTable {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "icItemsPerPageChange",
+                "method": "handleItemsPerPageChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "icTableDensityUpdate",
                 "method": "handleDensityChange",