@gravity-ui/react-data-table 1.2.0 → 2.0.0

package/README.md

@@ -1,4 +1,4 @@
-# React Data Table
+# React Data Table · [![npm package](https://img.shields.io/npm/v/@gravity-ui/react-data-table)](https://www.npmjs.com/package/@gravity-ui/react-data-table) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/react-data-table/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/react-data-table/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/react-data-table/)
 
 A React component for rendering tables.
 
@@ -28,6 +28,7 @@ of the sort list. A simple Click sorts the table by this column only. Sorting or
 | visibleRowIndex   | `Function` |          |                | A method `(row, index) => number` that returns the row index shown in the column enabled by the `displayIndices` flag. Use it to specify a correct row index when applying external sorting                                                                             |
 | onRowClick        | `Function` |          |                | Click listener for a row `(row, index, event) => void`                                                                                                                                                                                                                  |
 | nullBeforeNumbers | `Boolean`  |          |                | A flag that sets the position of `null`/`undefined` values when sorting. If true, `null`/`undefined` values are shown at the top in the case of ascending order and at the bottom in the case of descending order. If `false`/`undefined`, they are shown at the bottom |
+| getColSpansOfRow  | `Function` |          |                | Configuring column spanning for each row `({ row, columns, index, headerData, span, footer, odd }) => {[colName: string]: number} / undefined`                                                                                                                          |
 
 ## Settings
 
