@semcore/data-table 2.1.0 → 2.2.0

package/lib/es6/DataTable.js

@@ -40,43 +40,45 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SDataTable_3r9at_gg_{position:relative}.___SHeadWrapper_3r9at_gg_{position:relative}.___SHeadWrapper_3r9at_gg_.__sticky_3r9at_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_3r9at_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_3r9at_gg_{display:flex;flex-grow:1;font-size:12px;line-height:18px;color:#333333;box-sizing:border-box;position:relative}.___SColumn_3r9at_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_3r9at_gg_.__hidden_3r9at_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_3r9at_gg_._use_primary_3r9at_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_3r9at_gg_._use_secondary_3r9at_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:#fff}.___SColumn_3r9at_gg_.__use_3r9at_gg_:last-child{border-right:none}.___SColumn_3r9at_gg_.__group_3r9at_gg_.__use_3r9at_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_3r9at_gg_.__groupHead_3r9at_gg_.__use_3r9at_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_3r9at_gg_.__groupHead_3r9at_gg_._use_primary_3r9at_gg_{border-bottom:1px solid #dee3e5}.___SColumn_3r9at_gg_.__groupHead_3r9at_gg_._use_secondary_3r9at_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_3r9at_gg_.__sortable_3r9at_gg_{cursor:pointer}.___SColumn_3r9at_gg_.__sortable_3r9at_gg_._use_primary_3r9at_gg_:hover{background-color:#e4e7e8}.___SColumn_3r9at_gg_.__active_3r9at_gg_._use_primary_3r9at_gg_{background-color:#e4e7e8}.___SColumn_3r9at_gg_.__resizable_3r9at_gg_:hover:after{background:#a6b0b3}.___SColumn_3r9at_gg_.__resizable_3r9at_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_3r9at_gg_.__fixed_3r9at_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_3r9at_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_3r9at_gg_.__active_3r9at_gg_{fill:#64787e}.___SBodyWrapper_3r9at_gg_{position:relative}.___SBody_3r9at_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_3r9at_gg_{display:flex;flex-direction:row;position:relative}.___SRow_3r9at_gg_:hover .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_),.___SRow_3r9at_gg_.__active_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#f6f7f7}.___SRow_3r9at_gg_._theme_muted_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#f2f3f4}.___SRow_3r9at_gg_:hover .___SCell_3r9at_gg_._theme_muted_3r9at_gg_,.___SRow_3r9at_gg_._theme_muted_3r9at_gg_:hover .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_),.___SRow_3r9at_gg_._theme_muted_3r9at_gg_.__active_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#f6f7f7}.___SRow_3r9at_gg_._theme_info_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#d5eaf9}.___SRow_3r9at_gg_:hover .___SCell_3r9at_gg_._theme_info_3r9at_gg_,.___SRow_3r9at_gg_._theme_info_3r9at_gg_:hover .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_),.___SRow_3r9at_gg_._theme_info_3r9at_gg_.__active_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#cae4f8}.___SRow_3r9at_gg_._theme_success_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#e5f3e0}.___SRow_3r9at_gg_:hover .___SCell_3r9at_gg_._theme_success_3r9at_gg_,.___SRow_3r9at_gg_._theme_success_3r9at_gg_:hover .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_),.___SRow_3r9at_gg_._theme_success_3r9at_gg_.__active_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#dcefd6}.___SRow_3r9at_gg_._theme_warning_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#fef3e6}.___SRow_3r9at_gg_:hover .___SCell_3r9at_gg_._theme_warning_3r9at_gg_,.___SRow_3r9at_gg_._theme_warning_3r9at_gg_:hover .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_),.___SRow_3r9at_gg_._theme_warning_3r9at_gg_.__active_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#feefde}.___SRow_3r9at_gg_._theme_danger_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#fdeaea}.___SRow_3r9at_gg_:hover .___SCell_3r9at_gg_._theme_danger_3r9at_gg_,.___SRow_3r9at_gg_._theme_danger_3r9at_gg_:hover .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_),.___SRow_3r9at_gg_._theme_danger_3r9at_gg_.__active_3r9at_gg_ .___SCell_3r9at_gg_:not(.__theme_3r9at_gg_){background-color:#fce0e0}.___SCell_3r9at_gg_{display:flex;flex:1;font-size:14px;color:#333333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_3r9at_gg_._use_primary_3r9at_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_3r9at_gg_._use_secondary_3r9at_gg_{padding:8px;min-height:37px;background-color:#fff}.___SCell_3r9at_gg_.__fixed_3r9at_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_3r9at_gg_._theme_muted_3r9at_gg_{background-color:#f2f3f4}.___SCell_3r9at_gg_._theme_info_3r9at_gg_{background-color:#d5eaf9}.___SCell_3r9at_gg_._theme_success_3r9at_gg_{background-color:#e5f3e0}.___SCell_3r9at_gg_._theme_warning_3r9at_gg_{background-color:#fef3e6}.___SCell_3r9at_gg_._theme_danger_3r9at_gg_{background-color:#fdeaea}.___SScrollAreaBar_3r9at_gg_._orientation_horizontal_3r9at_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_3r9at_gg_._orientation_vertical_3r9at_gg_{width:12px}.___SScrollAreaBar_3r9at_gg_._orientation_horizontal_3r9at_gg_{margin-left:calc(var(--left_1jyhdcr) + 4px);margin-right:calc(var(--right_1jyhdcr) + 4px);width:calc(100% - var(--offsetSum_1jyhdcr) - 8px)}"
+".___SDataTable_129rn_gg_{position:relative}.___SHeadWrapper_129rn_gg_{position:relative}.___SHeadWrapper_129rn_gg_.__sticky_129rn_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_129rn_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_129rn_gg_{display:flex;flex-grow:1;font-size:12px;line-height:18px;color:#333333;box-sizing:border-box;position:relative}.___SColumn_129rn_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_129rn_gg_.__hidden_129rn_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_129rn_gg_._use_primary_129rn_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_129rn_gg_._use_secondary_129rn_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:#fff}.___SColumn_129rn_gg_.__use_129rn_gg_:last-child{border-right:none}.___SColumn_129rn_gg_.__group_129rn_gg_.__use_129rn_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_129rn_gg_.__groupHead_129rn_gg_.__use_129rn_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_129rn_gg_.__groupHead_129rn_gg_._use_primary_129rn_gg_{border-bottom:1px solid #dee3e5}.___SColumn_129rn_gg_.__groupHead_129rn_gg_._use_secondary_129rn_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_129rn_gg_.__sortable_129rn_gg_{cursor:pointer}.___SColumn_129rn_gg_.__sortable_129rn_gg_._use_primary_129rn_gg_:hover{background-color:#e4e7e8}.___SColumn_129rn_gg_.__active_129rn_gg_._use_primary_129rn_gg_{background-color:#e4e7e8}.___SColumn_129rn_gg_.__resizable_129rn_gg_:hover:after{background:#a6b0b3}.___SColumn_129rn_gg_.__resizable_129rn_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_129rn_gg_.__fixed_129rn_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_129rn_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_129rn_gg_.__active_129rn_gg_{fill:#64787e}.___SBodyWrapper_129rn_gg_{position:relative}.___SBody_129rn_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_129rn_gg_{display:flex;flex-direction:row;position:relative}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#f6f7f7}.___SRow_129rn_gg_._theme_muted_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#f2f3f4}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_muted_129rn_gg_,.___SRow_129rn_gg_._theme_muted_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_muted_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#f6f7f7}.___SRow_129rn_gg_._theme_info_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#d5eaf9}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_info_129rn_gg_,.___SRow_129rn_gg_._theme_info_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_info_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#cae4f8}.___SRow_129rn_gg_._theme_success_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#e5f3e0}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_success_129rn_gg_,.___SRow_129rn_gg_._theme_success_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_success_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#dcefd6}.___SRow_129rn_gg_._theme_warning_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#fef3e6}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_warning_129rn_gg_,.___SRow_129rn_gg_._theme_warning_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_warning_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#feefde}.___SRow_129rn_gg_._theme_danger_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#fdeaea}.___SRow_129rn_gg_:hover .___SCell_129rn_gg_._theme_danger_129rn_gg_,.___SRow_129rn_gg_._theme_danger_129rn_gg_:hover .___SCell_129rn_gg_:not(.__theme_129rn_gg_),.___SRow_129rn_gg_._theme_danger_129rn_gg_.__active_129rn_gg_ .___SCell_129rn_gg_:not(.__theme_129rn_gg_){background-color:#fce0e0}.___SRow_129rn_gg_.__positioned_129rn_gg_{position:absolute}.___SCell_129rn_gg_{display:flex;flex:1;font-size:14px;color:#333333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_129rn_gg_._use_primary_129rn_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_129rn_gg_._use_secondary_129rn_gg_{padding:8px;min-height:37px;background-color:#fff}.___SCell_129rn_gg_.__fixed_129rn_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_129rn_gg_._theme_muted_129rn_gg_{background-color:#f2f3f4}.___SCell_129rn_gg_._theme_info_129rn_gg_{background-color:#d5eaf9}.___SCell_129rn_gg_._theme_success_129rn_gg_{background-color:#e5f3e0}.___SCell_129rn_gg_._theme_warning_129rn_gg_{background-color:#fef3e6}.___SCell_129rn_gg_._theme_danger_129rn_gg_{background-color:#fdeaea}.___SScrollAreaBar_129rn_gg_._orientation_horizontal_129rn_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_129rn_gg_._orientation_vertical_129rn_gg_{width:12px}.___SScrollAreaBar_129rn_gg_._orientation_horizontal_129rn_gg_{margin-left:calc(var(--left_n8z383) + 4px);margin-right:calc(var(--right_n8z383) + 4px);width:calc(100% - var(--offsetSum_n8z383) - 8px)}.___SHeightHold_129rn_gg_{position:absolute;top:0;width:100px}"
 /*__inner_css_end__*/
-, "1jyhdcr_gg_")
+, "n8z383_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SDataTable": "___SDataTable_3r9at_gg_",
-  "__SHeadWrapper": "___SHeadWrapper_3r9at_gg_",
-  "_sticky": "__sticky_3r9at_gg_",
-  "__SHead": "___SHead_3r9at_gg_",
-  "__SColumn": "___SColumn_3r9at_gg_",
-  "_hidden": "__hidden_3r9at_gg_",
-  "_use_primary": "_use_primary_3r9at_gg_",
-  "_use_secondary": "_use_secondary_3r9at_gg_",
-  "_use": "__use_3r9at_gg_",
-  "_group": "__group_3r9at_gg_",
-  "_groupHead": "__groupHead_3r9at_gg_",
-  "_sortable": "__sortable_3r9at_gg_",
-  "_active": "__active_3r9at_gg_",
-  "_resizable": "__resizable_3r9at_gg_",
-  "_fixed": "__fixed_3r9at_gg_",
-  "__SSortIcon": "___SSortIcon_3r9at_gg_",
-  "__SBodyWrapper": "___SBodyWrapper_3r9at_gg_",
-  "__SBody": "___SBody_3r9at_gg_",
-  "__SRow": "___SRow_3r9at_gg_",
-  "__SCell": "___SCell_3r9at_gg_",
-  "_theme": "__theme_3r9at_gg_",
-  "_theme_muted": "_theme_muted_3r9at_gg_",
-  "_theme_info": "_theme_info_3r9at_gg_",
-  "_theme_success": "_theme_success_3r9at_gg_",
-  "_theme_warning": "_theme_warning_3r9at_gg_",
-  "_theme_danger": "_theme_danger_3r9at_gg_",
-  "__SScrollAreaBar": "___SScrollAreaBar_3r9at_gg_",
-  "_orientation_horizontal": "_orientation_horizontal_3r9at_gg_",
-  "_orientation_vertical": "_orientation_vertical_3r9at_gg_",
-  "--left": "--left_1jyhdcr",
-  "--right": "--right_1jyhdcr",
-  "--offsetSum": "--offsetSum_1jyhdcr"
+  "__SDataTable": "___SDataTable_129rn_gg_",
+  "__SHeadWrapper": "___SHeadWrapper_129rn_gg_",
+  "_sticky": "__sticky_129rn_gg_",
+  "__SHead": "___SHead_129rn_gg_",
+  "__SColumn": "___SColumn_129rn_gg_",
+  "_hidden": "__hidden_129rn_gg_",
+  "_use_primary": "_use_primary_129rn_gg_",
+  "_use_secondary": "_use_secondary_129rn_gg_",
+  "_use": "__use_129rn_gg_",
+  "_group": "__group_129rn_gg_",
+  "_groupHead": "__groupHead_129rn_gg_",
+  "_sortable": "__sortable_129rn_gg_",
+  "_active": "__active_129rn_gg_",
+  "_resizable": "__resizable_129rn_gg_",
+  "_fixed": "__fixed_129rn_gg_",
+  "__SSortIcon": "___SSortIcon_129rn_gg_",
+  "__SBodyWrapper": "___SBodyWrapper_129rn_gg_",
+  "__SBody": "___SBody_129rn_gg_",
+  "__SRow": "___SRow_129rn_gg_",
+  "__SCell": "___SCell_129rn_gg_",
+  "_theme": "__theme_129rn_gg_",
+  "_theme_muted": "_theme_muted_129rn_gg_",
+  "_theme_info": "_theme_info_129rn_gg_",
+  "_theme_success": "_theme_success_129rn_gg_",
+  "_theme_warning": "_theme_warning_129rn_gg_",
+  "_theme_danger": "_theme_danger_129rn_gg_",
+  "_positioned": "__positioned_129rn_gg_",
+  "__SScrollAreaBar": "___SScrollAreaBar_129rn_gg_",
+  "_orientation_horizontal": "_orientation_horizontal_129rn_gg_",
+  "_orientation_vertical": "_orientation_vertical_129rn_gg_",
+  "--left": "--left_n8z383",
+  "--right": "--right_n8z383",
+  "--offsetSum": "--offsetSum_n8z383",
+  "__SHeightHold": "___SHeightHold_129rn_gg_"
 });
 var REVERSED_SORT_DIRECTION = {
   desc: 'asc',
@@ -104,7 +106,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "columns", []);
 
