@gravity-ui/react-data-table 1.0.3

package/build/esm/lib/DataTable.js

@@ -0,0 +1,838 @@
+import { __rest } from "tslib";
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import ReactList from 'react-list';
+import './DataTable.scss';
+import { ASCENDING, CENTER, DESCENDING, FIXED, INDEX_COLUMN, LEFT, MOVING, RIGHT } from './constants';
+import { positionStickySupported } from './featureSupport';
+import { HeightObserver } from './height-observer';
+import { externalToInternalSortOrder, getSortOrder, getSortedData, internalToExternalSortOrder, } from './util';
+const b = cn('data-table');
+const ICON_ASC = (React.createElement("svg", { className: b('icon'), viewBox: "0 0 10 6", width: "10", height: "6" },
+    React.createElement("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" })));
+const ICON_DESC = (React.createElement("svg", { className: b('icon'), viewBox: "0 0 10 6", width: "10", height: "6" },
+    React.createElement("path", { fill: "currentColor", d: "M0 1h10l-5 5z" })));
+const ICONS = {
+    ICON_ASC,
+    ICON_DESC,
+};
+function getSortIcon(order) {
+    switch (order) {
+        case ASCENDING:
+            return ICONS.ICON_ASC;
+        case DESCENDING:
+            return ICONS.ICON_DESC;
+        default:
+            return false;
+    }
+}
+const ColumnSortIcon = ({ sortOrder, sortIndex, sortable, defaultOrder }) => {
+    if (sortable) {
+        return (React.createElement("span", { className: b('sort-icon', { shadow: !sortOrder }), "data-index": sortIndex }, getSortIcon(sortOrder || defaultOrder)));
+    }
+    else {
+        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);
+        this.onClick = (event) => {
+            if (this.props.onClick) {
+                const { row, index } = this.props;
+                this.props.onClick(row, index, event);
+            }
+        };
+    }
+    render() {
+        const { className, columns, row, index, odd, footer, span, headerData } = this.props;
+        return (React.createElement("tr", { className: b('row', { odd, footer, 'header-data': headerData }, className), onClick: this.onClick }, columns.map((column, columnIndex) => {
+            let rowSpan;
+            if (span) {
+                if (span[column.name] === 0) {
+                    return null;
+                }
+                else {
+                    rowSpan = span[column.name];
+                }
+            }
+            const value = column._getValue(row);
+            return (React.createElement("td", { key: columnIndex, className: column._className, title: column._getTitle(row), style: column.customStyle({
+                    row,
+                    index,
+                    name: column.name,
+                    header: false,
+                    footer,
+                    headerData,
+                }), rowSpan: rowSpan, onClick: column._getOnClick({ row, index, footer, headerData }) }, column._renderValue({ value, row, index, footer, headerData })));
+        })));
+    }
+}
+TableRow.defaultProps = {
+    footer: false,
+};
+class TableHead extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._dataRowsRef = null;
+        this.renderedColumns = [];
+        this.renderHeadCell = (headCell) => {
+            const { column, rowSpan, colSpan } = headCell;
+            const { sortable = false, header = column.name, className, index, columnIndex, align, } = column;
+            const { headerTitle = (typeof header === 'string' && header) || undefined } = column;
+            return (React.createElement("th", { ref: column.dataColumn ? this._getColumnRef(columnIndex) : null, className: b('th', { sortable, align }, className), key: column.name, title: headerTitle, "data-index": index, colSpan: colSpan, rowSpan: rowSpan, style: column.customStyle && column.customStyle({ header: true, name: column.name }), onClick: this._getOnSortClick(column) },
+                React.createElement("div", { className: b('head-cell') },
+                    header,
+                    React.createElement(ColumnSortIcon, Object.assign({}, column)))));
+        };
+        this.renderHeadLevel = (row, rowIndex) => {
+            return (React.createElement("tr", { key: rowIndex, className: b('head-row') }, row.map(this.renderHeadCell)));
+        };
+        this.dataRowsRef = (ref) => {
+            var _a;
+            this._dataRowsRef = ref;
+            if (ref) {
+                (_a = this.dataRowsHeightObserver) === null || _a === void 0 ? void 0 : _a.checkAndUpdateHeight();
+            }
+        };
+        this._getColumnRef = (index) => {
+            return (node) => {
+                this.renderedColumns[index] = node;
+            };
+        };
+    }
+    componentDidMount() {
+        this._calculateColumnsWidth();
+        if ('function' === typeof this.props.onDataRowsHeightChange) {
+            this.dataRowsHeightObserver = new HeightObserver({
+                getSrcElement: () => this._dataRowsRef,
+                onHeightChange: (height) => {
+                    if ('function' === typeof this.props.onDataRowsHeightChange) {
+                        this.props.onDataRowsHeightChange(height);
+                    }
+                },
+            });
+        }
+    }
+    componentDidUpdate() {
+        var _a;
+        this._calculateColumnsWidth();
+        (_a = this.dataRowsHeightObserver) === null || _a === void 0 ? void 0 : _a.checkAndUpdateHeight();
+    }
+    componentWillUnmount() {
+        var _a;
+        (_a = this.dataRowsHeightObserver) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    render() {
+        const { headColumns, dataColumns, renderedDataRows } = this.props;
+        this.renderedColumns.length = dataColumns.length;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("thead", { className: b('head') }, headColumns.map(this.renderHeadLevel)),
+            renderedDataRows === undefined ? null : (React.createElement("tbody", { ref: this.dataRowsRef }, renderedDataRows))));
+    }
+    _calculateColumnsWidth() {
+        const { onColumnsUpdated } = this.props;
+        if (typeof onColumnsUpdated === 'function') {
+            requestAnimationFrame(() => {
+                const widths = this.renderedColumns.map((col) => col && col.getBoundingClientRect().width);
+                onColumnsUpdated(widths);
+            });
+        }
+    }
+    onSort(column, multisort) {
+        const { onSort } = this.props;
+        if (typeof onSort === 'function') {
+            onSort(column, multisort);
+        }
+    }
+    _getOnSortClick(column) {
+        const { sortable = false, name } = column;
+        if (name === INDEX_COLUMN) {
+            return () => {
+                this.onSort();
+            };
+        }
+        return sortable
+            ? (event) => {
+                this.onSort(column, event.ctrlKey || event.metaKey);
+            }
+            : 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);
+        this.state = {
+            style: { top: StickyHead.defaultProps.top },
+        };
+        this.onDataRowsHeightChange = (height) => {
+            this.props.onDataRowsHeightChange(height + 1);
+        };
+        this._nodeRef = (node) => {
+            this._node = node;
+        };
+    }
+    static getDerivedStateFromProps(props, state) {
+        var _a;
+        if (props.top !== ((_a = state.style) === null || _a === void 0 ? void 0 : _a.top)) {
+            return props.top === undefined ? null : { style: { top: props.top } };
+        }
+        return null;
+    }
+    render() {
+        const _a = this.props, { mode, top: _top } = _a, props = __rest(_a, ["mode", "top"]);
+        if (mode === MOVING) {
+            const { style } = this.state;
+            return (React.createElement("div", { className: b('sticky', { moving: true, head: true }), style: style }, this.renderHeader(props)));
+        }
+        else {
+            const { widths = [], right = 0 } = this.state;
+            const totalWidth = widths.reduce((sum, val) => sum + val, 0);
+            return (React.createElement("div", { ref: this._nodeRef, className: b('sticky', { fixed: true, head: true }), style: { right: right, display: totalWidth ? undefined : 'none' } }, this.renderHeader(props)));
+        }
+    }
+    setScrollLeft(scrollLeft) {
+        requestAnimationFrame(() => {
+            if (this._node) {
+                this._node.scrollLeft = scrollLeft;
+            }
+        });
+    }
+    setRightPosition(value) {
+        if (this.state.right !== value && !this.props.top && this.props.mode !== MOVING) {
+            this.setState({ right: value });
+        }
+    }
+    renderHeader(props) {
+        const { widths = [] } = this.state;
+        const totalWidth = widths.reduce((sum, val) => sum + val, 0);
+        return (React.createElement("div", { className: b('table-wrapper', { sticky: true }) },
+            React.createElement("table", { className: b('table', { sticky: true }), style: { width: totalWidth || 'auto' } },
+                React.createElement("colgroup", null, widths.map((width, index) => (React.createElement("col", { key: index, style: { width } })))),
+                React.createElement(TableHead, Object.assign({}, props, { onDataRowsHeightChange: this.onDataRowsHeightChange })))));
+    }
+    updateWidths(newWidths = []) {
+        const { widths = [] } = this.state;
+        if (newWidths.some((v, i) => v !== widths[i])) {
+            this.setState({ widths: newWidths });
+        }
+    }
+}
+StickyHead.propTypes = {
+    mode: PropTypes.oneOf([FIXED, MOVING]),
+    top: PropTypes.number,
+    renderedDataRows: PropTypes.node,
+};
+StickyHead.defaultProps = {
+    top: 0,
+};
+class StickyFooter extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            style: { bottom: 0 },
+        };
+        this._nodeFixed = null;
+        this._nodeMoving = null;
+        this._nodeFixedRef = (node) => {
+            this._nodeFixed = node;
+        };
+        this._nodeMovingRef = (node) => {
+            var _a;
+            this._nodeMoving = node;
+            if (node) {
+                (_a = this.heightObserver) === null || _a === void 0 ? void 0 : _a.checkAndUpdateHeight();
+            }
+        };
+    }
+    static getDerivedStateFromProps(props, state) {
+        var _a;
+        if (props.bottom !== ((_a = state.style) === null || _a === void 0 ? void 0 : _a.bottom)) {
+            return props.bottom === undefined ? null : { style: { bottom: props.bottom } };
+        }
+        return null;
+    }
+    componentDidMount() {
+        this.heightObserver = new HeightObserver({
+            getSrcElement: () => this._nodeMoving,
+            onHeightChange: this.props.onMovingHeightChange,
+        });
+    }
+    componentDidUpdate() {
+        var _a;
+        (_a = this.heightObserver) === null || _a === void 0 ? void 0 : _a.checkAndUpdateHeight();
+    }
+    componentWillUnmount() {
+        var _a;
+        (_a = this.heightObserver) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    render() {
+        if (!this.props.renderedRows) {
+            return null;
+        }
+        const { mode, renderedRows } = this.props;
+        if (mode === MOVING) {
+            const { style } = this.state;
+            return (React.createElement("div", { ref: this._nodeMovingRef, className: b('sticky', { footer: true, moving: true }), style: style }, this.renderFooter(renderedRows)));
+        }
+        else {
+            const { widths = [], right = 0 } = this.state;
+            const totalWidth = widths.reduce((sum, val) => sum + val, 0);
+            return (React.createElement("div", { ref: this._nodeFixedRef, className: b('sticky', { footer: true, fixed: true }), style: { right: right, display: totalWidth ? undefined : 'none' } }, this.renderFooter(renderedRows)));
+        }
+    }
+    setScrollLeft(scrollLeft) {
+        requestAnimationFrame(() => {
+            if (this._nodeFixed) {
+                this._nodeFixed.scrollLeft = scrollLeft;
+            }
+        });
+    }
+    setRightPosition(value) {
+        if (this.state.right !== value && !this.props.bottom && this._nodeFixed) {
+            this.setState({ right: value });
+        }
+    }
+    renderFooter(renderedRows) {
+        const { widths = [] } = this.state;
+        const totalWidth = widths.reduce((sum, val) => sum + val, 0);
+        return (React.createElement("div", { className: b('table-wrapper', { sticky: true }) },
+            React.createElement("table", { className: b('table', { sticky: true }), style: { width: totalWidth || 'auto' } },
+                React.createElement("colgroup", null, widths.map((width, index) => (React.createElement("col", { key: index, style: { width } })))),
+                React.createElement("tbody", null, renderedRows))));
+    }
+    updateWidths(newWidths = []) {
+        const { widths = [] } = this.state;
+        if (newWidths.some((v, i) => v !== widths[i])) {
+            this.setState({ widths: newWidths });
+        }
+    }
+}
+StickyFooter.defaultProps = {
+    bottom: 0,
+};
+class Table extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {};
+        this._refBody = (node) => {
+            this._body = node;
+        };
+        this._refBox = (node) => {
+            this._box = node;
+        };
+        this._refHead = (node) => {
+            this._head = node;
+        };
+        this._refStickyHead = (node) => {
+            this._stickyHead = node;
+        };
+        this._refStickyFooter = (node) => {
+            this._stickyFooter = node;
+        };
+        this._onBoxScroll = () => {
+            this._updateBoxConstraints();
+        };
+        this._onColumnsUpdated = (widths) => {
+            if (this._stickyHead) {
+                this._stickyHead.updateWidths(widths);
+            }
+            if (this._stickyFooter) {
+                this._stickyFooter.updateWidths(widths);
+            }
+        };
+        this.onMovingHeaderDataRowsHeightChange = (height) => {
+            var _a;
+            if (-height !== ((_a = this.state.movingHeaderStyle) === null || _a === void 0 ? void 0 : _a.marginTop)) {
+                this.setState({ movingHeaderStyle: { marginTop: -height } });
+            }
+        };
+        this.onMovingFooterHeightChange = (height) => {
+            var _a;
+            if (-height !== ((_a = this.state.movingFooterStyle) === null || _a === void 0 ? void 0 : _a.marginBottom)) {
+                this.setState({ movingFooterStyle: { marginBottom: -height } });
+            }
+        };
+        this.renderRow = (vIndex) => {
+            const { data, onRowClick } = this.props;
+            const { row, index, span } = data[vIndex];
+            return this.renderRowImpl(row, index, { onRowClick, odd: vIndex % 2 === 0, span });
+        };
+        this.renderFooterRow = (rowData, index) => {
+            return this.renderRowImpl(rowData, index, { footer: true });
+        };
+        this.renderHeaderRow = (rowData, index) => {
+            return this.renderRowImpl(rowData, index, { headerData: true });
+        };
+        this.renderRowImpl = (row, index, { onRowClick, odd, span, footer, headerData } = {}) => {
+            const { columns: { dataColumns }, rowClassName, rowKey, } = 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 }));
+        };
+        this.renderTable = (items, ref) => {
+            const { footerData, columns: { dataColumns }, settings: { stickyHead }, } = this.props;
+            const { movingHeaderStyle, movingFooterStyle } = this.state;
+            const stickyFooterMode = this.getStickyFooterMode();
+            return (React.createElement("div", { className: b('table-wrapper'), style: stickyFooterMode === MOVING ? movingFooterStyle : undefined },
+                React.createElement("table", { className: b('table'), style: stickyHead === MOVING ? movingHeaderStyle : undefined },
+                    React.createElement("colgroup", null, dataColumns.map(({ width }, index) => {
+                        return React.createElement("col", { key: index, width: width });
+                    })),
+                    this.renderHead(),
+                    React.createElement("tbody", { ref: ref }, items.length ? items : this._getEmptyRow()),
+                    footerData && (React.createElement("tfoot", { className: b('foot', { 'has-sticky-footer': stickyFooterMode }) }, footerData.map(this.renderFooterRow))))));
+        };
+    }
+    componentDidMount() {
+        const { stickyHead, syncHeadOnResize } = this.props.settings;
+        this._updateBoxConstraints();
+        if (stickyHead && syncHeadOnResize && !this._onWindowResize) {
+            this._onWindowResize = () => {
+                this.syncHeadWidths();
+            };
+            window.addEventListener('resize', this._onWindowResize);
+        }
+    }
+    componentDidUpdate() {
+        this._updateBoxConstraints();
+    }
+    componentWillUnmount() {
+        if (this._onWindowResize) {
+            window.removeEventListener('resize', this._onWindowResize);
+            delete this._onWindowResize;
+        }
+    }
+    render() {
+        const { className } = this.props;
+        const { stickyHead, dynamicRender } = this.props.settings;
+        const stickyFooter = this.getStickyFooterMode();
+        return (React.createElement("div", { className: className, ref: this._refBody },
+            stickyHead && this.renderStickyHead(),
+            React.createElement("div", { ref: this._refBox, className: b('box', { 'sticky-head': stickyHead, 'sticky-footer': stickyFooter }), onScroll: this._onBoxScroll }, dynamicRender ? this.renderTableDynamic() : this.renderTableSimple()),
+            stickyFooter && this.renderStickyFooter()));
+    }
+    _updateBoxConstraints() {
+        const hasSticky = this._stickyHead || this._stickyFooter;
+        if (this._box && hasSticky) {
+            const scrollWidth = this._box.offsetWidth - this._box.clientWidth;
+            if (this._stickyHead) {
+                this._stickyHead.setRightPosition(scrollWidth);
+                this._stickyHead.setScrollLeft(this._box.scrollLeft);
+            }
+            if (this._stickyFooter) {
+                this._stickyFooter.setRightPosition(scrollWidth);
+                this._stickyFooter.setScrollLeft(this._box.scrollLeft);
+            }
+        }
+    }
+    syncHeadWidths() {
+        if (this._head) {
+            this._head._calculateColumnsWidth();
+        }
+    }
+    _getEmptyRow() {
+        const { columns: { dataColumns }, emptyDataMessage, renderEmptyRow, } = this.props;
+        if (typeof renderEmptyRow === 'function') {
+            return renderEmptyRow(dataColumns);
+        }
+        else {
+            return (React.createElement("tr", { className: b('row') },
+                React.createElement("td", { className: b('td', b('no-data')), colSpan: dataColumns.length }, emptyDataMessage)));
+        }
+    }
+    renderHead() {
+        const { columns, onSort } = this.props;
+        const { displayIndices } = this.props.settings;
+        const rows = this.renderHeaderRows();
+        return (React.createElement(TableHead, Object.assign({ ref: this._refHead }, columns, { displayIndices: Boolean(displayIndices), onSort: onSort, onColumnsUpdated: this._onColumnsUpdated, renderedDataRows: rows })));
+    }
+    renderStickyHead() {
+        const { columns, onSort } = this.props;
+        const { displayIndices, stickyTop, stickyHead } = this.props.settings;
+        const top = stickyTop === 'auto' && this._body && this._body.parentNode
+            ? this._body.parentNode.offsetTop
+            : Number(stickyTop) || 0;
+        const rows = this.renderHeaderRows();
+        return (React.createElement(StickyHead, Object.assign({ mode: stickyHead, top: top, ref: this._refStickyHead }, columns, { displayIndices: displayIndices, onSort: onSort, renderedDataRows: rows, onDataRowsHeightChange: this.onMovingHeaderDataRowsHeightChange })));
+    }
+    renderStickyFooter() {
+        const { columns } = this.props;
+        const { stickyBottom } = this.props.settings;
+        let bottom = Number(stickyBottom) || 0;
+        if (stickyBottom === 'auto' && this._body && this._body.parentNode) {
+            const el = this._body.parentNode;
+            bottom = el.offsetTop + el.offsetHeight;
+        }
+        const rows = this.renderFooterRows();
+        return (React.createElement(StickyFooter, { ref: this._refStickyFooter, mode: this.getStickyFooterMode(), bottom: bottom, dataColumns: columns.dataColumns, renderedRows: rows, onMovingHeightChange: this.onMovingFooterHeightChange }));
+    }
+    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 })));
+    }
+    renderTableSimple() {
+        const { data } = this.props;
+        const rows = data.map((_row, index) => this.renderRow(index));
+        return this.renderTable(rows, null);
+    }
+    renderHeaderRows() {
+        const { headerData } = this.props;
+        return headerData && headerData.map(this.renderHeaderRow);
+    }
+    renderFooterRows() {
+        const { footerData } = this.props;
+        return footerData === null || footerData === void 0 ? void 0 : footerData.map(this.renderFooterRow);
+    }
+    getStickyFooterMode() {
+        const { footerData } = this.props;
+        if (!(footerData === null || footerData === void 0 ? void 0 : footerData.length)) {
+            return false;
+        }
+        const { stickyFooter } = this.props.settings;
+        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);
+        this.state = Object.assign({ settings: {} }, externalToInternalSortOrder(this.props.initialSortOrder, this.props.settings));
+        this._tableRef = (node) => {
+            this.table = node;
+        };
+        this.renderMemoizedCell = ({ column, value, row, index, footer, headerData }) => {
+            return (React.createElement(MemoizedCell, Object.assign({}, {
+                column,
+                value,
+                row,
+                index,
+                footer,
+                headerData,
+            })));
+        };
+        this.getColumn = (column, columnIndex) => {
+            const { settings } = this.state;
+            const { defaultOrder } = settings;
+            const { sortOrder = {}, sortColumns, indexColumn } = this.state;
+            const indexAdjustment = Number(Boolean(indexColumn));
+            const isSortEnabled = this.isSortEnabled();
+            const { name, accessor = column.name, align, sortable = settings.sortable, group, autogroup = true, } = column;
+            const { sortAccessor, onClick } = column;
+            const _className = b('td', { align }, column.className);
+            const _getValue = typeof accessor === 'function'
+                ? (row) => accessor(row)
+                : (row) => {
+                    return Object.prototype.hasOwnProperty.call(row, accessor)
+                        ? row[accessor]
+                        : undefined;
+                };
+            const _getTitle = typeof column.title === 'function'
+                ? (row) => column.title(row)
+                : () => (typeof column.title === 'string' && column.title) || undefined;
+            const _getSortValue = typeof sortAccessor === 'function' ? (data) => sortAccessor(data) : _getValue;
+            const _renderValue = typeof column.render === 'function'
+                ? ({ value, row, index, footer, headerData }) => this.renderMemoizedCell({ column, value, row, index, footer, headerData })
+                : ({ value }) => value;
+            const customStyle = typeof column.customStyle === 'function' ? column.customStyle : () => undefined;
+            const _getOnClick = typeof onClick === 'function'
+                ? (data) => () => onClick(data, column)
+                : () => undefined;
+            return Object.assign(Object.assign({ index: columnIndex - indexAdjustment, columnIndex, dataColumn: true, defaultOrder }, column), { sortable: sortable && isSortEnabled, _className,
+                _getValue,
+                _getTitle,
+                _getSortValue,
+                _renderValue,
+                _getOnClick,
+                customStyle,
+                group,
+                autogroup, sortOrder: sortOrder[name] || undefined, sortIndex: sortColumns.length > 1 ? sortColumns.indexOf(name) + 1 : undefined });
+        };
+        this.isSortEnabled = () => {
+            const { data } = this.props;
+            return Array.isArray(data) && data.length > 1;
+        };
+        this.onSort = (column, multisort) => {
+            if (column) {
+                const { sortOrder, sortColumns } = getSortOrder(column, this.state, multisort, this.props.settings);
+                this.setState({ sortOrder, sortColumns });
+                const { onSort } = this.props;
+                if (typeof onSort === 'function') {
+                    const formattedSortOrder = internalToExternalSortOrder(sortOrder);
+                    onSort(formattedSortOrder);
+                }
+            }
+            else {
+                this.setState({ sortOrder: {}, sortColumns: [] });
+                const { onSort } = this.props;
+                if (typeof onSort === 'function') {
+                    onSort([]);
+                }
+            }
+        };
+    }
+    static normalizeStickyHead(stickyHead = false) {
+        if (stickyHead === MOVING && !positionStickySupported) {
+            console.warn('Your browser does not support position: sticky, moving sticky headers will be disabled.');
+            return false;
+        }
+        return stickyHead;
+    }
+    static calculateSettings(nextSettings) {
+        return Object.assign(Object.assign(Object.assign({}, DataTableView.defaultProps.settings), nextSettings), { stickyHead: DataTableView.normalizeStickyHead(nextSettings.stickyHead), stickyFooter: DataTableView.normalizeStickyHead(nextSettings.stickyFooter) });
+    }
+    static getIndexColumn({ startIndex, data, visibleRowIndex, }) {
+        const lastIndex = startIndex + data.length + 1;
+        return {
+            name: INDEX_COLUMN,
+            header: '#',
+            className: b('index'),
+            render: ({ row, index, footer, headerData }) => {
+                var _a, _b;
+                if (headerData) {
+                    return (_a = row.headerIndex) !== null && _a !== void 0 ? _a : startIndex + index;
+                }
+                if (footer) {
+                    return (_b = row.footerIndex) !== null && _b !== void 0 ? _b : startIndex + index;
+                }
+                if (typeof visibleRowIndex === 'function') {
+                    return visibleRowIndex(row, index);
+                }
+                return startIndex + index;
+            },
+            sortable: false,
+            width: 20 + Math.ceil(Math.log10(lastIndex)) * 10,
+        };
+    }
+    static getDerivedStateFromProps(nextProps) {
+        const settings = DataTableView.calculateSettings(nextProps.settings);
+        return Object.assign({ settings, indexColumn: Boolean(settings.displayIndices) && DataTableView.getIndexColumn(nextProps) }, (nextProps.sortOrder
+            ? 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 { settings, sortOrder, sortColumns } = this.state;
+        const { highlightRows = false, stripedRows = false, headerMod = false } = settings;
+        const tableClassName = b({
+            'highlight-rows': highlightRows,
+            'striped-rows': stripedRows,
+            header: headerMod,
+            theme: theme,
+        });
+        const dataColumns = this.getComplexColumns(columns);
+        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, {
+                sortOrder,
+                sortColumns,
+            }, {
+                nullBeforeNumbers,
+                externalSort: settings === null || settings === void 0 ? void 0 : settings.externalSort,
+            }), footerData: footerData, onSort: this.onSort }));
+    }
+    getComplexColumns(columns) {
+        const headColumns = [];
+        const dataColumns = [];
+        const headCells = [];
+        const { indexColumn } = this.state;
+        const allColumns = indexColumn ? [indexColumn, ...columns] : columns;
+        const processLevel = (list, level) => {
+            if (!headColumns[level]) {
+                headColumns[level] = [];
+            }
+            const items = headColumns[level];
+            return list.reduce((subCount, item) => {
+                let colSpan = 1;
+                let itemLevel = -1;
+                let column = item;
+                if (Array.isArray(item.sub)) {
+                    colSpan = processLevel(item.sub, level + 1);
+                }
+                else {
+                    const tmp = this.getColumn(item, dataColumns.length);
+                    dataColumns.push(tmp);
+                    itemLevel = level;
+                    column = tmp;
+                }
+                const headCell = { column, itemLevel, colSpan, rowSpan: 0 };
+                headCells.push(headCell);
+                items.push(headCell);
+                return colSpan + subCount;
+            }, 0);
+        };
+        processLevel(allColumns, 0);
+        headCells.forEach((cell) => {
+            cell.rowSpan = cell.itemLevel < 0 ? 1 : headColumns.length - cell.itemLevel;
+        });
+        return { headColumns, dataColumns };
+    }
+    resize() {
+        if (this.table) {
+            this.table.syncHeadWidths();
+        }
+    }
+}
+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',
+    settings: {
+        displayIndices: true,
+        dynamicRenderMinSize: 1,
+        stickyHead: false,
+        stickyFooter: false,
+        sortable: true,
+        externalSort: false,
+        defaultOrder: ASCENDING,
+    },
+    rowKey: (row, index) => Object.prototype.hasOwnProperty.call(row, 'id') ? row.id : index,
+    initialSortOrder: {},
+    initialSortColumns: [],
+    theme: 'yandex-cloud',
+};
+DataTableView.getSortedData = getSortedData;
+function doColumnsHaveDuplicateNames(columns) {
+    const names = new Set(columns.map((column) => column.name));
+    return names.size !== columns.length;
+}
+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 {
+    constructor() {
+        super(...arguments);
+        this.state = {};
+        this._tableRef = (node) => {
+            this.table = node;
+        };
+    }
+    static setCustomIcons(customIcons) {
+        ICONS.ICON_ASC = customIcons.ICON_ASC || ICON_ASC;
+        ICONS.ICON_DESC = customIcons.ICON_DESC || ICON_DESC;
+    }
+    componentDidMount() {
+        if (doColumnsHaveDuplicateNames(this.props.columns)) {
+            console.warn(DUPLICATE_COLUMN_NAMES_WARNING);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { columns } = this.props;
+        if (columns !== prevProps.columns && doColumnsHaveDuplicateNames(columns)) {
+            console.warn(DUPLICATE_COLUMN_NAMES_WARNING);
+        }
+    }
+    componentDidCatch(error) {
+        console.error(error);
+        this.setState({
+            error,
+        });
+        const { onError } = this.props;
+        if ('function' === typeof onError) {
+            onError(error);
+        }
+    }
+    render() {
+        const { error } = this.state;
+        if (error) {
+            return (React.createElement("pre", { className: b('error') },
+                "DataTable got stuck in invalid state. Please tell developers about it.",
+                '\n\n',
+                (error.stack && String(error.stack)) || String(error)));
+        }
+        else {
+            return React.createElement(DataTableView, Object.assign({ ref: this._tableRef }, this.props));
+        }
+    }
+    resize() {
+        if (this.table) {
+            this.table.resize();
+        }
+    }
+}
+DataTable.FIXED = FIXED;
+DataTable.MOVING = MOVING;
+DataTable.ASCENDING = ASCENDING;
+DataTable.DESCENDING = DESCENDING;
+DataTable.LEFT = LEFT;
+DataTable.CENTER = CENTER;
+DataTable.RIGHT = RIGHT;