@@ -47,7 +48,7 @@ of the sort list. A simple Click sorts the table by this column only. Sorting or
 | dynamicRenderMinSize                        | `Number`                                   | `1`                   | A minimum number of rows to be rendered in any case, even if a smaller number of rows fills the container height completely (this makes sense if dynamicRender is enabled). The value is passed [to the `minSize` property of the ReactList component](https://github.com/coderiety/react-list#minsize-defaults-to-1).              |
 | dynamicRenderUseStaticSize                  | `Boolean`                                  | `false`               | [ReactList.useStaticSize](https://github.com/caseywebdev/react-list#usestaticsize-defaults-to-false)                                                                                                                                                                                                                                |
 | dynamicRenderThreshold                      | `Number`                                   |                       | [ReactList.threshold](https://github.com/caseywebdev/react-list#threshold-defaults-to-100)                                                                                                                                                                                                                                          |
-| dynamicRenderScrollParentGetter             | `Funciction`                               |                       | [ReactList.scrollParentGetter](https://github.com/caseywebdev/react-list#scrollparentgetter-defaults-to-finding-the-nearest-scrollable-parent)                                                                                                                                                                                      |
+| dynamicRenderScrollParentGetter             | `Function`                                 |                       | [ReactList.scrollParentGetter](https://github.com/caseywebdev/react-list#scrollparentgetter-defaults-to-finding-the-nearest-scrollable-parent)                                                                                                                                                                                      |
 | dynamicRenderScrollParentViewportSizeGetter | `Function`                                 |                       | [ReactList.scrollParentViewportSizeGetter](https://github.com/caseywebdev/react-list#scrollparentviewportsizegetter-defaults-to-scrollparents-viewport-size)                                                                                                                                                                        |
 | sortable                                    | `Boolean`                                  | `true`                | Enable sorting for the entire table                                                                                                                                                                                                                                                                                                 |
 | externalSort                                | `Boolean`                                  | `false`               | Disable data sorting on the component side. [Read more](#externalSort)                                                                                                                                                                                                                                                              |

package/build/esm/lib/DataTable.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import ReactList from 'react-list';
 import './DataTable.scss';
@@ -9,6 +8,22 @@ interface CustomIcons {
     ICON_ASC: React.ReactNode;
     ICON_DESC: React.ReactNode;
 }
+export interface TableRowProps<T> {
+    row: T;
+    index: number;
+    columns: DataColumns<T>;
+    className?: string;
+    odd?: boolean;
+    footer?: boolean;
+    headerData?: boolean;
+    onClick?: (row: T, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
+    span?: {
+        [colName: string]: number;
+    };
+    getColSpansOfRow?: (p: Omit<TableRowProps<T>, 'getColSpansOfRow' | 'onClick' | 'className'>) => {
+        [colName: string]: number;
+    } | undefined;
+}
 interface TableHeadProps<T> {
     dataColumns: DataColumns<T>;
     headColumns: HeadColumns<T>;
@@ -19,14 +34,6 @@ interface TableHeadProps<T> {
     onDataRowsHeightChange?: StickyHeadProps<T>['onDataRowsHeightChange'];
 }
 declare class TableHead<T> extends React.Component<TableHeadProps<T>> {
-    static propTypes: {
-        headColumns: PropTypes.Validator<any[]>;
-        dataColumns: PropTypes.Validator<any[]>;
-        displayIndices: PropTypes.Validator<boolean>;
-        onSort: PropTypes.Requireable<(...args: any[]) => any>;
-        onColumnsUpdated: PropTypes.Requireable<(...args: any[]) => any>;
-        renderedDataRows: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
     _dataRowsRef: HTMLTableSectionElement | null;
     dataRowsHeightObserver?: HeightObserver;
     renderedColumns: HTMLTableHeaderCellElement[];
@@ -49,6 +56,7 @@ interface StickyHeadProps<T> {
     displayIndices?: Settings['displayIndices'];
     onSort?: TableProps<T>['onSort'];
     top: number;
+    renderedDataRows: React.ReactNode;
     onDataRowsHeightChange: (height: number) => void;
 }
 interface StickyHeadState {
@@ -57,11 +65,6 @@ interface StickyHeadState {
     style?: React.CSSProperties;
 }
 declare class StickyHead<T> extends React.Component<StickyHeadProps<T>, StickyHeadState> {
-    static propTypes: {
-        mode: PropTypes.Requireable<string>;
-        top: PropTypes.Requireable<number>;
-        renderedDataRows: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
     static defaultProps: {
         top: number;
     };
@@ -88,7 +91,7 @@ interface StickyFooterProps<T> {
     bottom?: number;
     onMovingHeightChange: (height: number) => void;
 }
-declare type StickyFooterState = StickyHeadState;
+type StickyFooterState = StickyHeadState;
 declare class StickyFooter<T> extends React.PureComponent<StickyFooterProps<T>, StickyFooterState> {
     static defaultProps: {
         bottom: number;
@@ -128,6 +131,9 @@ interface TableProps<T> {
     onSort: DataTableView<T>['onSort'];
     renderEmptyRow: unknown;
     nullBeforeNumbers?: boolean;
+    getColSpansOfRow?: (p: Omit<TableRowProps<T>, 'getColSpansOfRow' | 'onClick' | 'className'>) => {
+        [colName: string]: number;
+    } | undefined;
 }
 interface TableState {
     movingFooterStyle?: {
@@ -138,22 +144,6 @@ interface TableState {
     };
 }
 declare class Table<T> extends React.PureComponent<TableProps<T>, TableState> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        settings: PropTypes.Requireable<object>;
-        refs: PropTypes.Requireable<object>;
-        headerData: PropTypes.Requireable<any[]>;
-        data: PropTypes.Requireable<any[]>;
-        footerData: PropTypes.Requireable<any[]>;
-        columns: PropTypes.Requireable<object>;
-        emptyDataMessage: PropTypes.Requireable<string>;
-        onRowClick: PropTypes.Requireable<(...args: any[]) => any>;
-        rowClassName: PropTypes.Requireable<(...args: any[]) => any>;
-        rowKey: PropTypes.Requireable<(...args: any[]) => any>;
-        startIndex: PropTypes.Requireable<number>;
-        onSort: PropTypes.Requireable<(...args: any[]) => any>;
-        renderEmptyRow: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     state: TableState;
     _onWindowResize?: () => void;
     _body?: HTMLDivElement;
@@ -206,62 +196,13 @@ interface CellProps<T> {
     footer?: boolean;
     headerData?: boolean;
 }
-declare type InternalProps<T> = DataTableProps<T> & typeof DataTableView.defaultProps;
+type InternalProps<T> = DataTableProps<T> & typeof DataTableView.defaultProps;
 interface DataTableViewState<T> extends SortOrderWithSortColumns {
     indexColumn?: Column<T>;
     settings: ReturnType<typeof DataTableView.calculateSettings>;
 }
-declare type HeadPositionInner = HeadPosition | false;
+type HeadPositionInner = HeadPosition | false;
 declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTableViewState<T>> {
-    static propTypes: {
-        columns: PropTypes.Validator<any[]>;
-        headerData: PropTypes.Requireable<any[]>;
-        data: PropTypes.Validator<any[]>;
-        footerData: PropTypes.Requireable<any[]>;
-        startIndex: PropTypes.Requireable<number>;
-        emptyDataMessage: PropTypes.Requireable<string>;
-        renderEmptyRow: PropTypes.Requireable<(...args: any[]) => any>;
-        rowClassName: PropTypes.Requireable<(...args: any[]) => any>;
-        rowKey: PropTypes.Requireable<(...args: any[]) => any>;
-        visibleRowIndex: PropTypes.Requireable<(...args: any[]) => any>;
-        initialSortOrder: PropTypes.Requireable<PropTypes.InferProps<{
-            columnId: PropTypes.Requireable<string>;
-            order: PropTypes.Requireable<number>;
-        }> | (PropTypes.InferProps<{
-            columnId: PropTypes.Requireable<string>;
-            order: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        sortOrder: PropTypes.Requireable<PropTypes.InferProps<{
-            columnId: PropTypes.Requireable<string>;
-            order: PropTypes.Requireable<number>;
-        }> | (PropTypes.InferProps<{
-            columnId: PropTypes.Requireable<string>;
-            order: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        settings: PropTypes.Requireable<PropTypes.InferProps<{
-            displayIndices: PropTypes.Requireable<boolean>;
-            dynamicRender: PropTypes.Requireable<boolean>;
-            dynamicRenderType: PropTypes.Requireable<string>;
-            dynamicRenderUseStaticSize: PropTypes.Requireable<boolean>;
-            dynamicRenderThreshold: PropTypes.Requireable<number>;
-            dynamicRenderMinSize: PropTypes.Requireable<number>;
-            dynamicRenderScrollParentGetter: PropTypes.Requireable<(...args: any[]) => any>;
-            dynamicRenderScrollParentViewportSizeGetter: PropTypes.Requireable<(...args: any[]) => any>;
-            dynamicItemSizeEstimator: PropTypes.Requireable<(...args: any[]) => any>;
-            dynamicItemSizeGetter: PropTypes.Requireable<(...args: any[]) => any>;
-            stickyHead: PropTypes.Requireable<string | boolean>;
-            stickyTop: PropTypes.Requireable<string | number>;
-            sortable: PropTypes.Requireable<boolean>;
-            externalSort: PropTypes.Requireable<boolean>;
-            highlightRows: PropTypes.Requireable<boolean>;
-            stripedRows: PropTypes.Requireable<boolean>;
-            headerMod: PropTypes.Requireable<string>;
-            defaultOrder: PropTypes.Requireable<number>;
-            syncHeadOnResize: PropTypes.Requireable<boolean>;
-        }>>;
-        theme: PropTypes.Requireable<string>;
-        onSort: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     static defaultProps: {
         startIndex: number;
         emptyDataMessage: string;
@@ -307,9 +248,65 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
         headerMod?: "pre" | "multiline" | undefined;
     };
     static getIndexColumn<T extends HasHeaderFooterIndex>({ startIndex, data, visibleRowIndex, }: InternalProps<T>): Column<T>;
-    static getDerivedStateFromProps<T>(nextProps: InternalProps<T>): {
-        sortOrder?: NameToOrderTypeMap | undefined;
-        sortColumns?: string[] | undefined;
+    static getDerivedStateFromProps<T extends HasHeaderFooterIndex>(nextProps: InternalProps<T>): {
+        settings: {
+            stickyHead: HeadPositionInner;
+            stickyFooter: HeadPositionInner;
+            displayIndices: boolean;
+            stickyTop?: number | "auto" | undefined;
+            syncHeadOnResize?: boolean | undefined;
+            stickyBottom?: number | "auto" | undefined;
+            dynamicRender?: boolean | undefined;
+            dynamicInnerRef?: React.Ref<ReactList> | undefined;
+            dynamicRenderType?: "simple" | "uniform" | "variable" | undefined;
+            dynamicItemSizeEstimator?: ((index: number, cache: {}) => number) | undefined;
+            dynamicItemSizeGetter?: ((index: number) => number) | undefined;
+            dynamicRenderMinSize: number;
+            dynamicRenderUseStaticSize?: boolean | undefined;
+            dynamicRenderThreshold?: number | undefined;
+            dynamicRenderScrollParentGetter?: (() => JSX.Element) | undefined;
+            dynamicRenderScrollParentViewportSizeGetter?: (() => number) | undefined;
+            sortable: boolean;
+            externalSort: boolean;
+            disableSortReset?: boolean | undefined;
+            defaultOrder: OrderType;
+            highlightRows?: boolean | undefined;
+            stripedRows?: boolean | undefined;
+            headerMod?: "pre" | "multiline" | undefined;
+        };
+        indexColumn: false | Column<T>;
+    } | {
+        sortOrder: {};
+        sortColumns: never[];
+        settings: {
+            stickyHead: HeadPositionInner;
+            stickyFooter: HeadPositionInner;
+            displayIndices: boolean;
+            stickyTop?: number | "auto" | undefined;
+            syncHeadOnResize?: boolean | undefined;
+            stickyBottom?: number | "auto" | undefined;
+            dynamicRender?: boolean | undefined;
+            dynamicInnerRef?: React.Ref<ReactList> | undefined;
+            dynamicRenderType?: "simple" | "uniform" | "variable" | undefined;
+            dynamicItemSizeEstimator?: ((index: number, cache: {}) => number) | undefined;
+            dynamicItemSizeGetter?: ((index: number) => number) | undefined;
+            dynamicRenderMinSize: number;
+            dynamicRenderUseStaticSize?: boolean | undefined;
+            dynamicRenderThreshold?: number | undefined;
+            dynamicRenderScrollParentGetter?: (() => JSX.Element) | undefined;
+            dynamicRenderScrollParentViewportSizeGetter?: (() => number) | undefined;
+            sortable: boolean;
+            externalSort: boolean;
+            disableSortReset?: boolean | undefined;
+            defaultOrder: OrderType;
+            highlightRows?: boolean | undefined;
+            stripedRows?: boolean | undefined;
+            headerMod?: "pre" | "multiline" | undefined;
+        };
+        indexColumn: false | Column<T>;
+    } | {
+        sortOrder: NameToOrderTypeMap;
+        sortColumns: string[];
         settings: {
             stickyHead: HeadPositionInner;
             stickyFooter: HeadPositionInner;
@@ -394,27 +391,27 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
         dataColumns: DataColumns<T>;
     };
     isSortEnabled: () => boolean;
-    onSort: (column?: SlimColumn | undefined, multisort?: boolean | undefined) => void;
+    onSort: (column?: SlimColumn, multisort?: boolean) => void;
     resize(): void;
 }
-export declare type ColumnExtended<T> = ReturnType<DataTableView<T>['getColumn']> & {
+export type ColumnExtended<T> = ReturnType<DataTableView<T>['getColumn']> & {
     headerTitle?: string;
 };
-declare type HeadCellColumn<T> = ColumnExtended<T> | (Column<T> & {
+type HeadCellColumn<T> = ColumnExtended<T> | (Column<T> & {
     index?: number;
     columnIndex?: number;
     headerTitle?: string;
     dataColumn?: boolean;
 });
-declare type HeadCellsType<T> = {
+type HeadCellsType<T> = {
     column: HeadCellColumn<T>;
     itemLevel: number;
     colSpan: number;
     rowSpan: number;
 };
-declare type HeadColumnsItem<T> = HeadCellsType<T>[];
-declare type HeadColumns<T> = HeadColumnsItem<T>[];
-declare type DataColumns<T> = ColumnExtended<T>[];
+type HeadColumnsItem<T> = HeadCellsType<T>[];
+type HeadColumns<T> = HeadColumnsItem<T>[];
+type DataColumns<T> = ColumnExtended<T>[];
 interface TableColumns<T> {
     headColumns: HeadColumns<T>;
     dataColumns: DataColumns<T>;
@@ -423,7 +420,7 @@ export interface SortOrderWithSortColumns {
     sortOrder: NameToOrderTypeMap;
     sortColumns: string[];
 }
-export declare type NameToOrderTypeMap = {
+export type NameToOrderTypeMap = {
     [colName: string]: OrderType;
 };
 interface State {

package/build/esm/lib/DataTable.js

@@ -1,5 +1,4 @@
 import { __rest } from "tslib";
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import ReactList from 'react-list';
 import './DataTable.scss';
@@ -34,11 +33,6 @@ const ColumnSortIcon = ({ sortOrder, sortIndex, sortable, defaultOrder }) => {
         return null;
     }
 };
-ColumnSortIcon.propTypes = {
-    sortOrder: PropTypes.oneOf([ASCENDING, DESCENDING]),
-    sortable: PropTypes.bool,
-    defaultOrder: PropTypes.oneOf([ASCENDING, DESCENDING]),
-};
 class TableRow extends React.PureComponent {
     constructor() {
         super(...arguments);
@@ -50,8 +44,18 @@ class TableRow extends React.PureComponent {
         };
     }
     render() {
-        const { className, columns, row, index, odd, footer, span, headerData } = this.props;
+        const { className, columns, row, index, odd, footer, span, getColSpansOfRow, headerData } = this.props;
+        const colSpans = getColSpansOfRow ? getColSpansOfRow(this.props) : undefined;
+        let restColSpan = 0;
         return (React.createElement("tr", { className: b('row', { odd, footer, 'header-data': headerData }, className), onClick: this.onClick }, columns.map((column, columnIndex) => {
+            if (colSpans) {
+                if (--restColSpan > 0) {
+                    return null;
+                }
+                if (colSpans[column.name] > 1) {
+                    restColSpan = colSpans[column.name];
+                }
+            }
             let rowSpan;
             if (span) {
                 if (span[column.name] === 0) {
@@ -69,7 +73,7 @@ class TableRow extends React.PureComponent {
                     header: false,
                     footer,
                     headerData,
-                }), rowSpan: rowSpan, onClick: column._getOnClick({ row, index, footer, headerData }) }, column._renderValue({ value, row, index, footer, headerData })));
+                }), colSpan: colSpans ? colSpans[column.name] : undefined, rowSpan: rowSpan, onClick: column._getOnClick({ row, index, footer, headerData }) }, column._renderValue({ value, row, index, footer, headerData })));
         })));
     }
 }
@@ -164,14 +168,6 @@ class TableHead extends React.Component {
             : undefined;
     }
 }
-TableHead.propTypes = {
-    headColumns: PropTypes.array.isRequired,
-    dataColumns: PropTypes.array.isRequired,
-    displayIndices: PropTypes.bool.isRequired,
-    onSort: PropTypes.func,
-    onColumnsUpdated: PropTypes.func,
-    renderedDataRows: PropTypes.node,
-};
 class StickyHead extends React.Component {
     constructor() {
         super(...arguments);
@@ -231,11 +227,6 @@ class StickyHead extends React.Component {
         }
     }
 }
-StickyHead.propTypes = {
-    mode: PropTypes.oneOf([FIXED, MOVING]),
-    top: PropTypes.number,
-    renderedDataRows: PropTypes.node,
-};
 StickyHead.defaultProps = {
     top: 0,
 };
@@ -378,9 +369,9 @@ class Table extends React.PureComponent {
             return this.renderRowImpl(rowData, index, { headerData: true });
         };
         this.renderRowImpl = (row, index, { onRowClick, odd, span, footer, headerData } = {}) => {
-            const { columns: { dataColumns }, rowClassName, rowKey, } = this.props;
+            const { columns: { dataColumns }, rowClassName, rowKey, getColSpansOfRow, } = this.props;
             const className = typeof rowClassName === 'function' ? rowClassName(row, index, footer, headerData) : '';
-            return (React.createElement(TableRow, { key: rowKey(row, index), className: className, columns: dataColumns, row: row, index: index, span: span, odd: odd, onClick: onRowClick, footer: footer, headerData: headerData }));
+            return (React.createElement(TableRow, { getColSpansOfRow: getColSpansOfRow, key: rowKey(row, index), className: className, columns: dataColumns, row: row, index: index, span: span, odd: odd, onClick: onRowClick, footer: footer, headerData: headerData }));
         };
         this.renderTable = (items, ref) => {
             const { footerData, columns: { dataColumns }, settings: { stickyHead }, } = this.props;
@@ -481,7 +472,7 @@ class Table extends React.PureComponent {
     }
     renderTableDynamic() {
         const { data, settings: { dynamicInnerRef, dynamicRenderType = 'uniform', dynamicRenderUseStaticSize, dynamicRenderThreshold, dynamicRenderMinSize, dynamicRenderScrollParentGetter, dynamicRenderScrollParentViewportSizeGetter, dynamicItemSizeEstimator, dynamicItemSizeGetter, } = {}, } = this.props;
-        return (React.createElement(ReactList, Object.assign({ ref: dynamicInnerRef, type: dynamicRenderType, useStaticSize: dynamicRenderUseStaticSize, threshold: dynamicRenderThreshold, minSize: dynamicRenderMinSize, itemSizeEstimator: dynamicItemSizeEstimator, itemSizeGetter: dynamicItemSizeGetter, length: data.length, itemRenderer: this.renderRow, itemsRenderer: this.renderTable, scrollParentGetter: dynamicRenderScrollParentGetter }, { scrollParentViewportSizeGetter: dynamicRenderScrollParentViewportSizeGetter })));
+        return (React.createElement(ReactList, { ref: dynamicInnerRef, type: dynamicRenderType, useStaticSize: dynamicRenderUseStaticSize, threshold: dynamicRenderThreshold, minSize: dynamicRenderMinSize, itemSizeEstimator: dynamicItemSizeEstimator, itemSizeGetter: dynamicItemSizeGetter, length: data.length, itemRenderer: this.renderRow, itemsRenderer: this.renderTable, scrollParentGetter: dynamicRenderScrollParentGetter, scrollParentViewportSizeGetter: dynamicRenderScrollParentViewportSizeGetter }));
     }
     renderTableSimple() {
         const { data } = this.props;
@@ -505,31 +496,11 @@ class Table extends React.PureComponent {
         return stickyFooter;
     }
 }
-Table.propTypes = {
-    className: PropTypes.string,
-    settings: PropTypes.object,
-    refs: PropTypes.object,
-    headerData: PropTypes.array,
-    data: PropTypes.array,
-    footerData: PropTypes.array,
-    columns: PropTypes.object,
-    emptyDataMessage: PropTypes.string,
-    onRowClick: PropTypes.func,
-    rowClassName: PropTypes.func,
-    rowKey: PropTypes.func,
-    startIndex: PropTypes.number,
-    onSort: PropTypes.func,
-    renderEmptyRow: PropTypes.func,
-};
 const MemoizedCell = React.memo(CellImpl);
 function CellImpl(props) {
     const { column, value, row, index, footer, headerData } = props;
     return (React.createElement(React.Fragment, null, column.render({ value, row, index, footer, headerData })));
 }
-const sortOrderShape = {
-    columnId: PropTypes.string,
-    order: PropTypes.oneOf([ASCENDING, DESCENDING]),
-};
 class DataTableView extends React.Component {
     constructor() {
         super(...arguments);
@@ -538,14 +509,12 @@ class DataTableView extends React.Component {
             this.table = node;
         };
         this.renderMemoizedCell = ({ column, value, row, index, footer, headerData }) => {
-            return (React.createElement(MemoizedCell, Object.assign({}, {
-                column,
+            return (React.createElement(MemoizedCell, { column,
                 value,
                 row,
                 index,
                 footer,
-                headerData,
-            })));
+                headerData }));
         };
         this.getColumn = (column, columnIndex) => {
             const { settings } = this.state;
@@ -646,7 +615,7 @@ class DataTableView extends React.Component {
             ? Object.assign({}, externalToInternalSortOrder(nextProps.sortOrder, nextProps.settings)) : undefined));
     }
     render() {
-        const { headerData, data, footerData, columns, startIndex, emptyDataMessage, rowClassName, rowKey, onRowClick, theme, renderEmptyRow, nullBeforeNumbers, } = this.props;
+        const { getColSpansOfRow, headerData, data, footerData, columns, startIndex, emptyDataMessage, rowClassName, rowKey, onRowClick, theme, renderEmptyRow, nullBeforeNumbers, } = this.props;
         const { settings, sortOrder, sortColumns } = this.state;
         const { highlightRows = false, stripedRows = false, headerMod = false } = settings;
         const tableClassName = b({
@@ -659,7 +628,7 @@ class DataTableView extends React.Component {
         if (settings.dynamicRender && dataColumns.dataColumns.some((column) => column.group)) {
             console.warn('Simultaneously used grouping cells and dynamic render. The table will render unpredictable.');
         }
-        return (React.createElement(Table, { ref: this._tableRef, className: tableClassName, settings: settings, startIndex: startIndex, columns: dataColumns, emptyDataMessage: emptyDataMessage, renderEmptyRow: renderEmptyRow, rowClassName: rowClassName, rowKey: rowKey || DataTableView.defaultProps.rowKey, onRowClick: onRowClick, headerData: headerData, data: getSortedData(data, dataColumns.dataColumns, {
+        return (React.createElement(Table, { ref: this._tableRef, getColSpansOfRow: getColSpansOfRow, className: tableClassName, settings: settings, startIndex: startIndex, columns: dataColumns, emptyDataMessage: emptyDataMessage, renderEmptyRow: renderEmptyRow, rowClassName: rowClassName, rowKey: rowKey || DataTableView.defaultProps.rowKey, onRowClick: onRowClick, headerData: headerData, data: getSortedData(data, dataColumns.dataColumns, {
                 sortOrder,
                 sortColumns,
             }, {
@@ -709,49 +678,6 @@ class DataTableView extends React.Component {
         }
     }
 }
-DataTableView.propTypes = {
-    columns: PropTypes.array.isRequired,
-    headerData: PropTypes.array,
-    data: PropTypes.array.isRequired,
-    footerData: PropTypes.array,
-    startIndex: PropTypes.number,
-    emptyDataMessage: PropTypes.string,
-    renderEmptyRow: PropTypes.func,
-    rowClassName: PropTypes.func,
-    rowKey: PropTypes.func,
-    visibleRowIndex: PropTypes.func,
-    initialSortOrder: PropTypes.oneOfType([
-        PropTypes.shape(sortOrderShape),
-        PropTypes.arrayOf(PropTypes.shape(sortOrderShape)),
-    ]),
-    sortOrder: PropTypes.oneOfType([
-        PropTypes.shape(sortOrderShape),
-        PropTypes.arrayOf(PropTypes.shape(sortOrderShape)),
-    ]),
-    settings: PropTypes.shape({
-        displayIndices: PropTypes.bool,
-        dynamicRender: PropTypes.bool,
-        dynamicRenderType: PropTypes.oneOf(['simple', 'uniform', 'variable']),
-        dynamicRenderUseStaticSize: PropTypes.bool,
-        dynamicRenderThreshold: PropTypes.number,
-        dynamicRenderMinSize: PropTypes.number,
-        dynamicRenderScrollParentGetter: PropTypes.func,
-        dynamicRenderScrollParentViewportSizeGetter: PropTypes.func,
-        dynamicItemSizeEstimator: PropTypes.func,
-        dynamicItemSizeGetter: PropTypes.func,
-        stickyHead: PropTypes.oneOf([false, FIXED, MOVING]),
-        stickyTop: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
-        sortable: PropTypes.bool,
-        externalSort: PropTypes.bool,
-        highlightRows: PropTypes.bool,
-        stripedRows: PropTypes.bool,
-        headerMod: PropTypes.oneOf(['multiline', 'pre']),
-        defaultOrder: PropTypes.oneOf([ASCENDING, DESCENDING]),
-        syncHeadOnResize: PropTypes.bool,
-    }),
-    theme: PropTypes.string,
-    onSort: PropTypes.func,
-};
 DataTableView.defaultProps = {
     startIndex: 0,
     emptyDataMessage: 'No data',
@@ -777,7 +703,7 @@ function doColumnsHaveDuplicateNames(columns) {
 const DUPLICATE_COLUMN_NAMES_WARNING = 'It is strongly recommended against using duplicate column names. ' +
     'They act as default accessors and titles, so doing so may lead to confusing titles and the wrong ' +
     'data being extracted.';
-export default class DataTable extends React.PureComponent {
+class DataTable extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.state = {};
@@ -835,3 +761,4 @@ DataTable.DESCENDING = DESCENDING;
 DataTable.LEFT = LEFT;
 DataTable.CENTER = CENTER;
 DataTable.RIGHT = RIGHT;
+export default DataTable;

package/build/esm/lib/DataTable.scss

@@ -244,21 +244,18 @@ $cell-border: 1px solid var(--data-table-border-color);
     }
 
     &_theme_yandex-cloud {
-        --data-table-color-base: var(
-            --yc-color-base-background,
-            var(--yc-color-base, var(--color-base))
-        );
+        --data-table-color-base: var(--g-color-base-background, var(--yc-color-base-background));
         --data-table-color-stripe: var(
-            --yc-color-base-generic-ultralight,
-            var(--yc-color-base-area, var(--color-base-area))
+            --g-color-base-generic-ultralight,
+            var(--yc-color-base-generic-ultralight)
         );
         --data-table-border-color: var(
-            --yc-color-base-generic-hover,
-            var(--yc-color-contrast-15-solid, var(--color-contrast-15-solid))
+            --g-color-base-generic-hover,
+            var(--yc-color-base-generic-hover)
         );
         --data-table-color-hover-area: var(
-            --yc-color-base-simple-hover,
-            var(--yc-color-hover-area, var(--color-hover-area))
+            --g-color-base-simple-hover,
+            var(--yc-color-base-simple-hover)
         );
         --data-table-color-footer-area: var(--data-table-color-base);
     }

package/build/esm/lib/types.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import ReactList from 'react-list';
+import type { TableRowProps } from './DataTable';
 import { ASCENDING, CENTER, DESCENDING, FIXED, LEFT, LEGACY_THEME, MOVING, RIGHT, YCLOUD_THEME } from './constants';
-declare type HeaderData<T> = T & {
+type HeaderData<T> = T & {
     headerIndex?: number;
 };
-declare type FooterData<T> = T & {
+type FooterData<T> = T & {
     footerIndex?: number;
 };
 export interface DataTableProps<T> {
@@ -26,6 +27,9 @@ export interface DataTableProps<T> {
     onRowClick?: (row: T, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
     onError?: (error: unknown) => void;
     nullBeforeNumbers?: boolean;
+    getColSpansOfRow?: (p: Omit<TableRowProps<T>, 'getColSpansOfRow' | 'onClick' | 'className'>) => {
+        [colName: string]: number;
+    } | undefined;
 }
 export interface Column<T> {
     name: string;
@@ -58,7 +62,7 @@ export interface Column<T> {
     group?: boolean;
     autogroup?: boolean;
 }
-export declare type DynamicInnerRefT = ReactList;
+export type DynamicInnerRefT = ReactList;
 export interface Settings {
     displayIndices?: boolean;
     stickyHead?: HeadPosition;
@@ -92,14 +96,14 @@ export interface CustomStyleParams<T> {
     footer?: boolean;
     headerData?: boolean;
 }
-export declare type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
-export declare type OrderType = typeof ASCENDING | typeof DESCENDING;
+export type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
+export type OrderType = typeof ASCENDING | typeof DESCENDING;
 export interface SortOrder {
     columnId: string;
     order: OrderType;
 }
-export declare type HeadPosition = typeof FIXED | typeof MOVING;
-export declare type THEMES = typeof LEGACY_THEME | typeof YCLOUD_THEME;
+export type HeadPosition = typeof FIXED | typeof MOVING;
+export type THEMES = typeof LEGACY_THEME | typeof YCLOUD_THEME;
 export interface SortedDataItem<T> {
     row: T;
     index: number;
@@ -107,5 +111,5 @@ export interface SortedDataItem<T> {
         [colName: string]: number;
     };
 }
-export declare type Comparator<T> = (l: SortedDataItem<T>, r: SortedDataItem<T>) => number;
+export type Comparator<T> = (l: SortedDataItem<T>, r: SortedDataItem<T>) => number;
 export {};

package/build/esm/lib/util.d.ts

@@ -1,7 +1,7 @@
 import { ColumnExtended, NameToOrderTypeMap, SortOrderWithSortColumns } from './DataTable';
 import { OrderType, Settings, SortOrder, SortedDataItem } from './types';
 export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
-export declare type SlimColumn = {
+export type SlimColumn = {
     name: string;
     defaultOrder?: OrderType;
 };
@@ -9,6 +9,9 @@ export declare function getSortOrder({ name: columnName, defaultOrder: columnDef
     defaultOrder?: OrderType;
     disableSortReset?: boolean;
 }): {
+    sortOrder: {};
+    sortColumns: never[];
+} | {
     sortOrder: NameToOrderTypeMap;
     sortColumns: string[];
 };
@@ -17,8 +20,11 @@ interface SortingFunctionFlags {
     externalSort?: boolean;
 }
 export declare function getSortedData<T>(data: T[], dataColumns: ColumnExtended<T>[], { sortOrder, sortColumns }: SortOrderWithSortColumns, sortingFunctionFlags: SortingFunctionFlags): SortedDataItem<T>[];
-declare type ExternalSortOrderType = SortOrder | SortOrder[];
+type ExternalSortOrderType = SortOrder | SortOrder[];
 export declare function externalToInternalSortOrder(columns: ExternalSortOrderType, settings?: Settings): {
+    sortOrder: {};
+    sortColumns: never[];
+} | {
     sortOrder: NameToOrderTypeMap;
     sortColumns: string[];
 };

package/package.json

@@ -1,102 +1,101 @@
 {
   "name": "@gravity-ui/react-data-table",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "DataTable component",
+  "keywords": [
+    "table"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gravity-ui/react-data-table"
+  },
+  "license": "MIT",
+  "sideEffects": [
+    "*.scss"
+  ],
   "main": "build/esm/lib/index.js",
   "types": "build/esm/lib/index.d.ts",
   "files": [
     "build/esm/lib"
   ],
-  "sideEffects": [
-    "*.scss"
-  ],
   "scripts": {
+    "build": "npm run build:clean && npm run build:compile && npm run build:copy",
+    "build-storybook": "storybook build -c .storybook -o storybook-static",
+    "build:clean": "rm -rf build",
+    "build:compile": "tsc",
+    "build:copy": "copyfiles -u 1 \"src/**/*.scss\" build/esm",
+    "dev": "storybook dev -p 8888 -c .storybook",
     "lint:js": "eslint src --ext .js,.jsx,.ts,.tsx",
     "lint:other": "npm run prettier -- --check",
     "lint:styles": "stylelint 'src/**/*.scss'",
     "lint": "run-p lint:*",
     "prettier": "prettier '**/*.{md,json,yaml,yml}'",
-    "start": "start-storybook -p 7007",
-    "build-storybook": "build-storybook -c .storybook -o storybook-static",
     "typecheck": "npm run build:compile -- --noEmit",
     "test": "jest",
-    "build:clean": "rm -rf build",
-    "build:compile": "tsc",
-    "build:copy": "copyfiles -u 1 \"src/**/*.scss\" build/esm",
-    "build": "npm run build:clean && npm run build:compile && npm run build:copy",
     "prepublishOnly": "npm run build"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gravity-ui/react-data-table"
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged",
+    "commit-msg": "npx commitlint --edit $1"
   },
-  "keywords": [
-    "table"
-  ],
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=16.14.0",
-    "prop-types": ">=15.8.0",
-    "@bem-react/classname": ">=1.6.0"
+  "nano-staged": {
+    "*.scss": [
+      "stylelint --fix --quiet"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet"
+    ],
+    "*.{md,json,yaml,yml}": [
+      "prettier --write"
+    ]
   },
-  "publishConfig": {
-    "access": "public"
+  "dependencies": {
+    "@bem-react/classname": ">=1.6.0",
+    "react-list": "^0.8.17"
   },
   "devDependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@commitlint/cli": "15.0.0",
-    "@commitlint/config-conventional": "15.0.0",
-    "@gravity-ui/eslint-config": "^2.0.0",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@gravity-ui/eslint-config": "2.2",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^4.0.5",
-    "@storybook/addon-essentials": "6.4.9",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.4.9",
-    "@types/jest": "27.4.0",
-    "@types/node": "14.18.4",
+    "@gravity-ui/uikit": "^5.4.1",
+    "@storybook/addon-actions": "^7.3.1",
+    "@storybook/addon-essentials": "^7.3.1",
+    "@storybook/addon-interactions": "^7.3.1",
+    "@storybook/addon-links": "^7.3.1",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.3.1",
+    "@storybook/react-webpack5": "^7.3.1",
     "@types/react": "16.14.21",
     "@types/react-dom": "16.9.14",
     "@types/react-list": "0.8.7",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "copyfiles": "2.4.1",
-    "css-loader": "5.2.7",
-    "eslint": "8.6.0",
-    "jest": "27.4.5",
-    "nano-staged": "0.5.0",
+    "eslint": "8.47",
+    "jest": "^29.6.2",
+    "nano-staged": "^0.8.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.5",
+    "postcss": "^8.4.28",
     "prettier": "2.5.1",
-    "prop-types": "15.8.0",
+    "prop-types": "^15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0",
-    "sass": "1.45.2",
-    "sass-loader": "10.2.0",
-    "simple-git-hooks": "2.7.0",
-    "style-loader": "2.0.0",
+    "sass": "1.65",
+    "sass-loader": "^13.3.2",
+    "simple-git-hooks": "2.9",
+    "storybook": "^7.3.1",
+    "style-loader": "^3.3.3",
     "stylelint": "^14.16.1",
-    "ts-jest": "27.1.2",
-    "typescript": "4.5.4",
-    "webpack": "4.46.0"
-  },
-  "dependencies": {
-    "react-list": "0.8.16"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
   },
-  "nano-staged": {
-    "*.scss": [
-      "stylelint --fix --quiet"
-    ],
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix --quiet"
-    ],
-    "*.{md,json,yaml,yml}": [
-      "prettier --write"
-    ]
+  "peerDependencies": {
+    "react": ">=16.14.0"
   },
-  "simple-git-hooks": {
-    "pre-commit": "npx nano-staged",
-    "commit-msg": "npx commitlint --edit $1"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/CHANGELOG.md

@@ -1,76 +0,0 @@
-# Changelog
-
-## [1.2.0](https://github.com/gravity-ui/react-data-table/compare/v1.1.0...v1.2.0) (2023-09-05)
-
-
-### Features
-
-* migrate to @bem-react/classname ([#32](https://github.com/gravity-ui/react-data-table/issues/32)) ([af0987e](https://github.com/gravity-ui/react-data-table/commit/af0987e65e68766747a7956ff8521014c6037648))
-
-## [1.1.0](https://github.com/gravity-ui/react-data-table/compare/v1.0.3...v1.1.0) (2023-05-05)
-
-
-### Features
-
-* add event in cell click handler ([#26](https://github.com/gravity-ui/react-data-table/issues/26)) ([11e7a00](https://github.com/gravity-ui/react-data-table/commit/11e7a0067d980f6e3a215468d86df9b6a691428f))
-
-## [1.0.3](https://github.com/gravity-ui/react-data-table/compare/v1.0.2...v1.0.3) (2023-02-02)
-
-
-### Bug Fixes
-
-* move to gravity uikit ([#24](https://github.com/gravity-ui/react-data-table/issues/24)) ([98c7fa6](https://github.com/gravity-ui/react-data-table/commit/98c7fa6b89b2253a9f8df9909f017b556295c36b))
-
-### [1.0.2](https://www.github.com/yandex-cloud/react-data-table/compare/v1.0.1...v1.0.2) (2022-03-21)
-
-
-### chore
-
-* freeze direct dependencies ([a842bf4](https://www.github.com/yandex-cloud/react-data-table/commit/a842bf48ccd09c2f8a6158bb1250b5b6643844b5))
-
-### [1.0.1](https://www.github.com/yandex-cloud/react-data-table/compare/v1.0.0...v1.0.1) (2022-02-25)
-
-
-### Bug Fixes
-
-* clarify column width property type ([4b43afe](https://www.github.com/yandex-cloud/react-data-table/commit/4b43afe96ac0fe515b08e492ede12f9ed3299dec))
-
-## [1.0.0](https://www.github.com/yandex-cloud/react-data-table/compare/v0.2.2...v1.0.0) (2022-02-03)
-
-
-### docs
-
-* translate README.md ([160c576](https://www.github.com/yandex-cloud/react-data-table/commit/160c576a9869ea03f4b80ce172c2f537036aeae4))
-
-### [0.2.2](https://www.github.com/yandex-cloud/react-data-table/compare/v0.2.1...v0.2.2) (2022-01-13)
-
-
-### Bug Fixes
-
-* emit a warning when columns with duplicate names are provided ([08d0294](https://www.github.com/yandex-cloud/react-data-table/commit/08d029422cceae9145b3aa65d99b2931ec106441))
-
-### [0.2.1](https://www.github.com/yandex-cloud/react-data-table/compare/v0.2.0...v0.2.1) (2022-01-12)
-
-
-### Bug Fixes
-
-* put back missing styles into package ([c7d3ba0](https://www.github.com/yandex-cloud/react-data-table/commit/c7d3ba0c9b08af7c517249bcca5abef4f1b9fff8))
-* use THEMES type for theme prop ([af0bb33](https://www.github.com/yandex-cloud/react-data-table/commit/af0bb3319a483bd19bab8d503d01611871e8ef31))
-
-## [0.2.0](https://www.github.com/yandex-cloud/react-data-table/compare/v0.1.0...v0.2.0) (2022-01-11)
-
-
-### ⚠ BREAKING CHANGES
-
-* theme previously known as 'common' is now called 'yandex-cloud' and is a default one, theme previously known as 'internal' is now called 'legacy'.
-
-### Bug Fixes
-
-* make 'yandex-cloud' theme a new default theme ([ec2ead6](https://www.github.com/yandex-cloud/react-data-table/commit/ec2ead60cb3244a493db12bc5cd8d844e084e4d4))
-
-## 0.1.0 (2022-01-04)
-
-
-### Features
-
-* initial import of library files ([5d15cab](https://www.github.com/yandex-cloud/react-data-table/commit/5d15cabc78c44eb8e502fe3e74328b456a981710))