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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.3.0](https://github.com/gravity-ui/react-data-table/compare/v1.2.0...v1.3.0) (2024-02-28)
+
+
+### Features
+
+* add custom colspan for table row ([3316f62](https://github.com/gravity-ui/react-data-table/commit/3316f6283a1f504035c381f1baed6245f086e086))
+
 ## [1.2.0](https://github.com/gravity-ui/react-data-table/compare/v1.1.0...v1.2.0) (2023-09-05)
 
 

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

@@ -9,6 +9,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>;
@@ -128,6 +144,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?: {
@@ -153,6 +172,7 @@ declare class Table<T> extends React.PureComponent<TableProps<T>, TableState> {
         startIndex: PropTypes.Requireable<number>;
         onSort: PropTypes.Requireable<(...args: any[]) => any>;
         renderEmptyRow: PropTypes.Requireable<(...args: any[]) => any>;
+        getColSpansOfRow: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: TableState;
     _onWindowResize?: () => void;
@@ -214,6 +234,7 @@ interface DataTableViewState<T> extends SortOrderWithSortColumns {
 declare type HeadPositionInner = HeadPosition | false;
 declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTableViewState<T>> {
     static propTypes: {
+        getColSpansOfRow: PropTypes.Requireable<(...args: any[]) => any>;
         columns: PropTypes.Validator<any[]>;
         headerData: PropTypes.Requireable<any[]>;
         data: PropTypes.Validator<any[]>;

package/build/esm/lib/DataTable.js

@@ -50,8 +50,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 +79,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 })));
         })));
     }
 }
@@ -378,9 +388,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;
@@ -520,6 +530,7 @@ Table.propTypes = {
     startIndex: PropTypes.number,
     onSort: PropTypes.func,
     renderEmptyRow: PropTypes.func,
+    getColSpansOfRow: PropTypes.func,
 };
 const MemoizedCell = React.memo(CellImpl);
 function CellImpl(props) {
@@ -646,7 +657,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 +670,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,
             }, {
@@ -710,6 +721,7 @@ class DataTableView extends React.Component {
     }
 }
 DataTableView.propTypes = {
+    getColSpansOfRow: PropTypes.func,
     columns: PropTypes.array.isRequired,
     headerData: PropTypes.array,
     data: PropTypes.array.isRequired,

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

@@ -1,5 +1,6 @@
 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 & {
     headerIndex?: number;
@@ -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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/react-data-table",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "DataTable component",
   "main": "build/esm/lib/index.js",
   "types": "build/esm/lib/index.d.ts",
@@ -16,6 +16,7 @@
     "lint:styles": "stylelint 'src/**/*.scss'",
     "lint": "run-p lint:*",
     "prettier": "prettier '**/*.{md,json,yaml,yml}'",
+    "dev": "npm run start",
     "start": "start-storybook -p 7007",
     "build-storybook": "build-storybook -c .storybook -o storybook-static",
     "typecheck": "npm run build:compile -- --noEmit",