@semcore/data-table 16.0.0 → 16.0.1-prerelease.0

package/lib/esm/components/Head/Group.mjs

@@ -9,38 +9,39 @@ import { sstyled, assignProps, Component } from "@semcore/core";
 import * as React from "react";
 import { Box } from "@semcore/base-components";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
-import { DataTable } from "../DataTable/DataTable.mjs";
+import { DataTableInternal } from "../DataTable/DataTable.mjs";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 /*!__reshadow-styles__:"./style.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_13xrb_gg_,.___SHead_13xrb_gg_{display:contents}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_{position:sticky;top:0;z-index:2}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{top:0}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroupContainer_13xrb_gg_>.___SColumn_13xrb_gg_{position:sticky;z-index:2}.___SHead_13xrb_gg_.__compact_13xrb_gg_ .___SColumn_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_,.___SGroup_13xrb_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_13xrb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_:has(~.___SColumn_13xrb_gg_.__visibleSort_13xrb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_left_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_left_13xrb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_right_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_right_13xrb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_,.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before,.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{display:flex;opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_{display:flex;opacity:1}.___SColumn_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroupTitle_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroup_13xrb_gg_.__gridArea_13xrb_gg_{grid-area:var(--gridArea_13xrb)}.___SHead_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_ .___SGroup_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_13xrb_gg_.__sortable_13xrb_gg_:hover{cursor:pointer}}.___SSortWrapper_13xrb_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_13xrb_gg_,.___SSortWrapper_13xrb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_13xrb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_13xrb_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    '.___SGroupContainer_1311w_gg_,.___SHead_1311w_gg_{display:contents}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_{position:sticky;top:0;z-index:2}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{top:0}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroupContainer_1311w_gg_>.___SColumn_1311w_gg_{position:sticky;z-index:2}.___SHead_1311w_gg_.__compact_1311w_gg_ .___SColumn_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_,.___SGroup_1311w_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_1311w_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1311w_gg_._use_primary_1311w_gg_:has(~.___SColumn_1311w_gg_.__visibleSort_1311w_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_left_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_left_1311w_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_right_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_right_1311w_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_,.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before,.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before{display:flex;opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_{display:flex;opacity:1}.___SColumn_1311w_gg_.__gridArea_1311w_gg_,.___SGroupTitle_1311w_gg_.__gridArea_1311w_gg_,.___SGroup_1311w_gg_.__gridArea_1311w_gg_{grid-area:var(--gridArea_1311w)}.___SHead_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_ .___SGroup_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1311w_gg_.__sortable_1311w_gg_:hover{cursor:pointer}}.___SSortWrapper_1311w_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1311w_gg_,.___SSortWrapper_1311w_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1311w_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1311w_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1311w_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "13xrb_gg_"
+    "1311w_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_13xrb_gg_",
-    "__SGroupContainer": "___SGroupContainer_13xrb_gg_",
-    "_sticky": "__sticky_13xrb_gg_",
-    "__SColumn": "___SColumn_13xrb_gg_",
-    "__SGroup": "___SGroup_13xrb_gg_",
-    "_compact": "__compact_13xrb_gg_",
-    "_use_secondary": "_use_secondary_13xrb_gg_",
-    "_borders_both": "_borders_both_13xrb_gg_",
-    "_borders_left": "_borders_left_13xrb_gg_",
-    "_borders_right": "_borders_right_13xrb_gg_",
-    "_gridArea": "__gridArea_13xrb_gg_",
-    "__SGroupTitle": "___SGroupTitle_13xrb_gg_",
-    "--gridArea": "--gridArea_13xrb",
-    "_fixed": "__fixed_13xrb_gg_",
-    "_sortable": "__sortable_13xrb_gg_",
-    "__SSortWrapper": "___SSortWrapper_13xrb_gg_",
-    "__SSortButton": "___SSortButton_13xrb_gg_",
-    "_use_primary": "_use_primary_13xrb_gg_",
-    "_visibleSort": "__visibleSort_13xrb_gg_",
-    "_sideIndents_l": "_sideIndents_l_13xrb_gg_"
+    "__SHead": "___SHead_1311w_gg_",
+    "__SGroupContainer": "___SGroupContainer_1311w_gg_",
+    "_sticky": "__sticky_1311w_gg_",
+    "__SColumn": "___SColumn_1311w_gg_",
+    "__SGroup": "___SGroup_1311w_gg_",
+    "_compact": "__compact_1311w_gg_",
+    "_use_secondary": "_use_secondary_1311w_gg_",
+    "_borders_both": "_borders_both_1311w_gg_",
+    "_borders_left": "_borders_left_1311w_gg_",
+    "_borders_right": "_borders_right_1311w_gg_",
+    "_gridArea": "__gridArea_1311w_gg_",
+    "__SGroupTitle": "___SGroupTitle_1311w_gg_",
+    "--gridArea": "--gridArea_1311w",
+    "_fixed": "__fixed_1311w_gg_",
+    "_sortable": "__sortable_1311w_gg_",
+    "__SSortWrapper": "___SSortWrapper_1311w_gg_",
+    "__SSortButton": "___SSortButton_1311w_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1311w_gg_",
+    "_use_primary": "_use_primary_1311w_gg_",
+    "_visibleSort": "__visibleSort_1311w_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1311w_gg_"
   })
 );
 var Group = /* @__PURE__ */ function(_Component) {
@@ -84,7 +85,7 @@ var Group = /* @__PURE__ */ function(_Component) {
         "__excludeProps": ["title"],
         "id": this.groupId
       }, _ref))), withConfig ? children : title), withConfig ? groupColumns.map(function(column, i) {
-        return /* @__PURE__ */ React.createElement(DataTable.Head.Column, _extends({
+        return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Column, _extends({
           key: column.name
         }, column, {
           "aria-describedby": _this.groupId

package/lib/esm/components/Head/Head.mjs

@@ -12,39 +12,39 @@ import * as React from "react";
 import { ScreenReaderOnly, Box } from "@semcore/base-components";
 import { Column } from "./Column.mjs";
 import { Group } from "./Group.mjs";
-import { getFixedStyle } from "../../utils.mjs";
-import { SELECT_ALL, DataTable } from "../DataTable/DataTable.mjs";
+import { SELECT_ALL, DataTableInternal } from "../DataTable/DataTable.mjs";
 import Checkbox from "@semcore/checkbox";
 /*!__reshadow-styles__:"./style.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_13xrb_gg_,.___SHead_13xrb_gg_{display:contents}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_{position:sticky;top:0;z-index:2}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{top:0}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroupContainer_13xrb_gg_>.___SColumn_13xrb_gg_{position:sticky;z-index:2}.___SHead_13xrb_gg_.__compact_13xrb_gg_ .___SColumn_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_,.___SGroup_13xrb_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_13xrb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_:has(~.___SColumn_13xrb_gg_.__visibleSort_13xrb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_left_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_left_13xrb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_right_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_right_13xrb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_,.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before,.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{display:flex;opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_{display:flex;opacity:1}.___SColumn_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroupTitle_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroup_13xrb_gg_.__gridArea_13xrb_gg_{grid-area:var(--gridArea_13xrb)}.___SHead_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_ .___SGroup_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_13xrb_gg_.__sortable_13xrb_gg_:hover{cursor:pointer}}.___SSortWrapper_13xrb_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_13xrb_gg_,.___SSortWrapper_13xrb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_13xrb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_13xrb_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    '.___SGroupContainer_1311w_gg_,.___SHead_1311w_gg_{display:contents}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_{position:sticky;top:0;z-index:2}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{top:0}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroupContainer_1311w_gg_>.___SColumn_1311w_gg_{position:sticky;z-index:2}.___SHead_1311w_gg_.__compact_1311w_gg_ .___SColumn_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_,.___SGroup_1311w_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_1311w_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1311w_gg_._use_primary_1311w_gg_:has(~.___SColumn_1311w_gg_.__visibleSort_1311w_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_left_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_left_1311w_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_right_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_right_1311w_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_,.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before,.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before{display:flex;opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_{display:flex;opacity:1}.___SColumn_1311w_gg_.__gridArea_1311w_gg_,.___SGroupTitle_1311w_gg_.__gridArea_1311w_gg_,.___SGroup_1311w_gg_.__gridArea_1311w_gg_{grid-area:var(--gridArea_1311w)}.___SHead_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_ .___SGroup_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1311w_gg_.__sortable_1311w_gg_:hover{cursor:pointer}}.___SSortWrapper_1311w_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1311w_gg_,.___SSortWrapper_1311w_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1311w_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1311w_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1311w_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "13xrb_gg_"
+    "1311w_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_13xrb_gg_",
-    "__SGroupContainer": "___SGroupContainer_13xrb_gg_",
-    "_sticky": "__sticky_13xrb_gg_",
-    "__SColumn": "___SColumn_13xrb_gg_",
-    "__SGroup": "___SGroup_13xrb_gg_",
-    "_compact": "__compact_13xrb_gg_",
-    "_use_secondary": "_use_secondary_13xrb_gg_",
-    "_borders_both": "_borders_both_13xrb_gg_",
-    "_borders_left": "_borders_left_13xrb_gg_",
-    "_borders_right": "_borders_right_13xrb_gg_",
-    "_gridArea": "__gridArea_13xrb_gg_",
-    "__SGroupTitle": "___SGroupTitle_13xrb_gg_",
-    "--gridArea": "--gridArea_13xrb",
-    "_fixed": "__fixed_13xrb_gg_",
-    "_sortable": "__sortable_13xrb_gg_",
-    "__SSortWrapper": "___SSortWrapper_13xrb_gg_",
-    "__SSortButton": "___SSortButton_13xrb_gg_",
-    "_use_primary": "_use_primary_13xrb_gg_",
-    "_visibleSort": "__visibleSort_13xrb_gg_",
-    "_sideIndents_l": "_sideIndents_l_13xrb_gg_"
+    "__SHead": "___SHead_1311w_gg_",
+    "__SGroupContainer": "___SGroupContainer_1311w_gg_",
+    "_sticky": "__sticky_1311w_gg_",
+    "__SColumn": "___SColumn_1311w_gg_",
+    "__SGroup": "___SGroup_1311w_gg_",
+    "_compact": "__compact_1311w_gg_",
+    "_use_secondary": "_use_secondary_1311w_gg_",
+    "_borders_both": "_borders_both_1311w_gg_",
+    "_borders_left": "_borders_left_1311w_gg_",
+    "_borders_right": "_borders_right_1311w_gg_",
+    "_gridArea": "__gridArea_1311w_gg_",
+    "__SGroupTitle": "___SGroupTitle_1311w_gg_",
+    "--gridArea": "--gridArea_1311w",
+    "_fixed": "__fixed_1311w_gg_",
+    "_sortable": "__sortable_1311w_gg_",
+    "__SSortWrapper": "___SSortWrapper_1311w_gg_",
+    "__SSortButton": "___SSortButton_1311w_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1311w_gg_",
+    "_use_primary": "_use_primary_1311w_gg_",
+    "_visibleSort": "__visibleSort_1311w_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1311w_gg_"
   })
 );
 var HeadRoot = /* @__PURE__ */ function(_Component) {
@@ -58,11 +58,16 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "fixedColumnsMap", /* @__PURE__ */ new Map());
-    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function(value) {
+    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function(value, event) {
+      var _this$asProps$onChang, _this$asProps;
+      (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickSelectAll", function(value) {
       return function(event) {
-        var _this$asProps$onChang, _this$asProps;
+        var _this$asProps$onChang2, _this$asProps2;
         event === null || event === void 0 ? void 0 : event.preventDefault();
-        (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        (_this$asProps$onChang2 = (_this$asProps2 = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang2 === void 0 ? void 0 : _this$asProps$onChang2.call(_this$asProps2, value, event);
       };
     });
     return _this;
@@ -76,7 +81,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getGroupProps",
     value: function getGroupProps(_, index) {
-      var _this$asProps2 = this.asProps, use = _this$asProps2.use, gridAreaGroupMap = _this$asProps2.gridAreaGroupMap, children = _this$asProps2.children;
+      var _this$asProps3 = this.asProps, use = _this$asProps3.use, gridAreaGroupMap = _this$asProps3.gridAreaGroupMap, children = _this$asProps3.children;
       return {
         use,
         gridArea: gridAreaGroupMap.get(index),
@@ -87,12 +92,12 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getColumnProps",
     value: function getColumnProps(_, index) {
-      var _this$asProps3 = this.asProps, use = _this$asProps3.use, columns = _this$asProps3.columns, sort = _this$asProps3.sort, onSortChange = _this$asProps3.onSortChange, tableRef = _this$asProps3.tableRef, gridTemplateColumns = _this$asProps3.gridTemplateColumns, gridTemplateAreas = _this$asProps3.gridTemplateAreas, sticky = _this$asProps3.sticky, top = _this$asProps3.top, selectedRows = _this$asProps3.selectedRows;
+      var _this$asProps4 = this.asProps, use = _this$asProps4.use, columns = _this$asProps4.columns, sort = _this$asProps4.sort, onSortChange = _this$asProps4.onSortChange, tableRef = _this$asProps4.tableRef, gridTemplateColumns = _this$asProps4.gridTemplateColumns, gridTemplateAreas = _this$asProps4.gridTemplateAreas, sticky = _this$asProps4.sticky, top = _this$asProps4.top, selectedRows = _this$asProps4.selectedRows, h = _this$asProps4.h, getFixedStyle = _this$asProps4.getFixedStyle;
       var column = columns[index];
       if (index === 0 && selectedRows && columns[index + 1].fixed) {
         column.fixed = "left";
       }
-      var _getFixedStyle = getFixedStyle(column, columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+      var _getFixedStyle = getFixedStyle(column), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
       var style2 = {};
       if (top) {
         style2.top = "".concat(top, "px");
@@ -104,10 +109,6 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
       return {
         use,
         "aria-colindex": index + 1,
-        ref: function ref(node) {
-          var _column$ref;
-          return (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : _column$ref.call(column, node);
-        },
         style: style2,
         gridArea: column.gridArea,
         fixed: column.fixed,
@@ -120,36 +121,36 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
         columnIndex: index,
         tableRef,
         gridTemplateColumns,
-        gridTemplateAreas
+        gridTemplateAreas,
+        h
       };
     }
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref2, _this2 = this;
+      var _ref = this.asProps, _ref2;
       var SHead = Box;
-      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, styles = _this$asProps4.styles, getI18nText = _this$asProps4.getI18nText, children = _this$asProps4.children, treeColumns = _this$asProps4.treeColumns, selectedRows = _this$asProps4.selectedRows, totalRows = _this$asProps4.totalRows;
+      var SHeadCheckboxCol = Head.Column;
+      var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, styles = _this$asProps5.styles, getI18nText = _this$asProps5.getI18nText, children = _this$asProps5.children, treeColumns = _this$asProps5.treeColumns, selectedRows = _this$asProps5.selectedRows, totalRows = _this$asProps5.totalRows;
       var checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;
       var indeterminate = selectedRows && selectedRows.length > 0 && !checked;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, assignProps({
         "role": "row",
         "aria-rowindex": 1
-      }, _ref))), selectedRows && /* @__PURE__ */ React.createElement(Head.Column, {
-        name: SELECT_ALL.toString(),
-        onClick: this.handleSelectAll(!checked)
-      }, /* @__PURE__ */ React.createElement(Checkbox, _ref2.cn("Checkbox", {
+      }, _ref))), selectedRows && /* @__PURE__ */ React.createElement(SHeadCheckboxCol, _ref2.cn("SHeadCheckboxCol", {
+        "name": SELECT_ALL.toString(),
+        "onClick": this.handleClickSelectAll(!checked)
+      }), /* @__PURE__ */ React.createElement(Checkbox, _ref2.cn("Checkbox", {
         "checked": checked,
         "indeterminate": indeterminate,
         "aria-label": getI18nText("DataTable.Header.selectAllCheckbox:aria-label"),
-        "onChange": function onChange(value, e) {
-          return _this2.handleSelectAll(value)(e);
-        }
+        "onChange": this.handleSelectAll
       }), /* @__PURE__ */ React.createElement(Checkbox.Value, null, /* @__PURE__ */ React.createElement(Checkbox.Value.Control, null), /* @__PURE__ */ React.createElement(Checkbox.Value.CheckMark, {
         mt: 0
       })))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, treeColumns.map(function(column, i) {
         if ("columns" in column) {
           var _column$columns;
-          return /* @__PURE__ */ React.createElement(DataTable.Head.Group, _extends({
+          return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Group, _extends({
             key: column.name
           }, column, {
             name: (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function(c) {
@@ -158,7 +159,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
             title: ""
           }));
         }
-        return /* @__PURE__ */ React.createElement(DataTable.Head.Column, _extends({
+        return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Column, _extends({
           key: column.name
         }, column));
       }))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {

package/lib/esm/components/Head/style.shadow.css

@@ -166,7 +166,7 @@ SSortButton {
   transition: opacity 0.3s ease;
 }
 
-SHead[sideIndents='l'] {
+SHead[sideIndents='wide'] {
   SColumn:first-child {
     padding-left: var(--intergalactic-spacing-5x, 20px);
   }
@@ -174,3 +174,7 @@ SHead[sideIndents='l'] {
     padding-right: var(--intergalactic-spacing-5x, 20px);
   }
 }
+
+SHeadCheckboxCol {
+  cursor: pointer;
+}

package/lib/esm/style/scroll-shadows.shadow.css

@@ -22,6 +22,12 @@ SScrollArea {
     &[headerHeight] {
       scroll-padding-top: var(--headerHeight);
     }
+    &[leftScrollPadding] {
+      scroll-padding-left: var(--leftScrollPadding);
+    }
+    &[rightScrollPadding] {
+      scroll-padding-right: var(--rightScrollPadding);
+    }
   }
 
   SShadowVertical {

package/lib/types/components/Body/Body.types.d.ts

@@ -52,5 +52,6 @@ export type BodyPropsInner = DataTableBodyProps & {
     selectedRows?: number[];
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow, event?: React.SyntheticEvent<HTMLElement>) => void;
     renderEmptyData: () => React.ReactNode;
-    sideIndents?: 'l';
+    sideIndents?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 };

package/lib/types/components/Body/Row.types.d.ts

@@ -38,5 +38,6 @@ export type RowPropsInner = JSX.IntrinsicElements['div'] & {
     onBackFromAccordion: (colIndex: number) => void;
     scrollAreaRef: React.RefObject<HTMLDivElement>;
     uid: string;
-    sideIndents?: 'l';
+    sideIndents?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 };

package/lib/types/components/DataTable/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { DataTableProps, DataTableData } from './DataTable.types';
+import { DataTableProps, DataTableData, DataTableType } from './DataTable.types';
 import { Head } from '../Head/Head';
 import { Body } from '../Body/Body';
 export declare const ACCORDION: unique symbol;
@@ -6,7 +6,8 @@ export declare const ROW_GROUP: unique symbol;
 export declare const UNIQ_ROW_KEY: unique symbol;
 export declare const SELECT_ALL: unique symbol;
 export declare const ROW_INDEX: unique symbol;
-export declare const DataTable: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.EfficientOmit<import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>, "children" | "tag">) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
+export declare const DataTable: DataTableType;
+export declare const DataTableInternal: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.EfficientOmit<import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>, "tag" | "children">) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
     Head: typeof Head;
     Body: typeof Body;
 };

package/lib/types/components/DataTable/DataTable.types.d.ts

@@ -10,7 +10,7 @@ import { DTRow } from '../Body/Row.types';
  * Datatable must have an accessible name (aria-table-name).
  * It should describe table content.
  */
-type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+export type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
     'aria-label'?: string;
     'aria-labelledby'?: string;
     title?: string;
@@ -30,7 +30,7 @@ export interface DTValue {
 }
 export type DataTableData = DataRowItem[];
 export type DTUse = 'primary' | 'secondary';
-type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
+export type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
 export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes & {
     /** Data for table */
     data: D;
@@ -56,7 +56,7 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
     /**
      * Size of paddings for the first and last columns in the table
      */
-    sideIndents?: 'l';
+    sideIndents?: 'wide';
     /**
      * Flag for showing spinner on table body
      */
@@ -74,6 +74,10 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
          * @default false
          */
         sticky?: boolean;
+        /**
+         * Height of header in px. It's better to set it to improve performance with sticky header.
+         */
+        h?: number;
         /**
          * offset for sticky header
          */
@@ -92,6 +96,9 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
         isSelected: boolean;
         row: DTRow;
     }) => void;
+    /**
+     * For custom empty data widget.
+     */
     renderEmptyData?: () => React.ReactNode;
 };
 export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [

package/lib/types/components/Head/Column.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnGroupConfig, DataTableData, DataTableProps, DTUse, SortDirection } from '../DataTable/DataTable.types';
+import { ColumnGroupConfig, ColumnItemConfig, DataTableData, DataTableProps, DTUse, SortDirection } from '../DataTable/DataTable.types';
 import { Property } from 'csstype';
 export type CommonColumnType = {
     /**
@@ -35,25 +35,14 @@ export type CommonColumnType = {
      */
     justifyContent?: Property.JustifyContent;
 };
-export type DTColumn = CommonColumnType & {
-    ref: React.RefCallback<HTMLElement> & {
-        current: HTMLElement | null;
-    };
+export type DTColumn = ColumnItemConfig & CommonColumnType & {
     /**
      * Width for grid-template-columns
      */
-    gridColumnWidth: string;
-    /**
-     * Width of column by getBoundaryRect() value
-     */
-    calculatedWidth: number;
-    /**
-     * Height of column by getBoundaryRect() value
-     */
-    calculatedHeight: number;
+    gtcWidth: string;
     parent?: DTColumn | ColumnGroupConfig;
     columns?: DTColumn[];
-    children: React.ReactNode;
+    children?: React.ReactNode | React.FC;
     gridArea?: string;
 };
 export type DataTableColumnProps = CommonColumnType & {

package/lib/types/components/Head/Head.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Intergalactic } from '@semcore/core';
 import { DataTableHeadProps } from './Head.types';
-import Tooltip from '@semcore/tooltip';
+import type Tooltip from '@semcore/tooltip';
 import { DataTableColumnProps } from './Column.types';
 import { DataTableGroupProps } from './Group.type';
 export declare const Head: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableHeadProps = DataTableHeadProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableHeadProps, {}, never[]> & {
@@ -46,7 +46,7 @@ export declare const Head: (<Tag extends Intergalactic.InternalTypings.Component
             disableEnforceFocus?: boolean | undefined;
         } & {
             title?: React.ReactNode;
-            theme?: "warning" | "default" | "invert" | undefined;
+            theme?: "default" | "warning" | "invert" | undefined;
             interaction?: "none" | "hover" | "click" | "focus" | import("@semcore/base-components").eventInteraction | undefined;
         } & import("@semcore/tooltip").ArrowCustom, import("@semcore/base-components").PopperContext, never[]>;
     }) = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag_1, "div", DataTableColumnProps, {}, []>) => Intergalactic.InternalTypings.ComponentRenderingResults;
@@ -91,7 +91,7 @@ export declare const Head: (<Tag extends Intergalactic.InternalTypings.Component
             disableEnforceFocus?: boolean | undefined;
         } & {
             title?: React.ReactNode;
-            theme?: "warning" | "default" | "invert" | undefined;
+            theme?: "default" | "warning" | "invert" | undefined;
             interaction?: "none" | "hover" | "click" | "focus" | import("@semcore/base-components").eventInteraction | undefined;
         } & import("@semcore/tooltip").ArrowCustom, import("@semcore/base-components").PopperContext, never[]>;
     }) = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag_3, "div", DataTableGroupProps, {}, []>) => Intergalactic.InternalTypings.ComponentRenderingResults;

package/lib/types/components/Head/Head.types.d.ts

@@ -11,6 +11,10 @@ export type DataTableHeadProps = {
      * offset for sticky header
      */
     top?: number;
+    /**
+     * Height of header in px
+     */
+    h?: number;
     /** Enable scroll bar element in header */
     withScrollBar?: boolean;
 };
@@ -28,8 +32,9 @@ export type HeadPropsInner<D extends DataTableData> = {
     gridAreaGroupMap: Map<number, string>;
     gridTemplateColumns: string[];
     gridTemplateAreas: string[];
-    sideIndents?: 'l';
+    sideIndents?: 'wide';
     totalRows: number;
     selectedRows?: number[];
     onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.0.0",
+  "version": "16.0.1-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.0.0",
-    "@semcore/button": "16.0.0",
-    "@semcore/checkbox": "16.0.0",
-    "@semcore/flex-box": "16.0.0",
-    "@semcore/scroll-area": "16.0.0",
-    "@semcore/spin": "16.0.0",
-    "@semcore/tooltip": "16.0.0",
-    "@semcore/widget-empty": "16.0.0"
+    "@semcore/icon": "16.0.0-prerelease.0",
+    "@semcore/button": "16.0.0-prerelease.0",
+    "@semcore/checkbox": "16.0.0-prerelease.0",
+    "@semcore/flex-box": "16.0.0-prerelease.0",
+    "@semcore/scroll-area": "16.0.0-prerelease.0",
+    "@semcore/spin": "16.0.0-prerelease.0",
+    "@semcore/tooltip": "16.0.0-prerelease.0",
+    "@semcore/widget-empty": "16.0.0-prerelease.0"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -41,7 +41,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",

package/lib/cjs/utils.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getScrollOffsetValue = exports.getFixedStyle = exports.flattenColumns = exports.createCssVarForWidth = void 0;
-var getScrollOffsetValue = function getScrollOffsetValue(columns) {
-  return columns.reduce(function (acc, column) {
-    if (column.fixed === 'left') {
-      acc[0] += column.calculatedWidth;
-    }
-    if (column.fixed === 'right') {
-      acc[1] += column.calculatedWidth;
-    }
-    return acc;
-  }, [0, 0]);
-};
-exports.getScrollOffsetValue = getScrollOffsetValue;
-var cssVarReg = /[:;\W]/g;
-var createCssVarForWidth = function createCssVarForWidth(name) {
-  return "--".concat(name.replace(cssVarReg, '_'), "_width");
-};
-
-/**
- * todo: Remove after v16
- */
-exports.createCssVarForWidth = createCssVarForWidth;
-var flattenColumns = function flattenColumns(columns) {
-  return columns.reduce(function (acc, column) {
-    var hasNestedColumns = 'columns' in column && column.columns.length > 0;
-    var columns = hasNestedColumns ? flattenColumns(column.columns) : [column];
-    acc = acc.concat(columns);
-    return acc;
-  }, []);
-};
-exports.flattenColumns = flattenColumns;
-var getFixedStyle = function getFixedStyle(cell, columns) {
-  var side = cell.fixed;
-  if (!side) return [undefined, undefined];
-  var names = cell.name.split('/');
-  var nameSideMap = {
-    left: names[0],
-    right: names[names.length - 1]
-  };
-  var name = nameSideMap[side];
-  var index = columns.findIndex(function (column) {
-    return column.name === name;
-  });
-  if (index === -1) return [undefined, undefined];
-  var startIndexSideMap = {
-    left: 0,
-    right: index + 1
-  };
-  var endIndexSideMap = {
-    left: index,
-    right: columns.length
-  };
-  var columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
-  if (columnsFixed.length < 1) return [side, 0];
-  var sum = columnsFixed.reduce(function (acc, column) {
-    return acc + column.calculatedWidth;
-  }, 0);
-  return [side, "".concat(sum, "px")];
-};
-exports.getFixedStyle = getFixedStyle;
-//# sourceMappingURL=utils.js.map

package/lib/cjs/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","calculatedWidth","exports","cssVarReg","createCssVarForWidth","name","concat","replace","flattenColumns","hasNestedColumns","length","getFixedStyle","cell","side","undefined","names","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","sum"],"sources":["../../src/utils.ts"],"sourcesContent":["import type { DTColumn } from './components/Head/Column.types';\n\nexport const getScrollOffsetValue = (columns: DTColumn[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.calculatedWidth;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.calculatedWidth;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nconst cssVarReg = /[:;\\W]/g;\n\nexport const createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\n/**\n * todo: Remove after v16\n */\nexport const flattenColumns = (columns: any[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: any[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as any[]);\n\nexport const getFixedStyle = (\n  cell: Pick<DTColumn, 'name' | 'fixed'>,\n  columns: DTColumn[],\n): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {\n  const side = cell.fixed;\n  if (!side) return [undefined, undefined];\n  const names = cell.name.split('/');\n  const nameSideMap = {\n    left: names[0],\n    right: names[names.length - 1],\n  };\n  const name = nameSideMap[side];\n  const index = columns.findIndex((column) => column.name === name);\n\n  if (index === -1) return [undefined, undefined];\n\n  const startIndexSideMap = {\n    left: 0,\n    right: index + 1,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const sum = columnsFixed.reduce((acc, column) => acc + column.calculatedWidth, 0);\n  return [side, `${sum}px`];\n};\n"],"mappings":"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"}