@ukic/canary-web-components 3.0.0-canary.21 → 3.0.0-canary.23

package/dist/esm/ic-data-table.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a7a720e7.js';
-import { b as isEmptyString, p as pxToRem, i as isSlotUsed, c as addDataToPosition, d as deviceSizeMatches, e as getSlotElements, f as checkResizeObserver, h as dynamicDebounce, j as IC_DEVICE_SIZES } from './helpers-d9387cd3.js';
+import { b as isEmptyString, p as pxToRem, i as isSlotUsed, c as addDataToPosition, d as deviceSizeMatches, e as getSlotElements, f as checkResizeObserver, h as dynamicDebounce, j as IC_DEVICE_SIZES } from './helpers-89cb996d.js';
 
 const unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
     <path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
@@ -13,7 +13,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-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 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-popover) - 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;line-clamp:var(--ic-line-clamp, 0);-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-popover) - 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 = class {
@@ -559,7 +559,7 @@ const DataTable = class {
             }
             return columnWidthStyling;
         };
-        this.getCalculatedRowHeight = (columnProps, rowTextWrap, cell, currentRowHeight) => {
+        this.getCalculatedRowHeight = (columnProps, cell, rowTextWrap, currentRowHeight) => {
             if ((this.truncationPattern || currentRowHeight) &&
                 !(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
                 !rowTextWrap &&
@@ -571,33 +571,40 @@ const DataTable = class {
             }
             return {};
         };
+        this.getSlottedActionElement = (actionElement) => {
+            const slotName = actionElement.getAttribute("name");
+            return this.el.querySelector(`[slot="${slotName}"]`);
+        };
         this.adjustWidthForActionElement = () => {
             var _a;
             const elements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".action-element");
-            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
-                const width = element.firstChild.getBoundingClientRect()
-                    .width;
-                const gridWrapper = element.closest(".cell-grid-wrapper");
-                if (gridWrapper)
+            elements === null || elements === void 0 ? void 0 : elements.forEach((actionElementSpan) => {
+                var _a;
+                const actionElement = actionElementSpan.firstChild;
+                const slottedActionElement = this.getSlottedActionElement(actionElement);
+                const width = (_a = slottedActionElement === null || slottedActionElement === void 0 ? void 0 : slottedActionElement.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0;
+                const gridWrapper = actionElementSpan.closest(".cell-grid-wrapper");
+                if (gridWrapper) {
                     gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
+                }
             });
         };
-        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
+        this.createCellContent = (columnProps, cell, cellSlotName, hasIcon, cellValue, rowOptions, currentRowHeight) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
                     !isSlotUsed(this.el, cellSlotName)
                     ? cell
-                    : undefined, class: Object.assign(Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.horizontal) ||
-                        ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.horizontal) ||
-                        this.getCellAlignment(cell, "horizontal")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
-                        !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
+                    : undefined, class: Object.assign(Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", "cell-icon": hasIcon || !!((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _a === void 0 ? void 0 : _a.icon), [`cell-alignment-${((_b = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _b === void 0 ? void 0 : _b.horizontal) ||
+                        ((_c = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === 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) ||
+                        !!((_e = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _e === void 0 ? void 0 : _e.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 || !!((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.icon), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                        !!this.getCellOptions(cell, "textWrap"), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
                         (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                        rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                        (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.emphasis)}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
                         !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                        !!rowEmphasis }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getCalculatedRowHeight(columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell, currentRowHeight)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
+                        !!(rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.emphasis) }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getCalculatedRowHeight(columnProps, cell, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, currentRowHeight)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
                     ? this.setRowHeight(currentRowHeight)
                     : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_f = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _f === void 0 ? void 0 : _f.onAllCells)) &&
                 (cellValue("icon") || ((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _g === void 0 ? void 0 : _g.icon)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || ((_h = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _h === void 0 ? void 0 : _h.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
@@ -607,9 +614,9 @@ const DataTable = class {
                 } }, 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")) ||
+                        (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.emphasis)}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
                         !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                        !!rowEmphasis,
+                        !!(rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.emphasis),
                     [`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"), theme: this.theme, target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))), this.isObject(cell) &&
                 Object.keys(cell).includes("description") && (h("div", { class: {
@@ -619,52 +626,37 @@ const DataTable = class {
         };
         this.createCells = (row, rowIndex) => {
             var _a;
-            const rowKeys = Object.keys(row);
-            const rowOptions = this.getObjectValue(row, "rowOptions");
-            let rowAlignment;
-            let rowEmphasis;
-            const rowHeader = this.getObjectValue(row, "header");
-            if (rowHeader) {
-                rowAlignment = this.getObjectValue(rowHeader, "rowAlignment");
-                rowEmphasis = this.getObjectValue(rowHeader, "emphasis");
-            }
             const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
             const currentRowHeight = variableRowHeightVal
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
-            return this.columns.map((column, index) => {
+            const { rowOptions } = row;
+            return this.columns.map((column) => {
                 var _a, _b, _c, _d;
-                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)));
-                    }
+                const { columnAlignment, columnWidth, dataType, hidden, key } = column;
+                if (hidden)
+                    return;
+                const cell = this.getObjectValue(row, key);
+                const cellSlotName = `${key}-${rowIndex}`;
+                const cellValue = (key) => this.getObjectValue(cell, key);
+                if (key === "header" && (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.header)) {
+                    return (h("th", { scope: "row", class: {
+                            "row-header": true,
+                            "row-header-sticky": this.stickyRowHeaders,
+                            [`row-header-alignment-${(_a = rowOptions.rowAlignment) === null || _a === void 0 ? void 0 : _a.horizontal}`]: !!((_b = rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.horizontal),
+                        } }, rowOptions.header));
                 }
+                const CellContent = this.createCellContent(column, cell, cellSlotName, this.isObject(cell) && Object.keys(cell).includes("icon"), cellValue, rowOptions, currentRowHeight || undefined);
+                return (h("td", { class: {
+                        "table-cell": true,
+                        "with-overflow": dataType === "element",
+                        [`table-density-${this.density}`]: this.notDefaultDensity(),
+                        [`cell-vertical-align-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            ((_c = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                            this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                            !!this.getCellAlignment(cell, "vertical"),
+                    }, style: Object.assign({}, this.getColumnWidth(columnWidth)) }, isSlotUsed(this.el, `${cellSlotName}-action-element`) ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element" }, h("slot", { name: `${cellSlotName}-action-element` })))) : (CellContent)));
             });
         };
         this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, hidden, }, index) => hidden !== true && (h("th", { scope: "col", class: {
@@ -682,9 +674,7 @@ const DataTable = class {
             } }, 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-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
+            } }, title)), this.sortable && !excludeColumnFromSort && (h("ic-button", { variant: "icon-tertiary", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key), onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                 ? this.sortedColumnOrder
                 : "unsorted"], class: {
                 ["sort-button"]: true,
@@ -966,9 +956,14 @@ const DataTable = class {
                     this.fixCellTooltip(slottedEl);
                 });
             });
