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

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

@@ -30,7 +30,7 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
     <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
 </svg>`;
 
-const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n    --ic-data-table-cell-background-selected-hover\n  ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left}.data-type-number,.data-type-date{text-align:right;justify-content:end}.cell-vertical-align-top{vertical-align:top;align-items:flex-start}.cell-vertical-align-middle{vertical-align:middle;align-items:center}.cell-vertical-align-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow);z-index:calc(var(--ic-z-index-dialog) - 1);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg),.cell-description-icon>svg{fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.column-header-alignment-center>.cell-text-wrapper,.row-header-alignment-right>ic-typography,.row-header-alignment-right>.cell-text-wrapper,.cell-alignment-center>ic-typography,.cell-alignment-center>.cell-text-wrapper{flex:1}.checkbox-cell{--column-width:var(--ic-space-xxl);align-content:center;border-right:none}.table-density-dense.checkbox-cell{--column-width:2.5rem}.checkbox-wrapper{display:flex;justify-content:center}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}.loading-overlay{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ic-data-table-loading-indicator-overlay-background);z-index:calc(var(--ic-z-index-dialog) - 2);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading-overlay.show{visibility:visible;opacity:0.6}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){.loading-overlay{transition:none}}.cell-text-wrapper{overflow:hidden}.cell-text-wrapper>ic-typography{margin-left:2px}.cell-text-no-wrap{word-wrap:initial}.cell-container-with-description{display:flex;flex-direction:row}.cell-description{display:flex;flex-direction:row;margin-top:var(--ic-space-xxs);word-break:break-all}.cell-description-text{color:var(--ic-data-table-cell-description-text)}.cell-description-icon{padding-right:var(--ic-space-xs)}.cell-description-icon>svg{height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs));display:flex}@media (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}@media (max-width: 577px){.cell-icon{flex-wrap:wrap}.cell-description-icon{padding-right:0}}@media (forced-colors: active){.icon,::slotted(svg),.cell-description-icon>svg{fill:currentcolor}.sort-button svg{color:currentcolor}.table-row-selected{background-color:Highlight !important}}";
+const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-image:linear-gradient(\n    var(--ic-data-table-cell-background-selected) 0 0\n  );background-color:var(--ic-data-table-cell-background) !important}.table-row:hover{background-image:linear-gradient(\n    var(--ic-data-table-cell-background-hover) 0 0\n  );background-color:var(--ic-data-table-cell-background) !important}.table-row-selected:hover{background-image:linear-gradient(\n    var(--ic-data-table-cell-background-selected-hover) 0 0\n  )}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left}.data-type-number,.data-type-date{text-align:right;justify-content:end}.cell-vertical-align-top{vertical-align:top;align-items:flex-start}.cell-vertical-align-middle{vertical-align:middle;align-items:center}.cell-vertical-align-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow);z-index:calc(var(--ic-z-index-dialog) - 1);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg),.cell-description-icon>svg{fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.column-header-alignment-center>.cell-text-wrapper,.row-header-alignment-right>ic-typography,.row-header-alignment-right>.cell-text-wrapper,.cell-alignment-center>ic-typography,.cell-alignment-center>.cell-text-wrapper{flex:1}.checkbox-cell{--column-width:var(--ic-space-xxl);align-content:center;border-right:none}.table-density-dense.checkbox-cell{--column-width:2.5rem}.checkbox-wrapper{display:flex;justify-content:center}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}.loading-overlay{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ic-data-table-loading-indicator-overlay-background);z-index:calc(var(--ic-z-index-dialog) - 2);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading-overlay.show{visibility:visible;opacity:0.6}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){.loading-overlay{transition:none}}.cell-text-wrapper{overflow:hidden}.cell-text-wrapper>ic-typography{margin-left:2px}.cell-text-no-wrap{word-wrap:initial}.cell-container-with-description{display:flex;flex-direction:row}.cell-description{display:flex;flex-direction:row;margin-top:var(--ic-space-xxs);word-break:break-all}.cell-description-text{color:var(--ic-data-table-cell-data-description)}.cell-description-icon{padding-right:var(--ic-space-xs)}.cell-description-icon>svg{height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs));display:flex}@media (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}@media (max-width: 577px){.cell-icon{flex-wrap:wrap}.cell-description-icon{padding-right:0}}@media (forced-colors: active){.icon,::slotted(svg),.cell-description-icon>svg{fill:currentcolor}.sort-button svg{color:currentcolor}.table-row-selected{background-color:Highlight !important}}";
 const IcDataTableStyle0 = icDataTableCss;
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
@@ -41,6 +41,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
         this.icSelectAllRows = createEvent(this, "icSelectAllRows", 7);
         this.icSelectedRowChange = createEvent(this, "icSelectedRowChange", 7);
+        this.icColumnsLoaded = createEvent(this, "icColumnsLoaded", 7);
+        this.icDataLoaded = createEvent(this, "icDataLoaded", 7);
         this.icSortChange = createEvent(this, "icSortChange", 7);
         this.DENSITY_HEIGHT_MULTIPLIER = {
             dense: 0.8,
@@ -66,6 +68,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.TEXT_WRAP_STRING = "text-wrap";
         this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
         this.dataUpdated = false;
+        this.columnsUpdated = false;
         this.rowHeightSet = false;
         this.initialLoad = false;
         this.icPageChangeEvent = false;
@@ -209,6 +212,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 }
             }
         };
+        this.handleResize = () => {
+            this.updateCellHeightsWithDescriptions();
+            this.fixCellSelect();
+        };
         this.getRowHeight = (cellContainer) => parseInt(getComputedStyle(document.documentElement).fontSize) *
             parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING) || "");
         this.truncateUpdatedData = () => {
@@ -547,7 +554,8 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.createUpdatingIndicator = () => {
             const { description, max, min, progress, monochrome } = this.updatingOptions || {};
-            return (h("th", { colSpan: this.columns.length + (this.rowSelection && this.data ? 1 : 0), class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
+            const visibleColumnCount = this.columns.filter((col) => col.hidden !== true).length;
+            return (h("th", { colSpan: visibleColumnCount + (this.rowSelection && this.data ? 1 : 0), class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
         };
         this.setRowHeight = (height) => pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
             this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
@@ -643,43 +651,42 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             const currentRowHeight = variableRowHeightVal
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
-            return this.columns.map((columnName, index) => {
+            return this.columns.map((column, index) => {
                 var _a, _b, _c, _d;
-                const cell = this.getObjectValue(row, columnName["key"]);
-                const columnProps = this.columns[index];
-                const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
-                const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
-                const cellValue = (key) => this.getObjectValue(cell, key);
-                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")));
-                }
-                const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
-                if (rowKeys[index] !== "rowOptions") {
-                    return (h("td", { class: {
-                            ["table-cell"]: true,
-                            [`table-density-${this.density}`]: this.notDefaultDensity(),
-                            ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
-                            [`cell-vertical-align-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
-                                ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
-                                rowAlignment ||
-                                this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
-                                !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
-                                !!rowAlignment ||
-                                !!this.getCellAlignment(cell, "vertical"),
-                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
-                        Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onClick: cell.actionOnClick
-                            ? (event) => this.handleClick(event, cell.actionOnClick)
-                            : undefined }))) : (CellContent)));
+                if (column.hidden !== true) {
+                    const cell = this.getObjectValue(row, column["key"]);
+                    const cellValue = (key) => this.getObjectValue(cell, key);
+                    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")));
+                    }
+                    const CellContent = this.createCellContent(column, cell, `${column === null || column === void 0 ? void 0 : column.key}-${rowIndex}`, rowOptions, this.isObject(cell) && Object.keys(cell).includes("icon"), cellValue, rowEmphasis, currentRowHeight || undefined);
+                    if (rowKeys[index] !== "rowOptions") {
+                        return (h("td", { class: {
+                                ["table-cell"]: true,
+                                [`table-density-${this.density}`]: this.notDefaultDensity(),
+                                ["with-overflow"]: (column === null || column === void 0 ? void 0 : column.dataType) === "element",
+                                [`cell-vertical-align-${((_a = column === null || column === void 0 ? void 0 : column.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 = column === null || column === void 0 ? void 0 : column.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                                    !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                                    !!rowAlignment ||
+                                    !!this.getCellAlignment(cell, "vertical"),
+                            }, style: Object.assign({}, this.getColumnWidth(column.columnWidth)) }, this.isObject(cell) &&
+                            Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onClick: cell.actionOnClick
+                                ? (event) => this.handleClick(event, cell.actionOnClick)
+                                : undefined }))) : (CellContent)));
+                    }
                 }
             });
         };
-        this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, }, index) => (h("th", { scope: "col", class: {
+        this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, hidden, }, index) => hidden !== true && (h("th", { scope: "col", class: {
                 ["column-header"]: true,
                 [`table-density-${this.density}`]: this.notDefaultDensity(),
                 ["updating-state-headers"]: this.updating && !this.loading,
@@ -694,7 +701,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             } }, 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),
+            } }, title)), this.sortable && !excludeColumnFromSort && (h("ic-button", { variant: "icon-tertiary", 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
@@ -726,7 +733,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.icSelectAllRows.emit(this.selectedRows);
         };
         this.createRows = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const data = this.showPagination
                 ? (_a = this.data) === null || _a === void 0 ? void 0 : _a.slice(this.fromRow, this.toRow)
                 : (_b = this.data) === null || _b === void 0 ? void 0 : _b.slice();
@@ -750,9 +757,12 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     ? addDataToPosition(row, slottedColumns, "")
                     : row;
             });
-            return (_c = this.organisedData) === null || _c === void 0 ? void 0 : _c.sort(!this.sortable || this.disableAutoSort
-                ? undefined
-                : this.getSortFunction()).map((row, index) => {
+            return (_c = this.organisedData) === null || _c === void 0 ? void 0 : _c.sort(this.sortable &&
+                !this.disableAutoSort &&
+                this.sortedColumn &&
+                !((_d = this.columns.find((col) => col.key === this.sortedColumn)) === null || _d === void 0 ? void 0 : _d.disableAutoSort)
+                ? this.getSortFunction()
+                : undefined).map((row, index) => {
                 const isRowSelected = this.rowSelection && this.selectedRows.includes(row);
                 const cellIndex = index + paginationOffset;
                 return (h("tr", { class: {
@@ -942,6 +952,22 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 strategy: "fixed",
             });
         };
+        this.fixCellSelect = () => {
+            var _a, _b;
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".data-type-element")) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
+                const children = Array.from(element.children);
+                children === null || children === void 0 ? void 0 : children.forEach((el) => {
+                    var _a;
+                    if (el.tagName === "IC-SELECT") {
+                        const menu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-menu");
+                        menu === null || menu === void 0 ? void 0 : menu.setExternalPopperProps({
+                            strategy: "fixed",
+                        });
+                        el.style.setProperty("--input-width", `${element.clientWidth}px`);
+                    }
+                });
+            });
+        };
         this.fixCellTooltips = () => {
             var _a, _b, _c, _d;
             (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".data-type-element")) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
@@ -1012,10 +1038,14 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             });
         }
     }
+    columnsChangeHandler() {
+        this.columnsUpdated = true;
+    }
     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();
+        window.removeEventListener("resize", this.handleResize);
     }
     componentWillLoad() {
         this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
@@ -1067,7 +1097,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         if (this.globalRowHeight !== "auto") {
             this.updateSetRowHeight();
         }
-        window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
+        window.addEventListener("resize", this.handleResize);
+        this.icColumnsLoaded.emit();
+        if (this.data && !this.loading && !this.updating)
+            this.icDataLoaded.emit();
     }
     componentDidUpdate() {
         // truncation updates invoked here once new/updated data has
@@ -1096,9 +1129,18 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 this.truncatePatternUpdated();
             }
         }
+        if (this.columnsUpdated) {
+            this.icColumnsLoaded.emit();
+            this.columnsUpdated = false;
+        }
+        if (this.dataUpdated && !this.loading && !this.updating) {
+            this.icDataLoaded.emit();
+            this.dataUpdated = false;
+        }
     }
     componentDidRender() {
         this.fixCellTooltips();
+        this.fixCellSelect();
         this.updateCellHeightsWithDescriptions();
         this.adjustWidthForActionElement();
     }
@@ -1318,22 +1360,22 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: '2b548f8d26428034d51e7475883d6e7b407f28ec', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '5663c5ce124cf6f67435a8d18ddda4bc63a88e4f', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '1ea59340e9633ca9a2f6d9fdba53d734050ddf84', name: "title-bar" }), h("div", { key: 'f2aef7502ca0c4124bf70b0fb4173e29b892004b', class: {
+        return (h(Host, { key: '3052bc97a810739103b780229d462a9ba1d63ea5', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '4ffa82385024818947871897ce977fe95bce8a9d', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '91985d43c24fd4bbc76ccf96a67a1fa19ce70461', name: "title-bar" }), h("div", { key: '34c7cd54e7e1d91c1fc7a2ce9b4802b9746a82bf', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '061ab3f20e857b05a4cd668656b0a730f1d0645a', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '93ef0fbb09a56f3890fa23d5a0dc276af9ad4dda', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: '727550fa24947c102cd231b1a4e262ffcba6e3b3', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'c07fa1fddf4fa8364c52444a3cc8df0d1bdaabaf', class: {
+            } }, h("caption", { key: '6add0ea2caa1c21a5625a34145d70fc6228e324c', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'de60c4fd48671d474244ff05316deedd44f98fb2', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: '01735185f99abdd22a71edcaf944642d6e2c45de' }, rowSelection && data && (h("th", { key: '40c7157f3f3e45b6e9a9a0dfc65e2374526e150d', class: {
+            } }, h("tr", { key: 'c7083cfce06a32d81e351b68d2cb722a79f29d7d' }, rowSelection && data && (h("th", { key: '736708f68f9736806fa680c9abba7ff82bdb5798', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: '8d53b98f553294d9b2b9483f4ed001da905fcff4', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'b08cd440baff49256037e3ca3d27059a64c19d98', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, h("div", { key: '46f06aa00589a14972aee324293b8d3c6695f232', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'a39b7d79439620a8d895837043530a3436837d18', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '8ddc07463825ac2c637cf7f413840acc2662d2c2', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'd619ff136af4258047c21f7ea83ad8dd9ec77873', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: 'f0a61b27a9e5dda26ed7c7ad0b4b7cadb0d910d7', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: 'ca4c4e8ff912756de23061b17d2dc29511a39a81', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '43601b607b4a32605f3a946b33746c47152fefa7', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: '69a5c565f55d1d149bad3d2172008dee7d0e8643', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
@@ -1341,6 +1383,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     get el() { return this; }
     static get watchers() { return {
         "columnHeaderTruncation": ["headerTruncationChangeHandler"],
+        "columns": ["columnsChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],
@@ -1393,6 +1436,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "resetRowHeights": [64]
     }, [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"]], {
         "columnHeaderTruncation": ["headerTruncationChangeHandler"],
+        "columns": ["columnsChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],