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

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

@@ -1,14 +1,37 @@
-import { h } from "@stencil/core";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { h, Fragment, } 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 { getSlotContent, isSlotUsed } 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.
+ * @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.
+ */
 export class DataTable {
     constructor() {
+        this.DENSITY_HEIGHT_MULTIPLIER = {
+            dense: 0.8,
+            default: 1,
+            spacious: 1.2,
+        };
         this.SORT_ICONS = {
             unsorted: unsortedIcon,
             ascending: ascendingIcon,
             descending: descendingIcon,
         };
+        this.hasLoadedForOneSecond = true;
+        this.startLoadingTimer = () => {
+            this.hasLoadedForOneSecond = false;
+            this.timerStarted = Date.now();
+            setTimeout(() => {
+                this.hasLoadedForOneSecond = true;
+                this.timerStarted = null;
+            }, this.minimumLoadingDisplayDuration);
+        };
         this.isObject = (value) => typeof value === "object";
         this.notDefaultDensity = () => this.density !== "default";
         this.getCellContent = (cell, dataType) => {
@@ -26,7 +49,11 @@ export class DataTable {
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
-        this.createCells = (row) => {
+        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.createCells = (row, rowIndex) => {
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
             let rowAlignment;
@@ -37,43 +64,56 @@ export class DataTable {
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
             return rowValues.map((cell, index) => {
-                const { columnAlignment, dataType, emphasis } = this.columns[index];
+                var _a, _b, _c, _d, _e;
+                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: {
+                    } }, cellValue("title"))) : (h("td", { 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) ||
+                        [`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")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            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("ic-typography", { variant: "body", class: {
+                    } }, 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")) ||
-                            emphasis ||
+                            (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                             rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                            !!emphasis ||
+                            !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.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)))));
+                    } }, 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 = () => {
-            return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, icon, 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: {
+                    ["updating-state-headers"]: this.updating && !this.loading,
+                }, colSpan: colspan }, h("div", { class: {
+                    "column-header-inner-container": true,
+                    [`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 }))), 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),
+                } }, 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: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
@@ -81,21 +121,48 @@ export class DataTable {
                     ["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.createRows = () => {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
                 : this.data.slice();
+            /**
+             * 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.
+             */
+            this.columns.forEach(({ key }) => {
+                data.forEach((row, rowIndex) => {
+                    const cellSlotName = `${key}-${rowIndex}`;
+                    if (isSlotUsed(this.el, cellSlotName)) {
+                        row[key] = getSlotContent(this.el, cellSlotName);
+                    }
+                });
+            });
             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))));
+                .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: {
+                        ["table-row"]: true,
+                        ["table-row-selected"]: this.selectedRow === row,
+                    }, style: {
+                        height: findRowHeight
+                            ? `${findRowHeight * this.DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
+                            : null,
+                    }
+                }, this.createCells(row, index)));
+            });
         };
         this.getObjectValue = (cell, key) => {
             return Object.values(cell)[Object.keys(cell).indexOf(key)];
@@ -173,18 +240,26 @@ export class DataTable {
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
+        this.globalRowHeight = 40;
         this.hideColumnHeaders = false;
-        this.paginationOptions = {
-            itemsPerPage: [
+        this.loading = false;
+        this.loadingOptions = undefined;
+        this.minimumLoadingDisplayDuration = 1000;
+        this.paginationBarOptions = {
+            itemsPerPageOptions: [
                 { label: "10", value: "10" },
                 { label: "25", value: "25" },
                 { label: "50", value: "50" },
             ],
-            type: "page",
-            control: "simple",
-            itemsPerPageControl: true,
-            goToPageControl: true,
+            rangeLabelType: "page",
+            type: "simple",
+            showItemsPerPageControl: true,
+            showGoToPageControl: true,
             alignment: "right",
+            appearance: "default",
+            itemLabel: "Item",
+            pageLabel: "Page",
+            hideRangeLabel: false,
         };
         this.showPagination = false;
         this.sortable = false;
@@ -194,13 +269,18 @@ export class DataTable {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.updating = false;
+        this.updatingOptions = undefined;
+        this.variableRowHeight = undefined;
     }
     componentWillLoad() {
-        this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
+        var _a;
+        this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
         this.previousRowsPerPage = this.rowsPerPage;
         this.toRow = this.rowsPerPage;
         this.sortedColumn = this.sortOptions.defaultColumn;
         this.sortedColumnOrder = this.sortOptions.sortOrders[0];
+        this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
@@ -209,6 +289,10 @@ export class DataTable {
             (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();
+        }
     }
     handleItemsPerPageChange(ev) {
         this.previousRowsPerPage = this.rowsPerPage;
@@ -229,19 +313,63 @@ export class DataTable {
             this.previousRowsPerPage = this.rowsPerPage;
         }
     }
+    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);
+        }
+    }
+    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
+                ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
+                    (Date.now() - this.timerStarted))
+                : (this.loading = false);
+        }
+        if (this.updating)
+            this.updating = false;
+    }
+    rowHeightChangeHandler() {
+        this.icRowHeightChange.emit();
+    }
+    /**
+     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+     */
+    async resetRowHeights() {
+        this.globalRowHeight = 40;
+        this.variableRowHeight = null;
+    }
+    showLoadingIndicator() {
+        this.loadingIndicator.classList.add("show");
+    }
     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: {
+        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: {
                 ["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
+            } }, 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) &&
+            !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,
+                loading: true,
+                "show-background": loadingOptions.showBackground,
+            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel }))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted"))));
     }
@@ -314,7 +442,7 @@ export class DataTable {
             },
             "density": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "IcDataTableDensityOptions",
                     "resolved": "\"default\" | \"dense\" | \"spacious\"",
@@ -354,6 +482,30 @@ 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": "40"
+            },
             "hideColumnHeaders": {
                 "type": "boolean",
                 "mutable": false,
@@ -372,27 +524,74 @@ 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  }",
+                    "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: 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."
+                }
+            },
+            "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"
                         }
                     }
                 },
@@ -402,7 +601,7 @@ export class DataTable {
                     "tags": [],
                     "text": "Sets the props for the pagination bar."
                 },
-                "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    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    rangeLabelType: \"page\",\n    type: \"simple\",\n    showItemsPerPageControl: true,\n    showGoToPageControl: true,\n    alignment: \"right\",\n    appearance: \"default\",\n    itemLabel: \"Item\",\n    pageLabel: \"Page\",\n    hideRangeLabel: false,\n  }"
             },
             "showPagination": {
                 "type": "boolean",
@@ -497,6 +696,66 @@ export class DataTable {
                 "attribute": "sticky-row-headers",
                 "reflect": false,
                 "defaultValue": "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."
+                }
             }
         };
     }
@@ -513,7 +772,61 @@ export class DataTable {
             "toRow": {}
         };
     }
+    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": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resetRowHeights": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "loading",
+                "methodName": "loadingHandler"
+            }, {
+                "propName": "data",
+                "methodName": "dataHandler"
+            }, {
+                "propName": "globalRowHeight",
+                "methodName": "rowHeightChangeHandler"
+            }, {
+                "propName": "variableRowHeight",
+                "methodName": "rowHeightChangeHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "icItemsPerPageChange",
@@ -527,6 +840,12 @@ export class DataTable {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "icTableDensityUpdate",
+                "method": "handleDensityChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
                 "method": "clickListener",