@semcore/data-table 1.5.3 → 2.1.0

package/lib/es6/Head.js

@@ -65,15 +65,15 @@ var Head = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "columns", []);
 
     _defineProperty(_assertThisInitialized(_this), "bindHandlerSortClick", function (name) {
-      return function (e) {
-        _this.asProps.$onSortClick(name, e);
+      return function (event) {
+        _this.asProps.$onSortClick(name, event);
       };
     });
 
     _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (name) {
-      return function (e) {
-        if (e.keyCode === 13) {
-          _this.asProps.$onSortClick(name, e);
+      return function (event) {
+        if (event.code === 'Enter') {
+          _this.asProps.$onSortClick(name, event);
         }
       };
     });
@@ -93,7 +93,7 @@ var Head = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumn",
     value: function renderColumn(column, width) {
-      var _ref2, _objectSpread2;
+      var _ref2, _column$columns;
 
       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;
+      var isGroup = ((_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.length) > 0;
       var cSize = isGroup ? flattenColumns(column.columns).length : 1;
 
       var _getFixedStyle = getFixedStyle(column, this.columns),
@@ -110,7 +110,13 @@ var Head = /*#__PURE__*/function (_Component) {
           name = _getFixedStyle2[0],
           value = _getFixedStyle2[1];
 
-      var style = _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, name, value), _defineProperty(_objectSpread2, "flexBasis", column.props.flex === undefined && "".concat(width * cSize, "%")), _objectSpread2), column.props.style);
+      var style = _objectSpread({
+        flexBasis: column.props.flex === undefined && "".concat(width * cSize, "%")
+      }, column.props.style);
+
+      if (name !== undefined && value !== undefined) {
+        style[name] = value;
+      }
 
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", _objectSpread(_objectSpread({
         "key": column.name,
@@ -136,7 +142,7 @@ var Head = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref3;
 
       var SHead = Box;
@@ -173,5 +179,7 @@ var Head = /*#__PURE__*/function (_Component) {
   return Head;
 }(Component);
 
+_defineProperty(Head, "displayName", void 0);
+
 export default Head;
 //# sourceMappingURL=Head.js.map

package/lib/es6/Head.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Head.jsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","e","asProps","$onSortClick","keyCode","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","cSize","length","value","style","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 logger from '@semcore/utils/lib/logger';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n};\n\nclass Head extends Component {\n  columns = [];\n\n  bindHandlerSortClick = (name) => (e) => {\n    this.asProps.$onSortClick(name, e);\n  };\n\n  bindHandlerKeyDown = (name) => (e) => {\n    if (e.keyCode === 13) {\n      this.asProps.$onSortClick(name, e);\n    }\n  };\n\n  renderColumns(columns, width) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column, width) {\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;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n    const style = {\n      [name]: value,\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\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/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,cAAc,aAAd","sourcesContent":["export { default } from './DataTable';\nexport * from './DataTable';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,cAAc,aAAd","sourcesContent":["export { default } from './DataTable';\nexport * from './DataTable';\n"],"file":"index.js"}

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

@@ -211,7 +211,7 @@ SRow[theme='danger']:hover SCell:not([theme]) {
 
 SCell {
   display: flex;
-  flex: 0 0 auto;
+  flex: 1;
   font-size: 14px;
   color: var(--gray20);
   line-height: 20px;

package/lib/es6/types.js

@@ -0,0 +1,2 @@
+import { ROW_GROUP } from './DataTable';
+//# sourceMappingURL=types.js.map

package/lib/es6/types.js.map

@@ -0,0 +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"}

package/lib/es6/utils.js

@@ -1,39 +1,35 @@
-export function getScrollOffsetValue(columns) {
-  return columns.reduce(function (acc, c) {
-    if (c.fixed === 'left') {
-      acc[0] += c.width;
+export var getScrollOffsetValue = function getScrollOffsetValue(columns) {
+  return columns.reduce(function (acc, column) {
+    if (column.fixed === 'left') {
+      acc[0] += column.width;
     }
 
-    if (c.fixed === 'right') {
-      acc[1] += c.width;
+    if (column.fixed === 'right') {
+      acc[1] += column.width;
     }
 
     return acc;
   }, [0, 0]);
-}
-export function flattenColumns(columns) {
-  return columns.reduce(function (acc, c) {
-    var columns = [c];
-
-    if (c.columns) {
-      columns = flattenColumns(c.columns);
-    }
-
+};
+export 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;
   }, []);
-}
-export function getFixedStyle(column, columns) {
-  var side = column.fixed;
+};
+export var getFixedStyle = function getFixedStyle(cell, columns) {
+  var side = cell.fixed;
   if (!side) return [undefined, undefined];
-  var names = column.name.split('/');
+  var names = cell.name.split('/');
   var nameSideMap = {
     left: names[0],
     right: names[names.length - 1]
   };
   var name = nameSideMap[side];
-  var index = columns.findIndex(function (c) {
-    return c.name === name;
+  var index = columns.findIndex(function (column) {
+    return column.name === name;
   });
   if (index === -1) return [undefined, undefined];
   var startIndexSideMap = {
@@ -46,9 +42,9 @@ export function getFixedStyle(column, columns) {
   };
   var columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
   if (columnsFixed.length < 1) return [side, 0];
-  var vars = columnsFixed.map(function (c) {
-    return "var(--".concat(c.name, "_width)");
+  var vars = columnsFixed.map(function (column) {
+    return "var(--".concat(column.name, "_width)");
   });
   return [side, vars.length === 1 ? vars[0] : "calc(".concat(vars.join(' + '), ")")];
-}
+};
 //# sourceMappingURL=utils.js.map

package/lib/es6/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.js"],"names":["getScrollOffsetValue","columns","reduce","acc","c","fixed","width","flattenColumns","concat","getFixedStyle","column","side","undefined","names","name","split","nameSideMap","left","right","length","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","vars","map","join"],"mappings":"AAAA,OAAO,SAASA,oBAAT,CAA8BC,OAA9B,EAAuC;AAC5C,SAAOA,OAAO,CAACC,MAAR,CACL,UAACC,GAAD,EAAMC,CAAN,EAAY;AACV,QAAIA,CAAC,CAACC,KAAF,KAAY,MAAhB,EAAwB;AACtBF,MAAAA,GAAG,CAAC,CAAD,CAAH,IAAUC,CAAC,CAACE,KAAZ;AACD;;AACD,QAAIF,CAAC,CAACC,KAAF,KAAY,OAAhB,EAAyB;AACvBF,MAAAA,GAAG,CAAC,CAAD,CAAH,IAAUC,CAAC,CAACE,KAAZ;AACD;;AACD,WAAOH,GAAP;AACD,GATI,EAUL,CAAC,CAAD,EAAI,CAAJ,CAVK,CAAP;AAYD;AAED,OAAO,SAASI,cAAT,CAAwBN,OAAxB,EAAiC;AACtC,SAAOA,OAAO,CAACC,MAAR,CAAe,UAACC,GAAD,EAAMC,CAAN,EAAY;AAChC,QAAIH,OAAO,GAAG,CAACG,CAAD,CAAd;;AACA,QAAIA,CAAC,CAACH,OAAN,EAAe;AACbA,MAAAA,OAAO,GAAGM,cAAc,CAACH,CAAC,CAACH,OAAH,CAAxB;AACD;;AACDE,IAAAA,GAAG,GAAGA,GAAG,CAACK,MAAJ,CAAWP,OAAX,CAAN;AACA,WAAOE,GAAP;AACD,GAPM,EAOJ,EAPI,CAAP;AAQD;AAED,OAAO,SAASM,aAAT,CAAuBC,MAAvB,EAA+BT,OAA/B,EAAwC;AAC7C,MAAMU,IAAI,GAAGD,MAAM,CAACL,KAApB;AACA,MAAI,CAACM,IAAL,EAAW,OAAO,CAACC,SAAD,EAAYA,SAAZ,CAAP;AACX,MAAMC,KAAK,GAAGH,MAAM,CAACI,IAAP,CAAYC,KAAZ,CAAkB,GAAlB,CAAd;AACA,MAAMC,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAEJ,KAAK,CAAC,CAAD,CADO;AAElBK,IAAAA,KAAK,EAAEL,KAAK,CAACA,KAAK,CAACM,MAAN,GAAe,CAAhB;AAFM,GAApB;AAIA,MAAML,IAAI,GAAGE,WAAW,CAACL,IAAD,CAAxB;AACA,MAAMS,KAAK,GAAGnB,OAAO,CAACoB,SAAR,CAAkB,UAACjB,CAAD;AAAA,WAAOA,CAAC,CAACU,IAAF,KAAWA,IAAlB;AAAA,GAAlB,CAAd;AAEA,MAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAO,CAACR,SAAD,EAAYA,SAAZ,CAAP;AAElB,MAAMU,iBAAiB,GAAG;AACxBL,IAAAA,IAAI,EAAE,CADkB;AAExBC,IAAAA,KAAK,EAAEE;AAFiB,GAA1B;AAIA,MAAMG,eAAe,GAAG;AACtBN,IAAAA,IAAI,EAAEG,KADgB;AAEtBF,IAAAA,KAAK,EAAEjB,OAAO,CAACkB,MAAR,GAAiB;AAFF,GAAxB;AAIA,MAAMK,YAAY,GAAGvB,OAAO,CAACwB,KAAR,CAAcH,iBAAiB,CAACX,IAAD,CAA/B,EAAuCY,eAAe,CAACZ,IAAD,CAAtD,CAArB;AAEA,MAAIa,YAAY,CAACL,MAAb,GAAsB,CAA1B,EAA6B,OAAO,CAACR,IAAD,EAAO,CAAP,CAAP;AAE7B,MAAMe,IAAI,GAAGF,YAAY,CAACG,GAAb,CAAiB,UAACvB,CAAD;AAAA,2BAAgBA,CAAC,CAACU,IAAlB;AAAA,GAAjB,CAAb;AACA,SAAO,CAACH,IAAD,EAAOe,IAAI,CAACP,MAAL,KAAgB,CAAhB,GAAoBO,IAAI,CAAC,CAAD,CAAxB,kBAAsCA,IAAI,CAACE,IAAL,CAAU,KAAV,CAAtC,MAAP,CAAP;AACD","sourcesContent":["export function getScrollOffsetValue(columns) {\n  return columns.reduce(\n    (acc, c) => {\n      if (c.fixed === 'left') {\n        acc[0] += c.width;\n      }\n      if (c.fixed === 'right') {\n        acc[1] += c.width;\n      }\n      return acc;\n    },\n    [0, 0],\n  );\n}\n\nexport function flattenColumns(columns) {\n  return columns.reduce((acc, c) => {\n    let columns = [c];\n    if (c.columns) {\n      columns = flattenColumns(c.columns);\n    }\n    acc = acc.concat(columns);\n    return acc;\n  }, []);\n}\n\nexport function getFixedStyle(column, columns) {\n  const side = column.fixed;\n  if (!side) return [undefined, undefined];\n  const names = column.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((c) => c.name === name);\n\n  if (index === -1) return [undefined, undefined];\n\n  const startIndexSideMap = {\n    left: 0,\n    right: index,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length - 1,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const vars = columnsFixed.map((c) => `var(--${c.name}_width)`);\n  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];\n}\n"],"file":"utils.js"}
+{"version":3,"sources":["../../src/utils.ts"],"names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","width","flattenColumns","hasNestedColumns","length","concat","getFixedStyle","cell","side","undefined","names","name","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","vars","map","join"],"mappings":"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","sourcesContent":["import type { Column } from './types';\n\nexport const getScrollOffsetValue = (columns: Column[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.width;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.width;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nexport const flattenColumns = (columns: Column[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: Column[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as Column[]);\n\nexport const getFixedStyle = (\n  cell: Pick<Column, 'name' | 'fixed'>,\n  columns: Column[],\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,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length - 1,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const vars = columnsFixed.map((column) => `var(--${column.name}_width)`);\n  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];\n};\n"],"file":"utils.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "SEMRush DataTable Component",
-  "version": "1.5.3",
+  "version": "2.1.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -13,10 +13,26 @@
     "test": "jest"
   },
   "dependencies": {
-    "@semcore/utils": "^3.22",
     "@semcore/flex-box": "^4",
     "@semcore/icon": "^2.16",
-    "@semcore/scroll-area": "^3.2"
+    "@semcore/scroll-area": "^3.2",
+    "@semcore/utils": "^3.22"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/base-trigger": "*",
+    "@semcore/dropdown-menu": "*",
+    "@semcore/typography": "*",
+    "@semcore/accordion": "*",
+    "@semcore/divider": "*",
+    "@semcore/link": "*",
+    "@semcore/portal": "*",
+    "@semcore/progress-bar": "*",
+    "@semcore/skeleton": "*",
+    "@semcore/spin": "*",
+    "@semcore/spin-container": "*",
+    "@semcore/sticky": "*",
+    "@semcore/tooltip": "*"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",

package/src/Body.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Component, sstyled, Root } from '@semcore/core';
+import { Box, Flex, IBoxProps } from '@semcore/flex-box';
+import ScrollArea from '@semcore/scroll-area';
+import { getFixedStyle, getScrollOffsetValue } from './utils';
+import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
+import assignProps from '@semcore/utils/lib/assignProps';
+import type ResizeObserverCallback from 'resize-observer-polyfill';
+
+import scrollStyles from './style/scroll-area.shadow.css';
+import syncScroll from '@semcore/utils/lib/syncScroll';
+
+const testEnv = process.env.NODE_ENV === 'test';
+
+const getCellsByColumn = (cells: NestedCells): RowData => {
+  const flattenCells = cells.flat(20) as Cell[];
+  return Object.fromEntries(flattenCells.map((cell) => [cell.name, cell.data]));
+};
+
+type AsProps = {
+  rows: NestedCells[];
+  columns: Column[];
+  $scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
+  onResize: ResizeObserverCallback;
+  rowPropsLayers: PropsLayer[];
+  use: 'primary' | 'secondary';
+};
+
+class Body extends Component<AsProps> {
+  renderRow(cells: NestedCells, index: number) {
+    const SRow = Box;
+    const { styles, rowPropsLayers } = this.asProps;
+
+    const cellsByColumn = cells.flatRowData || getCellsByColumn(cells);
+
+    let props = {
+      children: this.renderCells(cells, cellsByColumn, index),
+      theme: undefined,
+      active: undefined,
+    };
+
+    for (const rowPropsLayer of rowPropsLayers) {
+      const { childrenPropsGetter = (p) => p, ...other } = rowPropsLayer;
+      const propsRow = assignProps(other, props);
+      props = assignProps(childrenPropsGetter(propsRow, cellsByColumn, index), propsRow);
+    }
+
+    return sstyled(styles)(<SRow key={index} {...props} />);
+  }
+
+  renderRows(rows: NestedCells[]) {
+    return rows.map((cells, index) => this.renderRow(cells, index));
+  }
+
+  renderCells(cells: NestedCells, cellsByColumn: RowData, index: number) {
+    const SCell = Flex;
+    const { styles, columns, use } = this.asProps;
+    return cells.map((cell) => {
+      if (Array.isArray(cell)) {
+        return <div>{this.renderRows(cell as NestedCells[])}</div>;
+      } else {
+        const column = columns.find((c) => c.name === cell.name);
+        const [name, value] = getFixedStyle(cell, columns);
+        const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(
+          (name) => `var(${name})`,
+        );
+        type CellProps = IBoxProps & {
+          name: string;
+          children: React.ReactNode;
+          style: React.CSSProperties;
+        };
+
+        let props: CellProps = {
+          name: cell.name,
+          children: <>{cell.data}</>,
+          ['data-data']: JSON.stringify(cell.data),
+          justifyContent: column?.props?.justifyContent,
+          style: {
+            width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,
+          },
+        };
+        if (name !== undefined && value !== undefined) {
+          props.style[name] = value;
+        }
+
+        for (const cellPropLayer of cell.cellPropsLayers || []) {
+          const { childrenPropsGetter = (p) => p, ...other } = cellPropLayer;
+          const propsCell = assignProps(other, props);
+          props = assignProps(childrenPropsGetter(propsCell, cellsByColumn, index), propsCell);
+        }
+
+        return sstyled(styles)(
+          <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,
+        ) as React.ReactElement;
+      }
+    }, [] as React.ReactElement[]);
+  }
+
+  render() {
+    const SBody = Root;
+    const SBodyWrapper = Box;
+    const SScrollAreaBar = ScrollArea.Bar;
+    const { Children, styles, rows, columns, onResize, $scrollRef } = this.asProps;
+
+    const columnsInitialized = columns.reduce((sum, { width }) => sum + width, 0) > 0 || testEnv;
+
+    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
+    const offsetSum = offsetLeftSum + offsetRightSum;
+
+    return sstyled(styles)(
+      <SBodyWrapper>
+        <ScrollArea
+          shadow
+          styles={scrollStyles}
+          use:left={`${offsetLeftSum}px`}
+          use:right={`${offsetRightSum}px`}
+          onResize={onResize}
+        >
+          <ScrollArea.Container ref={$scrollRef}>
+            <SBody render={Box}>{columnsInitialized ? this.renderRows(rows) : null}</SBody>
+          </ScrollArea.Container>
+          <SScrollAreaBar
+            orientation="horizontal"
+            left={`${offsetLeftSum}px`}
+            right={`${offsetRightSum}px`}
+            offsetSum={`${offsetSum}px`}
+          />
+          <SScrollAreaBar orientation="vertical" />
+        </ScrollArea>
+        {Children.origin}
+      </SBodyWrapper>,
+    );
+  }
+}
+
+export default Body;