-            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => this.fixCellTooltip(actionElementSpan));
+            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => {
+                const actionElement = actionElementSpan.firstChild;
+                const slottedActionElement = this.getSlottedActionElement(actionElement);
+                if (slottedActionElement) {
+                    this.fixCellTooltip(slottedActionElement);
+                }
+            });
         };
-        this.handleClick = (event, callback) => callback(event);
         this.renderTableBody = (loading, data, overlay) => {
             if (!(data === null || data === void 0 ? void 0 : data.length))
                 return;
@@ -1350,22 +1345,22 @@ const DataTable = class {
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: '64eb44a8bf010b30423347fe571f410a2d8928c9', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'becebfcadb3bc4b16ae5a320552f69c88d25618b', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '8cf6095d010f0f08d80105afe038123b55374297', name: "title-bar" }), h("div", { key: '1b4739fb76ab911fae8ced0348d0d0454d9c72e2', class: {
+        return (h(Host, { key: 'bcb83a93fd9734b2ddb501c75a0bd7267f22b45c', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '2aeadd74b7a8e5acf93ea72ce77c7a0ad520d95b', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '359c51f2db8d1ef0f4ba4da77acc334cb82f0ff1', name: "title-bar" }), h("div", { key: 'ad28fdb967fe02e2d3b31e9e73787655f9b5bf5c', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '73bfb72667914b7999f1bdc7e52b30f8520a4bc8', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: 'ed247db011e9783c6d56a03afe480fe5f4f2b6d0', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: '39ebd596a88837589359e5dc81b0578c26fbc5dc', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '277be2cfef3f0429087ac96e25796f1a57e5caae', class: {
+            } }, h("caption", { key: '52bd7f8ae17ba373dceba49f7ee628780c825c71', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '04d0c0199793ac830c9cc24fca64c999a287b690', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: 'abe0eadb94fa537ee928892a785c3786527fb533' }, rowSelection && data && (h("th", { key: '2a751c6c0fabf5c3d2229e659078750d787a0807', class: {
+            } }, h("tr", { key: '5ff4686d2053f702a4d8217986d94d7a45596402' }, rowSelection && data && (h("th", { key: 'b03c33ef7d27c1be4b9cff06eecfd85f280fb379', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: 'bca48d659a9384a9708b8ed554ecb51feaaa0c6e', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'dff4df961579d7b7024df1ef60df2cc1b73a9afa', 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: '5c114f3e53652b8b700b2fad7365976f87b7b6c2', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '349c87540675235321324f16157deedbd3221e45', 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: '823df0732817533fd47aac3fbb38eeb30d286d68', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'ef31222b62a8b0bb19526c3955a40ea158281f74', 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: '03084660142fec0b5855a9e4ff158d97fc0e5142', 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: '913a847423633138a6f2ed004499c82863ae9b90', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '3998139318125dd0767c2ec0faf5e3059335aa40', 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: '97605941ae5d70267886542504d34751695ea57f', 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")))));