[DataTable]: columns group.

app/src/demo/tables/editableTable/TableMode.tsx

@@ -3,7 +3,7 @@ import { DataTable } from '@epam/uui';
 import { DataRowProps, DataSourceListProps, DataTableState, IControlled } from '@epam/uui-core';
 import { DataTableFocusManager } from '@epam/uui-components';
 import { ColumnsProps, Task } from './types';
-import { getColumnsTableMode } from './columns';
+import { getColumnsTableMode, groups } from './columns';
 
 export interface TableModeProps extends ColumnsProps {
     rows: DataRowProps<Task, any>[];
@@ -25,6 +25,7 @@ export function TableMode({
         <DataTable
             headerTextCase="upper"
             rows={ rows }
+            groups={ groups }
             columns={ columns }
             value={ tableState }
             onValueChange={ setTableState }

app/src/demo/tables/editableTable/columns.tsx

@@ -3,7 +3,7 @@ import { resources, statuses, statusTags } from './demoData';
 import React from 'react';
 import { TextArea, PickerToggler, TextInput, DataTableCell, NumericInput, PickerInput,
     DatePicker, DataPickerRow, PickerItem, IconContainer, DataTableCellContainer } from '@epam/uui';
-import { ArrayDataSource, DataColumnProps, DataQueryFilter, IEditableDebouncer, cx } from '@epam/uui-core';
+import { ArrayDataSource, DataColumnGroupProps, DataColumnProps, DataQueryFilter, IEditableDebouncer, cx } from '@epam/uui-core';
 import { ReactComponent as statusIcon } from '@epam/assets/icons/common/radio-point-10.svg';
 
 import { RowKebabButton } from './RowKebabButton';
@@ -17,6 +17,13 @@ import { uuiDayjs } from '../../../helpers/dayJsHelper';
 const resourceDataSource = new ArrayDataSource({ items: resources });
 const statusDataSource = new ArrayDataSource({ items: statuses });
 
+export const groups: DataColumnGroupProps[] = [
+    { 
+        key: 'general',
+        caption: 'General group 1',
+    },
+];
+
 export function getColumnsTableMode(columnsProps: ColumnsProps) {
     const columns: DataColumnProps<Task, number, DataQueryFilter<Task>>[] = [
         {
@@ -35,6 +42,7 @@ export function getColumnsTableMode(columnsProps: ColumnsProps) {
         },
         {
             key: 'estimate',
+            group: 'general',
             textAlign: 'right',
             caption: 'Estimate',
             info: 'Estimate in man/days',
@@ -62,6 +70,7 @@ export function getColumnsTableMode(columnsProps: ColumnsProps) {
         },
         {
             key: 'status',
+            group: 'general',
             caption: 'Status',
             width: 160,
             minWidth: 150,

changelog.md

@@ -7,6 +7,7 @@
 * [TabButton][VerticalTabButton]: decreased paddings, added gaps `3px` between internal items for all sizes according to design
 * [Tag]: changed layout - added gaps between internal items, changed padding
 * [Data Sources]: cursor-based pagination support. More details [here](http://uui.epam.com/documents?id=dataSources-lazy-dataSource&mode=doc&category=dataSources&theme=loveship#using_cursor-based_pagination)
+* [DataTable]: groups of columns.
 
 **What's Fixed**
 * [VirtualList]: fixed estimatedHeight calculations in components with pagination
@@ -35,9 +36,9 @@
 **What's New**
 * [DataTable]:
   * [Breaking change]: reworked `isAwaysVisible` column configuration prop. Now it's not make column fixed by default and doesn't forbid to unpin or reorder, it's only disallow to hide this column from table. If you need previous behavior, please use `isLocked` prop.
-  * Added `isLocked` prop for column configuration. If `true` value provided, makes this column locked, which means that you can't hide, unpin or reorder this column. This column should always be pined. 
+  * Added `isLocked` prop for column configuration. If `true` value provided, makes this column locked, which means that you can't hide, unpin or reorder this column. This column should always be pined.
 * [DataTable]: `ColumnsConfigurationModal` updated modal width from 420px to 560px according design, 'disabled' state for locked columns is changed to 'readonly', added vertical paddings to multiline column names.
-* [PickerInput]: 
+* [PickerInput]:
   * Added support of `minCharsToSearch` > 0 with `searchPosition = 'body'`.
   * Added renderEmpty prop to render custom empty block for depends on various reasons.
   * `renderNotFonud` prop is deprecated, please use `renderEmpty` instead

uui-components/src/table/DataTableCellContainer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataColumnProps, IClickable, IHasCX, IHasRawProps } from '@epam/uui-core';
+import { DataColumnGroupProps, DataColumnProps, IClickable, IHasCX, IHasRawProps } from '@epam/uui-core';
 import { FlexCell } from '../layout';
 
 import css from './DataTableCellContainer.module.scss';
@@ -15,7 +15,7 @@ export interface DataTableCellContainerProps extends
     /**
      * DataTable column configuration.
      */
-    column: DataColumnProps;
+    column: DataColumnProps | DataColumnGroupProps;
     /**
      * CSS text-align property.
      */
@@ -38,7 +38,7 @@ export const DataTableCellContainer = React.forwardRef<HTMLDivElement, DataTable
     return (
         <FlexCell
             { ...props.column }
-            minWidth={ props.column.width }
+            minWidth={ 'width' in props.column ? props.column.width : undefined }
             rawProps={ props.rawProps }
             cx={ ['uui-dt-vars', css.root, props.column.cx, props.cx] }
             onClick={ props.onClick }

uui-components/src/table/DataTableHeaderRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
     DataSourceState, DataColumnProps, DataTableHeaderRowProps, DropdownBodyProps, Lens, DropParams, getOrderBetween, DataTableState,
+    DataColumnGroupProps,
 } from '@epam/uui-core';
 import { DataTableRowContainer } from './DataTableRowContainer';
 import css from './DataTableHeaderRow.module.scss';
@@ -79,14 +80,29 @@ export class DataTableHeaderRow<TItem, TId> extends React.Component<DataTableHea
         });
     };
 
+    renderGroupCell = (group: DataColumnGroupProps, idx: number, firstColumnIdx: number, lastColumnIdx: number) => {
+        const isFirstCell = firstColumnIdx === 0;
+        const isLastCell = lastColumnIdx === this.props.columns.length - 1;
+        return this.props.renderGroupCell({
+            key: `${group.key}-${idx}`,
+            group,
+            isFirstCell,
+            isLastCell,
+            value: this.props.value,
+            onValueChange: this.props.onValueChange,
+        });
+    };
+
     render() {
         return (
             <DataTableRowContainer
                 cx={ [
                     css.root, this.props.cx, uuiDataTableHeaderRow.uuiTableHeaderRow,
                 ] }
+                groups={ this.props.groups }
                 columns={ this.props.columns }
                 renderCell={ this.renderCell }
+                renderGroupCell={ this.renderGroupCell }
                 rawProps={ { role: 'row' } }
                 renderConfigButton={ this.props.onConfigButtonClick && this.props.renderConfigButton }
             />

uui-components/src/table/DataTableRowContainer.module.scss

@@ -76,3 +76,13 @@
 :global(.uui-scroll-shadow-right) {
     @include scroll-shadow('inset-inline-end');
 }
+
+.groupColumnsWrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+.groupWrapper {
+    display: flex;
+    flex-direction: column;
+}

uui-components/src/table/DataTableRowContainer.tsx

@@ -2,17 +2,21 @@ import React from 'react';
 import {
     DataColumnProps, IClickable, IHasCX, IHasRawProps, uuiMarkers, Link, cx,
     DndEventHandlers,
+    DataColumnGroupProps,
 } from '@epam/uui-core';
 import { FlexRow } from '../layout';
 import { Anchor } from '../navigation';
 import css from './DataTableRowContainer.module.scss';
+import { getGroupsWithColumns, isGroupOfColumns } from './columnsConfigurationModal/columnsGroupsUtils';
 
 export interface DataTableRowContainerProps<TItem, TId, TFilter>
     extends IClickable,
     IHasCX,
     IHasRawProps<React.HTMLAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>> {
+    groups?: DataColumnGroupProps[];
     columns?: DataColumnProps<TItem, TId, TFilter>[];
     renderCell?(column: DataColumnProps<TItem, TId, TFilter>, idx: number, eventHandlers?: DndEventHandlers): React.ReactNode;
+    renderGroupCell?(group: DataColumnGroupProps, idx: number, firstColumnIdx: number, lastColumnIdx: number): React.ReactNode;
     renderConfigButton?(): React.ReactNode;
     overlays?: React.ReactNode;
     link?: Link;
@@ -61,12 +65,40 @@ function getSectionStyle(columns: DataColumnProps[], minGrow = 0) {
 export const DataTableRowContainer = React.forwardRef(
     <TItem, TId, TFilter>(props: DataTableRowContainerProps<TItem, TId, TFilter>, ref: React.ForwardedRef<HTMLDivElement>) => {
         const { onPointerDown, onTouchStart, ...restRawProps } = props.rawProps ?? {};
+
         function renderCells(columns: DataColumnProps<TItem, TId, TFilter>[]) {
-            return columns.reduce<React.ReactNode[]>((cells, column) => {
-                const idx = props.columns?.indexOf(column) || 0;
-                cells.push(props.renderCell(column, idx, { onPointerDown, onTouchStart }));
-                return cells;
-            }, []);
+            if (!props.groups) {
+                return columns.map((column) => {
+                    const idx = props.columns?.indexOf(column) || 0;
+                    return props.renderCell(column, idx, { onPointerDown, onTouchStart });
+                });
+            }
+
+            const columnsWithGroups = getGroupsWithColumns(props.groups, columns);
+            return columnsWithGroups.map((item, index) => {
+                if (isGroupOfColumns(item)) {
+                    const firstColumnIdx = props.columns?.indexOf(item.columns[0]) || 0;
+                    const lastColumnIdx = props.columns?.indexOf(item.columns[item.columns.length - 1]) || 0;
+
+                    return (
+                        <div style={ getSectionStyle(item.columns) } className={ cx({ [css.section]: true, [css.groupWrapper]: true }) }>
+
+                            <div>{props.renderGroupCell(item.group, index, firstColumnIdx, lastColumnIdx)}</div>
+                            <div className={ css.groupColumnsWrapper }>
+                                {
+                                    item.columns.map((column) => {
+                                        const idx = props.columns?.indexOf(column) || 0;
+                                        return props.renderCell(column, idx, { onPointerDown, onTouchStart });
+                                    })
+                                }
+                            </div>
+                        </div>
+                    );
+                }
+
+                const idx = props.columns?.indexOf(item) || 0;
+                return props.renderCell(item, idx, { onPointerDown, onTouchStart });
+            });
         }
 
         function wrapFixedSection(columns: DataColumnProps<TItem, TId, TFilter>[], direction: 'left' | 'right', hasScrollingSection: boolean) {

uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts

@@ -0,0 +1,40 @@
+import { DataColumnGroupProps, DataColumnProps } from '@epam/uui-core';
+
+interface GroupOfColumns<TItem, TId> {
+    type: 'group';
+    group: DataColumnGroupProps;
+    columns: DataColumnProps<TItem, TId>[];
+}
+
+const getGroupsByKey = (groups: DataColumnGroupProps[]) => {
+    if (!groups) {
+        return null;
+    }
+    const gRec = groups.reduce<Record<string, DataColumnGroupProps>>(
+        (g, group) => ({ ...g, [group.key]: group }),
+        {},
+    );
+    return !Object.keys(gRec).length ? null : gRec;
+};
+
+export const isGroupOfColumns = <TItem, TId>(
+    item: GroupOfColumns<TItem, TId> | DataColumnProps<TItem, TId>,
+): item is GroupOfColumns<TItem, TId> => 'type' in item && item.type === 'group';
+
+export const getGroupsWithColumns = <TItem, TId>(groups: DataColumnGroupProps[], columns: DataColumnProps<TItem, TId>[]) => {
+    const groupsByKey = getGroupsByKey(groups);
+    return columns.reduce<Array<GroupOfColumns<TItem, TId> | DataColumnProps<TItem, TId>>>((columnsAndGroups, column) => {
+        if (column.group) {
+            const lastItem = columnsAndGroups[columnsAndGroups.length - 1];
+            if (lastItem && isGroupOfColumns(lastItem) && lastItem.group.key === column.group) {
+                lastItem.columns.push(column);
+                return columnsAndGroups;
+            }
+            columnsAndGroups.push({ type: 'group', group: groupsByKey[column.group], columns: [column] });
+            return columnsAndGroups;
+        }
+
+        columnsAndGroups.push(column);
+        return columnsAndGroups;
+    }, []);
+};

uui-core/src/constants/selectors.ts

@@ -82,6 +82,13 @@ export const uuiDataTableHeaderCell = {
     uuiTableHeaderFoldAllIcon: 'uui-table-header-fold-all-icon',
 } as const;
 
+export const uuiDataTableHeaderGroupCell = {
+    uuiTableHeaderGroupCell: 'uui-table-header-group-cell',
+    uuiTableHeaderGroupCaption: 'uui-table-header-group-caption',
+    uuiTableHeaderGroupCaptionWrapper: 'uui-table-header-group-caption-wrapper',
+    uuiTableHeaderGroupCaptionTooltip: 'uui-table-header-group-caption-tooltip',
+} as const;
+
 export const uuiScrollShadows = {
     top: 'uui-scroll-shadow-top',
     topVisible: 'uui-scroll-shadow-top-visible',

uui-core/src/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useLayer';
 export * from './usePrevious';
 export * from './useResizeObserver';
 export * from './useDocumentDir';
+export * from './useColumnGroups';

uui-core/src/hooks/useColumnGroups.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { DataColumnGroupProps, DataColumnProps } from '../types';
+
+export function useColumnGroups<TItem, TId>(groups: DataColumnGroupProps[], columns: DataColumnProps<TItem, TId>[]) {
+    const groupsRecord = useMemo(() => (groups ?? [])
+        .reduce<Record<string, DataColumnGroupProps>>(
+        (groupsRec, group) => ({ ...groupsRec, [group.key]: group }),
+        {},
+    ), [groups]);
+
+    const visiblGroups = useMemo(() => Object.values(
+        columns.reduce<Record<string, DataColumnGroupProps>>((vGroups, column) => {
+            if (column.group) {
+                vGroups[column.group] = groupsRecord[column.group];
+                return vGroups;
+            }
+            return vGroups;
+        }, {}),
+    ), [groupsRecord, columns]);
+
+    return { groups: visiblGroups };
+}

uui-core/src/types/tables.ts

@@ -31,13 +31,48 @@ export type ICanBeFixed = {
     fix?: 'left' | 'right';
 };
 
+export interface DataColumnGroupProps extends IHasCX, IClickable {
+    /**
+     * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.
+     * Also, used as React key for cells, header cells, and other components inside tables.
+     */
+    key: string;
+
+    /** Column caption. Can be a plain text, or any React Component */
+    caption?: React.ReactNode;
+
+    /** Aligns cell and header content horizontally */
+    textAlign?: 'left' | 'center' | 'right';
+
+    /** Info tooltip displayed in the table header */
+    info?: React.ReactNode;
+
+    /** Overrides rendering of the whole cell */
+    renderCell?(column: DataColumnGroupProps): any;
+
+    /** Render callback for column header tooltip.
+     * This tooltip will appear on cell hover with 600ms delay.
+     *
+     * If omitted, default implementation with column.caption + column.info will be rendered.
+     * Pass `() => null` to disable tooltip rendering.
+     */
+    renderTooltip?(column: DataColumnGroupProps): React.ReactNode;
+
+    /**
+     * Overrides rendering of the whole header cell.
+     */
+    renderHeaderCell?(cellProps: DataTableHeaderGroupCellProps): any;
+}
+
 export interface DataColumnProps<TItem = any, TId = any, TFilter = any> extends ICanBeFixed, IHasCX, IClickable, IHasRawProps<HTMLDivElement>, Attributes {
     /**
      * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.
      * Also, used as React key for cells, header cells, and other components inside tables.
      */
     key: string;
 
+    group?: string;
+
     /** Column caption. Can be a plain text, or any React Component */
     caption?: React.ReactNode;
 
@@ -159,20 +194,29 @@ export interface DataTableHeaderCellProps<TItem = any, TId = any> extends IEdita
     renderFilter?: (dropdownProps: IDropdownBodyProps) => React.ReactNode;
 }
 
+export interface DataTableHeaderGroupCellProps extends IHasCX, IEditable<DataTableState> {
+    key: string;
+    group: DataColumnGroupProps;
+    isFirstCell: boolean;
+    isLastCell: boolean;
+}
+
 export type DataTableConfigModalParams = IEditable<DataSourceState> & {
     /** Array of all table columns */
     columns: DataColumnProps[];
 };
 
 export interface DataTableHeaderRowProps<TItem = any, TId = any> extends IEditable<DataTableState>, IHasCX, DataTableColumnsConfigOptions {
     columns: DataColumnProps<TItem, TId>[];
+    groups?: DataColumnGroupProps[];
     selectAll?: ICheckable;
     /**
      * Enables collapse/expand all functionality.
      * */
     showFoldAll?: boolean;
     onConfigButtonClick?: (params: DataTableConfigModalParams) => any;
     renderCell?: (props: DataTableHeaderCellProps<TItem, TId>) => React.ReactNode;
+    renderGroupCell?: (props: DataTableHeaderGroupCellProps) => React.ReactNode;
     renderConfigButton?: () => React.ReactNode;
 }