-    _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "tableRef", React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "scrollBodyRef", null);
 
@@ -123,9 +125,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "scrollToUp", function () {
-      var _this$tableRef, _this$tableRef$curren;
-
-      (_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : (_this$tableRef$curren = _this$tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.scrollIntoView({
+      _this.tableRef?.current?.scrollIntoView({
         block: 'nearest',
         inline: 'nearest',
         behavior: 'smooth'
@@ -155,10 +155,8 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
 
             try {
               for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                var _this$tableRef$curren2;
-
                 var cssVar = _step2.value;
-                (_this$tableRef$curren2 = this.tableRef.current) === null || _this$tableRef$curren2 === void 0 ? void 0 : _this$tableRef$curren2.style.setProperty(cssVar, "".concat(_column.width, "px"));
+                this.tableRef.current?.style.setProperty(cssVar, "".concat(_column.width, "px"));
               }
             } catch (err) {
               _iterator2.e(err);
@@ -166,9 +164,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
               _iterator2.f();
             }
           } else {
-            var _this$tableRef$curren3;
-
-            (_this$tableRef$curren3 = this.tableRef.current) === null || _this$tableRef$curren3 === void 0 ? void 0 : _this$tableRef$curren3.style.setProperty(_column.cssVar, "".concat(_column.width, "px"));
+            this.tableRef.current?.style.setProperty(_column.cssVar, "".concat(_column.width, "px"));
           }
         }
       } catch (err) {
@@ -188,9 +184,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
       var sort = this.asProps.sort;
       var columnsChildren = [];
       React.Children.forEach(children, function (child) {
-        var _column$props;
-
-        if (! /*#__PURE__*/React.isValidElement(child)) return;
+        if (!React.isValidElement(child)) return;
         if (child.type !== DefinitionTable.Column) return;
 
         var _ref3 = child.props,
@@ -215,7 +209,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
           }).join('/');
           if (!columns.length) return;
           children = React.Children.toArray(children).filter(function (child) {
-            return !( /*#__PURE__*/React.isValidElement(child) && child.type === DefinitionTable.Column);
+            return !(React.isValidElement(child) && child.type === DefinitionTable.Column);
           });
         }
 
@@ -225,9 +219,7 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
 
         columnsChildren.push({
           get width() {
-            var _this$props$ref$curre;
-
-            return ((_this$props$ref$curre = this.props.ref.current) === null || _this$props$ref$curre === void 0 ? void 0 : _this$props$ref$curre.getBoundingClientRect().width) || 0;
+            return this.props.ref.current?.getBoundingClientRect().width || 0;
           },
 
           name: name,
@@ -236,11 +228,11 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
           resizable: resizable,
           active: sort[0] === name,
           sortable: sortable,
-          sortDirection: sort[0] === name ? sort[1] : (column === null || column === void 0 ? void 0 : column.sortDirection) || (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
+          sortDirection: sort[0] === name ? sort[1] : column?.sortDirection || (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
           columns: columns,
           props: _objectSpread({
             name: name,
-            ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /*#__PURE__*/React.createRef(),
+            ref: column?.props?.ref || React.createRef(),
             children: children
           }, props)
         });
@@ -266,11 +258,12 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
     value: function getBodyProps(props) {
       var _this$asProps = this.asProps,
           data = _this$asProps.data,
-          use = _this$asProps.use;
+          use = _this$asProps.use,
+          uniqueKey = _this$asProps.uniqueKey;
       var cellPropsLayers = {};
       var rowPropsLayers = [];
       React.Children.forEach(props.children, function (child) {
-        if ( /*#__PURE__*/React.isValidElement(child)) {
+        if (React.isValidElement(child)) {
           var _ref5 = child.props,
               name = _ref5.name,
               children = _ref5.children,
@@ -292,13 +285,15 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
           }
         }
       });
-      return {
+      var result = {
         columns: this.columns,
         rows: this.dataToRows(data, cellPropsLayers),
+        uniqueKey: uniqueKey,
         use: use,
         rowPropsLayers: rowPropsLayers,
         $scrollRef: this.scrollBodyRef
       };
+      return result;
     }
   }, {
     key: "dataToRows",
@@ -425,6 +420,7 @@ _defineProperty(RootDefinitionTable, "style", style);
 
 _defineProperty(RootDefinitionTable, "defaultProps", {
   use: 'primary',
+  uniqueKey: 'id',
   sort: [],
   data: []
 });

package/lib/es6/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DataTable.tsx"],"names":["React","createComponent","Component","sstyled","Root","Box","syncScroll","callAllEventHandlers","fire","flattenColumns","Head","Body","REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","createRef","event","column","columns","find","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","scrollBodyRef","scrollHeadRef","Array","isArray","cssVar","style","setProperty","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","isGroup","childrenToColumns","map","join","length","toArray","filter","push","ref","getBoundingClientRect","use","$onSortClick","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","flatRowData","setVarStyle","SDataTable","styles","ComponentDefinition"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root, PropGetterFn } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n  RowData,\n  SortDirection,\n  PseudoChildPropsGetter,\n  PropsLayer,\n  NestedCells,\n  Column,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n  desc: 'asc',\n  asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n  use: 'primary' | 'secondary';\n  sort: SortDirection[];\n  data: RowData[];\n};\n\ntype HeadAsProps = {\n  children: React.ReactChild;\n};\ntype BodyAsProps = {\n  children: React.ReactChild;\n};\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\ntype ChildRenderFn<Props> = Props & {\n  children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/* utils type */\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' | 'asc'];\nexport type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';\nexport type DataTableUse = 'primary' | 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n  /** Name of column */\n  name: string;\n  /** Data of column */\n  data: React.ReactNode;\n  [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n  /** Theme for table\n   * @default primary\n   * */\n  use?: DataTableUse;\n  /** Data for table */\n  data?: DataTableData[];\n  /** Active sort object */\n  sort?: DataTableSort;\n  /** Handler call when will request change sort */\n  onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n  /** Sticky header table\n   * @deprecated\n   * */\n  sticky?: boolean;\n\n  /** Hidden header */\n  hidden?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n  /** Unique name column */\n  name?: string;\n  /** Enable sort for column also if you pass string you can set default sort */\n  sortable?: boolean | 'desc' | 'asc';\n  /** Enable resize for column\n   * @ignore */\n  resizable?: boolean;\n  /** Fixed column on the left/right */\n  fixed?: 'left' | 'right';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n  /** Rows table */\n  rows?: DataTableRow[];\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n  /** Theme for row */\n  theme?: DataTableTheme;\n  /** Displays row as active/hover */\n  active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n  /** Unique name column or columns separated by / */\n  name: string;\n  /** Theme for cell */\n  theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n  static displayName = 'DefinitionTable';\n\n  static style = style;\n\n  static defaultProps = {\n    use: 'primary',\n    sort: [],\n    data: [],\n  } as AsProps;\n\n  columns: Column[] = [];\n\n  tableRef = React.createRef<HTMLElement>();\n  scrollBodyRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n  scrollHeadRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n\n  constructor(props: AsProps) {\n    super(props);\n\n    const createRef = syncScroll();\n    // first create body ref for master scroll\n    this.scrollBodyRef = createRef('body');\n    this.scrollHeadRef = createRef('head');\n  }\n\n  handlerSortClick = (name: string, event: React.MouseEvent) => {\n    const column = this.columns.find((column) => column.name === name)!;\n    return fire(\n      this,\n      'onSortChange',\n      [\n        column.name,\n        column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n      ],\n      event,\n    );\n  };\n\n  handlerResize = () => {\n    this.forceUpdate();\n  };\n\n  scrollToUp = () => {\n    this.tableRef?.current?.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n      behavior: 'smooth',\n    });\n  };\n\n  setVarStyle(columns: Column[]) {\n    for (const column of columns) {\n      if (Array.isArray(column.cssVar)) {\n        for (const cssVar of column.cssVar) {\n          this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);\n        }\n      } else {\n        this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);\n      }\n    }\n  }\n\n  childrenToColumns(\n    children: React.ReactNode,\n    options: { fixed?: 'left' | 'right' } = { fixed: undefined },\n  ) {\n    const { sort } = this.asProps;\n    const columnsChildren: Column[] = [];\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type !== DefinitionTable.Column) return;\n\n      let {\n        children,\n        name,\n        fixed = options.fixed,\n        resizable,\n        sortable,\n        ...props\n      } = child.props as Column['props'];\n      const isGroup = !name;\n      let columns: Column[] = [];\n\n      if (isGroup) {\n        columns = this.childrenToColumns(children, { fixed });\n        name = flattenColumns(columns)\n          .map(({ name }) => name)\n          .join('/');\n        if (!columns.length) return;\n        children = React.Children.toArray(children).filter(\n          (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n        );\n      }\n\n      const column = this.columns.find((column) => column.name === name);\n\n      columnsChildren.push({\n        get width() {\n          return this.props.ref.current?.getBoundingClientRect().width || 0;\n        },\n        name,\n        cssVar: createCssVarForWidth(name),\n        fixed,\n        resizable,\n        active: sort[0] === name,\n        sortable,\n        sortDirection:\n          sort[0] === name\n            ? sort[1]\n            : column?.sortDirection ||\n              (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n        columns,\n        props: {\n          name,\n          ref: column?.props?.ref || React.createRef(),\n          children,\n          ...props,\n        },\n      });\n    });\n    return columnsChildren;\n  }\n\n  getHeadProps(props: HeadAsProps) {\n    const { use } = this.asProps;\n    const columnsChildren = this.childrenToColumns(props.children);\n    this.columns = flattenColumns(columnsChildren);\n    return {\n      $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n      columnsChildren,\n      use,\n      onResize: this.handlerResize,\n      $scrollRef: this.scrollHeadRef,\n    };\n  }\n\n  getBodyProps(props: BodyAsProps) {\n    const { data, use } = this.asProps;\n\n    const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n    const rowPropsLayers: PropsLayer[] = [];\n\n    React.Children.forEach(props.children, (child) => {\n      if (React.isValidElement(child)) {\n        const { name, children, ...other } = child.props as {\n          name?: string;\n          children?: PseudoChildPropsGetter;\n        } & { [propName: string]: unknown };\n        if (child.type === DefinitionTable.Cell && name) {\n          name.split('/').forEach((name) => {\n            cellPropsLayers[name] = cellPropsLayers[name] || [];\n            cellPropsLayers[name].push({\n              ...other,\n              childrenPropsGetter: children,\n            });\n          });\n        }\n        if (child.type === DefinitionTable.Row) {\n          rowPropsLayers.push({\n            ...other,\n            childrenPropsGetter: children,\n          });\n        }\n      }\n    });\n\n    return {\n      columns: this.columns,\n      rows: this.dataToRows(data, cellPropsLayers),\n      use,\n      rowPropsLayers,\n      $scrollRef: this.scrollBodyRef,\n    };\n  }\n\n  dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n    const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n      data.map((row) => {\n        const groupByName: {\n          [columnName: string]: {\n            groupedColumns: string[];\n            groupData: { [columnName: string]: unknown };\n          };\n        } = {};\n        const groupedColumns: { [columnname: string]: true } = {};\n        const ungroupedColumns: { [columnname: string]: true } = {};\n        for (const rowKey in row) {\n          const columnNames = rowKey.split('/');\n          if (columnNames.length >= 2) {\n            for (const column of columnNames) {\n              groupByName[column] = {\n                groupedColumns: columnNames,\n                groupData: row[rowKey] as { [columnName: string]: unknown },\n              };\n              groupedColumns[rowKey] = true;\n            }\n          } else {\n            ungroupedColumns[rowKey] = true;\n          }\n        }\n        const rowsGroup = row[ROW_GROUP] || [];\n        const rowsGroupedNames = Object.fromEntries(\n          rowsGroup\n            .map((subRow) => Object.keys(subRow))\n            .flat()\n            .map((key) => [key, true]),\n        );\n\n        let isGroup = false;\n\n        const cells: NestedCells = this.columns\n          .map((column) => {\n            if (groupByName[column.name]) {\n              const { groupedColumns, groupData } = groupByName[column.name];\n              if (groupedColumns[0] === column.name) {\n                return {\n                  name: groupedColumns.join('/'),\n                  cssVar: groupedColumns.map(createCssVarForWidth),\n                  fixed: column.fixed,\n                  data: groupData,\n                  cellPropsLayers: cellPropsLayers[column.name] || [],\n                };\n              }\n            } else if (column.name in row) {\n              return {\n                name: column.name,\n                cssVar: column.cssVar,\n                fixed: column.fixed,\n                data: row[column.name],\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            } else if (!isGroup && rowsGroupedNames[column.name]) {\n              // TODO: make it work not only with first group\n              isGroup = true;\n              return parseData(rowsGroup, {\n                ...ungroupedColumns,\n                ...groupedColumns,\n              });\n            } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n              return {\n                name: column.name,\n                cssVar: column.cssVar,\n                fixed: column.fixed,\n                data: null,\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            }\n          })\n          .filter((column) => column !== undefined)\n          .map((column) => column!);\n\n        cells.flatRowData = row;\n        return cells;\n      });\n\n    return parseData(data, {});\n  }\n\n  componentDidUpdate() {\n    this.setVarStyle(this.columns);\n  }\n\n  render() {\n    const SDataTable = Root;\n    const { Children, styles } = this.asProps;\n\n    return sstyled(styles)(\n      <SDataTable render={Box} __excludeProps={['data']} ref={this.tableRef}>\n        <Children />\n      </SDataTable>,\n    );\n  }\n}\n\ninterface IDataTableCtx {\n  getHeadProps: PropGetterFn;\n  getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n  return null;\n}\n\nconst DefinitionTable = createComponent(\n  RootDefinitionTable,\n  {\n    Head,\n    Body,\n    Column: ComponentDefinition,\n    Cell: ComponentDefinition,\n    Row: ComponentDefinition,\n  },\n  {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n  Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n  Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n  Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n  Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n  Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"file":"DataTable.js"}
+{"version":3,"sources":["../../src/DataTable.tsx"],"names":["React","createComponent","Component","sstyled","Root","Box","syncScroll","callAllEventHandlers","fire","flattenColumns","Head","Body","REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","createRef","event","column","columns","find","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","scrollBodyRef","scrollHeadRef","Array","isArray","cssVar","style","setProperty","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","isGroup","childrenToColumns","map","join","length","toArray","filter","push","ref","getBoundingClientRect","use","$onSortClick","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","result","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","flatRowData","setVarStyle","SDataTable","styles","ComponentDefinition"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root, PropGetterFn } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n  RowData,\n  SortDirection,\n  PseudoChildPropsGetter,\n  PropsLayer,\n  NestedCells,\n  Column,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n  desc: 'asc',\n  asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n  use: 'primary' | 'secondary';\n  sort: SortDirection[];\n  data: RowData[];\n  uniqueKey: string;\n};\n\ntype HeadAsProps = {\n  children: React.ReactChild;\n};\ntype BodyAsProps = {\n  children: React.ReactChild;\n};\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\ntype ChildRenderFn<Props> = Props & {\n  children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/* utils type */\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' | 'asc'];\nexport type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';\nexport type DataTableUse = 'primary' | 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n  /** Name of column */\n  name: string;\n  /** Data of column */\n  data: React.ReactNode;\n  [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n  /** Theme for table\n   * @default primary\n   * */\n  use?: DataTableUse;\n  /** Data for table */\n  data?: DataTableData[];\n  /** Active sort object */\n  sort?: DataTableSort;\n  /** Handler call when will request change sort */\n  onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n  /** Field name in one data entity that is unique accross all set of data\n   * @default id\n   */\n  uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n  /** Sticky header table\n   * @deprecated\n   * */\n  sticky?: boolean;\n\n  /** Hidden header */\n  hidden?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n  /** Unique name column */\n  name?: string;\n  /** Enable sort for column also if you pass string you can set default sort */\n  sortable?: boolean | 'desc' | 'asc';\n  /** Enable resize for column\n   * @ignore */\n  resizable?: boolean;\n  /** Fixed column on the left/right */\n  fixed?: 'left' | 'right';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n  /** Rows table */\n  rows?: DataTableRow[];\n  /** When enabled, only visually acessable rows are rendered.\n   * `tollerance` property controls how many rows outside of viewport are render.\n   * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.\n   * @default { tollerance: 2 }\n   */\n  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n  /** Theme for row */\n  theme?: DataTableTheme;\n  /** Displays row as active/hover */\n  active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n  /** Unique name column or columns separated by / */\n  name: string;\n  /** Theme for cell */\n  theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n  static displayName = 'DefinitionTable';\n\n  static style = style;\n\n  static defaultProps = {\n    use: 'primary',\n    uniqueKey: 'id',\n    sort: [],\n    data: [],\n  } as AsProps;\n\n  columns: Column[] = [];\n\n  tableRef = React.createRef<HTMLElement>();\n  scrollBodyRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n  scrollHeadRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;\n\n  constructor(props: AsProps) {\n    super(props);\n\n    const createRef = syncScroll();\n    // first create body ref for master scroll\n    this.scrollBodyRef = createRef('body');\n    this.scrollHeadRef = createRef('head');\n  }\n\n  handlerSortClick = (name: string, event: React.MouseEvent) => {\n    const column = this.columns.find((column) => column.name === name)!;\n    return fire(\n      this,\n      'onSortChange',\n      [\n        column.name,\n        column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n      ],\n      event,\n    );\n  };\n\n  handlerResize = () => {\n    this.forceUpdate();\n  };\n\n  scrollToUp = () => {\n    this.tableRef?.current?.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n      behavior: 'smooth',\n    });\n  };\n\n  setVarStyle(columns: Column[]) {\n    for (const column of columns) {\n      if (Array.isArray(column.cssVar)) {\n        for (const cssVar of column.cssVar) {\n          this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);\n        }\n      } else {\n        this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);\n      }\n    }\n  }\n\n  childrenToColumns(\n    children: React.ReactNode,\n    options: { fixed?: 'left' | 'right' } = { fixed: undefined },\n  ) {\n    const { sort } = this.asProps;\n    const columnsChildren: Column[] = [];\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type !== DefinitionTable.Column) return;\n\n      let {\n        children,\n        name,\n        fixed = options.fixed,\n        resizable,\n        sortable,\n        ...props\n      } = child.props as Column['props'];\n      const isGroup = !name;\n      let columns: Column[] = [];\n\n      if (isGroup) {\n        columns = this.childrenToColumns(children, { fixed });\n        name = flattenColumns(columns)\n          .map(({ name }) => name)\n          .join('/');\n        if (!columns.length) return;\n        children = React.Children.toArray(children).filter(\n          (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n        );\n      }\n\n      const column = this.columns.find((column) => column.name === name);\n\n      columnsChildren.push({\n        get width() {\n          return this.props.ref.current?.getBoundingClientRect().width || 0;\n        },\n        name,\n        cssVar: createCssVarForWidth(name),\n        fixed,\n        resizable,\n        active: sort[0] === name,\n        sortable,\n        sortDirection:\n          sort[0] === name\n            ? sort[1]\n            : column?.sortDirection ||\n              (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n        columns,\n        props: {\n          name,\n          ref: column?.props?.ref || React.createRef(),\n          children,\n          ...props,\n        },\n      });\n    });\n    return columnsChildren;\n  }\n\n  getHeadProps(props: HeadAsProps) {\n    const { use } = this.asProps;\n    const columnsChildren = this.childrenToColumns(props.children);\n    this.columns = flattenColumns(columnsChildren);\n    return {\n      $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n      columnsChildren,\n      use,\n      onResize: this.handlerResize,\n      $scrollRef: this.scrollHeadRef,\n    };\n  }\n\n  getBodyProps(props: BodyAsProps) {\n    const { data, use, uniqueKey } = this.asProps;\n\n    const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n    const rowPropsLayers: PropsLayer[] = [];\n\n    React.Children.forEach(props.children, (child) => {\n      if (React.isValidElement(child)) {\n        const { name, children, ...other } = child.props as {\n          name?: string;\n          children?: PseudoChildPropsGetter;\n        } & { [propName: string]: unknown };\n        if (child.type === DefinitionTable.Cell && name) {\n          name.split('/').forEach((name) => {\n            cellPropsLayers[name] = cellPropsLayers[name] || [];\n            cellPropsLayers[name].push({\n              ...other,\n              childrenPropsGetter: children,\n            });\n          });\n        }\n        if (child.type === DefinitionTable.Row) {\n          rowPropsLayers.push({\n            ...other,\n            childrenPropsGetter: children,\n          });\n        }\n      }\n    });\n\n    const result = {\n      columns: this.columns,\n      rows: this.dataToRows(data, cellPropsLayers),\n      uniqueKey,\n      use,\n      rowPropsLayers,\n      $scrollRef: this.scrollBodyRef,\n    };\n\n    return result;\n  }\n\n  dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n    const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n      data.map((row) => {\n        const groupByName: {\n          [columnName: string]: {\n            groupedColumns: string[];\n            groupData: { [columnName: string]: unknown };\n          };\n        } = {};\n        const groupedColumns: { [columnname: string]: true } = {};\n        const ungroupedColumns: { [columnname: string]: true } = {};\n        for (const rowKey in row) {\n          const columnNames = rowKey.split('/');\n          if (columnNames.length >= 2) {\n            for (const column of columnNames) {\n              groupByName[column] = {\n                groupedColumns: columnNames,\n                groupData: row[rowKey] as { [columnName: string]: unknown },\n              };\n              groupedColumns[rowKey] = true;\n            }\n          } else {\n            ungroupedColumns[rowKey] = true;\n          }\n        }\n        const rowsGroup = row[ROW_GROUP] || [];\n        const rowsGroupedNames = Object.fromEntries(\n          rowsGroup\n            .map((subRow) => Object.keys(subRow))\n            .flat()\n            .map((key) => [key, true]),\n        );\n\n        let isGroup = false;\n\n        const cells: NestedCells = this.columns\n          .map((column) => {\n            if (groupByName[column.name]) {\n              const { groupedColumns, groupData } = groupByName[column.name];\n              if (groupedColumns[0] === column.name) {\n                return {\n                  name: groupedColumns.join('/'),\n                  cssVar: groupedColumns.map(createCssVarForWidth),\n                  fixed: column.fixed,\n                  data: groupData,\n                  cellPropsLayers: cellPropsLayers[column.name] || [],\n                };\n              }\n            } else if (column.name in row) {\n              return {\n                name: column.name,\n                cssVar: column.cssVar,\n                fixed: column.fixed,\n                data: row[column.name],\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            } else if (!isGroup && rowsGroupedNames[column.name]) {\n              // TODO: make it work not only with first group\n              isGroup = true;\n              return parseData(rowsGroup, {\n                ...ungroupedColumns,\n                ...groupedColumns,\n              });\n            } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n              return {\n                name: column.name,\n                cssVar: column.cssVar,\n                fixed: column.fixed,\n                data: null,\n                cellPropsLayers: cellPropsLayers[column.name] || [],\n              };\n            }\n          })\n          .filter((column) => column !== undefined)\n          .map((column) => column!);\n\n        cells.flatRowData = row;\n        return cells;\n      });\n\n    return parseData(data, {});\n  }\n\n  componentDidUpdate() {\n    this.setVarStyle(this.columns);\n  }\n\n  render() {\n    const SDataTable = Root;\n    const { Children, styles } = this.asProps;\n\n    return sstyled(styles)(\n      <SDataTable render={Box} __excludeProps={['data']} ref={this.tableRef}>\n        <Children />\n      </SDataTable>,\n    );\n  }\n}\n\ninterface IDataTableCtx {\n  getHeadProps: PropGetterFn;\n  getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n  return null;\n}\n\nconst DefinitionTable = createComponent(\n  RootDefinitionTable,\n  {\n    Head,\n    Body,\n    Column: ComponentDefinition,\n    Cell: ComponentDefinition,\n    Row: ComponentDefinition,\n  },\n  {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n  Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n  Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n  Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n  Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n  Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"file":"DataTable.js"}

package/lib/es6/Head.js

@@ -93,7 +93,7 @@ var Head = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumn",
     value: function renderColumn(column, width) {
-      var _ref2, _column$columns;
+      var _ref2;
 
       var _this$asProps = this.asProps,
           styles = _this$asProps.styles,
@@ -102,7 +102,7 @@ var Head = /*#__PURE__*/function (_Component) {
       var SColumn = Flex;
       var SHead = Box;
       var SSortIcon = SORTING_ICON[column.sortDirection];
-      var isGroup = ((_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.length) > 0;
+      var isGroup = column.columns?.length > 0;
       var cSize = isGroup ? flattenColumns(column.columns).length : 1;
 
       var _getFixedStyle = getFixedStyle(column, this.columns),

package/lib/es6/Head.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Head.tsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport type ResizeObserverCallback from 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\n\ntype AsProps = {\n  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  $scrollRef: (instance: unknown) => void;\n  use: 'primary' | 'secondary';\n  columnsChildren: Column[];\n  onResize: ResizeObserverCallback;\n  sticky: boolean;\n  ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n    this.asProps.$onSortClick(name, event);\n  };\n\n  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  renderColumns(columns: Column[], width: number) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column: Column, width: number) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const isGroup = column.columns?.length > 0;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n\n    const style = {\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n    }\n\n    return sstyled(styles)(\n      <SColumn\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n      >\n        {isGroup ? (\n          <>\n            <SColumn groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n    const SHeadWrapper = Box;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky}>\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SHead render={Box}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"file":"Head.js"}
+{"version":3,"sources":["../../src/Head.tsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport type ResizeObserverCallback from 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\n\ntype AsProps = {\n  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  $scrollRef: (instance: unknown) => void;\n  use: 'primary' | 'secondary';\n  columnsChildren: Column[];\n  onResize: ResizeObserverCallback;\n  sticky: boolean;\n  ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n    this.asProps.$onSortClick(name, event);\n  };\n\n  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  renderColumns(columns: Column[], width: number) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column: Column, width: number) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const isGroup = column.columns?.length > 0;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n\n    const style = {\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n    }\n\n    return sstyled(styles)(\n      <SColumn\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n      >\n        {isGroup ? (\n          <>\n            <SColumn groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n    const SHeadWrapper = Box;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky}>\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SHead render={Box}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"file":"Head.js"}

package/lib/es6/style/data-table.shadow.css

@@ -209,6 +209,10 @@ SRow[theme='danger']:hover SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 85%));
 }
 
+SRow[positioned] {
+  position: absolute;
+}
+
 SCell {
   display: flex;
   flex: 1;
@@ -275,3 +279,10 @@ SScrollAreaBar[orientation='horizontal'] {
   margin-right: calc(var(--right) + 4px);
   width: calc(100% - var(--offsetSum) - 8px);
 }
+
+SHeightHold {
+  position: absolute;
+  top: 0;
+  width: 100px;
+  /* pointer-events: none; */
+}

package/lib/es6/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types.ts"],"names":["ROW_GROUP"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B","sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  cssVar: string | string[];\n  data?: unknown;\n  props: {\n    name: string;\n  } & Partial<{\n    onClick: (event: React.MouseEvent) => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    ref: React.RefObject<HTMLElement>;\n    style: React.CSSProperties;\n    fixed: 'left' | 'right';\n    children: React.ReactNode[];\n\n    resizable: boolean;\n    sortable: boolean | SortDirection;\n    sortDirection: SortDirection;\n  }> &\n    Props;\n  columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n"],"file":"types.js"}
+{"version":3,"sources":["../../src/types.ts"],"names":["ROW_GROUP"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B","sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  cssVar: string | string[];\n  data?: unknown;\n  props: {\n    name: string;\n  } & Partial<{\n    onClick: (event: React.MouseEvent) => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    ref: React.RefObject<HTMLElement>;\n    style: React.CSSProperties;\n    fixed: 'left' | 'right';\n    children: React.ReactNode[];\n    resizable: boolean;\n    sortable: boolean | SortDirection;\n    sortDirection: SortDirection;\n  }> &\n    Props;\n  columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n"],"file":"types.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "SEMRush DataTable Component",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -16,7 +16,8 @@
     "@semcore/flex-box": "^4",
     "@semcore/icon": "^2.16",
     "@semcore/scroll-area": "^3.2",
-    "@semcore/utils": "^3.22"
+    "@semcore/utils": "^3.22",
+    "resize-observer-polyfill": "^1.5"
   },
   "devDependencies": {
     "@semcore/jest-preset-ui": "1.0.0",