@semcore/data-table 2.0.0 → 2.1.0

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": "2.0.0",
+  "version": "2.1.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

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;

package/src/DataTable.tsx

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