diff --git a/changelog.md b/changelog.md
index 1ea46f0176..4f2b739193 100644
--- a/changelog.md
+++ b/changelog.md
@@ -9,6 +9,7 @@
 * [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)
 * [TimelineScale]: added bottom/top month text customisation.
 * [TimelineScale]: customisation of today line height was added.
+* [DataTable]: groups of columns.
 
 **What's Fixed**
 * [VirtualList]: fixed estimatedHeight calculations in components with pagination
diff --git a/uui-components/src/table/DataTableCellContainer.tsx b/uui-components/src/table/DataTableCellContainer.tsx
index de49ccd56f..98a51dd34b 100644
--- a/uui-components/src/table/DataTableCellContainer.tsx
+++ b/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 }
diff --git a/uui-components/src/table/DataTableHeaderRow.tsx b/uui-components/src/table/DataTableHeaderRow.tsx
index d2a11bc7a4..c7a72b2043 100644
--- a/uui-components/src/table/DataTableHeaderRow.tsx
+++ b/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,
                 ] }
+                columnGroups={ this.props.columnGroups }
                 columns={ this.props.columns }
                 renderCell={ this.renderCell }
+                renderGroupCell={ this.renderGroupCell }
                 rawProps={ { role: 'row' } }
                 renderConfigButton={ this.props.onConfigButtonClick && this.props.renderConfigButton }
             />
diff --git a/uui-components/src/table/DataTableRowContainer.module.scss b/uui-components/src/table/DataTableRowContainer.module.scss
index e403dda49b..5ad53b770e 100644
--- a/uui-components/src/table/DataTableRowContainer.module.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/uui-components/src/table/DataTableRowContainer.tsx b/uui-components/src/table/DataTableRowContainer.tsx
index e1fe8326cb..6f4c7debce 100644
--- a/uui-components/src/table/DataTableRowContainer.tsx
+++ b/uui-components/src/table/DataTableRowContainer.tsx
@@ -2,17 +2,23 @@ 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>> {
+    /** Columns groups configuration */
+    columnGroups?: DataColumnGroupProps[];
     columns?: DataColumnProps<TItem, TId, TFilter>[];
     renderCell?(column: DataColumnProps<TItem, TId, TFilter>, idx: number, eventHandlers?: DndEventHandlers): React.ReactNode;
+    /** Columns group cell render function. */
+    renderGroupCell?(group: DataColumnGroupProps, idx: number, firstColumnIdx: number, lastColumnIdx: number): React.ReactNode;
     renderConfigButton?(): React.ReactNode;
     overlays?: React.ReactNode;
     link?: Link;
@@ -61,12 +67,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.columnGroups) {
+                return columns.map((column) => {
+                    const idx = props.columns?.indexOf(column) || 0;
+                    return props.renderCell(column, idx, { onPointerDown, onTouchStart });
+                });
+            }
+
+            const columnsWithGroups = getGroupsWithColumns(props.columnGroups, 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) {
diff --git a/uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts b/uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts
new file mode 100644
index 0000000000..4ce1a4186e
--- /dev/null
+++ b/uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts
@@ -0,0 +1,49 @@
+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>(columnGroups: DataColumnGroupProps[], columns: DataColumnProps<TItem, TId>[]) => {
+    const columnGroupsByKey = getGroupsByKey(columnGroups);
+    if (!columnGroupsByKey) {
+        return columns;
+    }
+
+    return columns.reduce<Array<GroupOfColumns<TItem, TId> | DataColumnProps<TItem, TId>>>((columnsAndGroups, column) => {
+        if (column.group) {
+            const group = columnGroupsByKey[column.group];
+            if (!group) {
+                throw new Error(`The '${column.group}' group mentioned in the '${column.key}' column is undefined.`);
+            }
+            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: columnGroupsByKey[column.group], columns: [column] });
+            return columnsAndGroups;
+        }
+
+        columnsAndGroups.push(column);
+        return columnsAndGroups;
+    }, []);
+};
diff --git a/uui-core/src/constants/selectors.ts b/uui-core/src/constants/selectors.ts
index 23385f347f..4343066f83 100644
--- a/uui-core/src/constants/selectors.ts
+++ b/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',
diff --git a/uui-core/src/types/tables.ts b/uui-core/src/types/tables.ts
index a26cc490f2..7253c54a56 100644
--- a/uui-core/src/types/tables.ts
+++ b/uui-core/src/types/tables.ts
@@ -31,6 +31,41 @@ export type ICanBeFixed = {
     fix?: 'left' | 'right';
 };
 
+/**
+ * Columns group configuration.
+ */
+export interface DataColumnGroupProps extends IHasCX, IClickable {
+    /**
+     * Unique key to identify the columns group. Used to reference columns group.
+     */
+    key: string;
+
+    /** Columns group caption. Can be a plain text, or any React Component */
+    caption?: React.ReactNode;
+
+    /** Aligns columns group header content horizontally */
+    textAlign?: 'left' | 'center' | 'right';
+
+    /** Info tooltip displayed in the table header */
+    info?: React.ReactNode;
+
+    /** Overrides rendering of the whole columns group cell */
+    renderCell?(column: DataColumnGroupProps): any;
+
+    /** Render callback for columns group header tooltip.
+     * This tooltip will appear on cell hover with 600ms delay.
+     *
+     * If omitted, default implementation with columnGroup.caption + columnGroup.info will be rendered.
+     * Pass `() => null` to disable tooltip rendering.
+     */
+    renderTooltip?(column: DataColumnGroupProps): React.ReactNode;
+
+    /**
+     * Overrides rendering of the whole columns group 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.
@@ -38,6 +73,11 @@ export interface DataColumnProps<TItem = any, TId = any, TFilter = any> extends
      */
     key: string;
 
+    /**
+     * A unique identifier for a group of columns that establishes a connection between the column and the group of columns.
+     */
+    group?: string;
+
     /** Column caption. Can be a plain text, or any React Component */
     caption?: React.ReactNode;
 
@@ -159,6 +199,29 @@ export interface DataTableHeaderCellProps<TItem = any, TId = any> extends IEdita
     renderFilter?: (dropdownProps: IDropdownBodyProps) => React.ReactNode;
 }
 
+/**
+ * DataTable columns group header cell props.
+ */
+export interface DataTableHeaderGroupCellProps extends IHasCX, IEditable<DataTableState> {
+    /**
+     * A unique identifier for a group.
+     */
+    key: string;
+    /**
+     * Columns group configuration.
+     */
+    group: DataColumnGroupProps;
+    /**
+     * Defines if first column of the group is the first one in the table header.
+     */
+    isFirstCell: boolean;
+
+    /**
+     * Defines if last column of the group is the last one in the table header.
+     */
+    isLastCell: boolean;
+}
+
 export type DataTableConfigModalParams = IEditable<DataSourceState> & {
     /** Array of all table columns */
     columns: DataColumnProps[];
@@ -166,6 +229,10 @@ export type DataTableConfigModalParams = IEditable<DataSourceState> & {
 
 export interface DataTableHeaderRowProps<TItem = any, TId = any> extends IEditable<DataTableState>, IHasCX, DataTableColumnsConfigOptions {
     columns: DataColumnProps<TItem, TId>[];
+    /**
+     * Columns group configuration.
+     */
+    columnGroups?: DataColumnGroupProps[];
     selectAll?: ICheckable;
     /**
      * Enables collapse/expand all functionality.
@@ -173,6 +240,10 @@ export interface DataTableHeaderRowProps<TItem = any, TId = any> extends IEditab
     showFoldAll?: boolean;
     onConfigButtonClick?: (params: DataTableConfigModalParams) => any;
     renderCell?: (props: DataTableHeaderCellProps<TItem, TId>) => React.ReactNode;
+    /**
+     * Columns group cell render function.
+     */
+    renderGroupCell?: (props: DataTableHeaderGroupCellProps) => React.ReactNode;
     renderConfigButton?: () => React.ReactNode;
 }
 
diff --git a/uui/components/tables/DataTable.tsx b/uui/components/tables/DataTable.tsx
index 70e91ea85d..4909482a4a 100644
--- a/uui/components/tables/DataTable.tsx
+++ b/uui/components/tables/DataTable.tsx
@@ -4,6 +4,7 @@ import { useColumnsWithFilters } from '../../helpers';
 import {
     ColumnsConfig, DataRowProps, useUuiContext, uuiScrollShadows, useColumnsConfig, IEditable, DataTableState, DataTableColumnsConfigOptions,
     DataSourceListProps, DataColumnProps, cx, TableFiltersConfig, DataTableRowProps, DataTableSelectedCellData, Overwrite,
+    DataColumnGroupProps,
 } from '@epam/uui-core';
 import { DataTableHeaderRow, DataTableHeaderRowProps } from './DataTableHeaderRow';
 import { DataTableRow, DataTableRowProps as UuiDataTableRowProps } from './DataTableRow';
@@ -26,6 +27,9 @@ export interface DataTableProps<TItem, TId, TFilter = any> extends IEditable<Dat
     /** Rows that should be rendered in table */
     rows?: DataRowProps<TItem, TId>[];
 
+    /** Array of all possible column groups for the table */
+    columnGroups?: DataColumnGroupProps[];
+
     /** Array of all possible columns for the table */
     columns: DataColumnProps<TItem, TId>[];
 
@@ -140,6 +144,7 @@ export function DataTable<TItem, TId>(props: React.PropsWithChildren<DataTablePr
                 <div className={ css.stickyHeader } ref={ headerRef }>
                     <DataTableHeaderRow
                         columns={ columns }
+                        columnGroups={ props.columnGroups }
                         onConfigButtonClick={ props.showColumnsConfig && onConfigurationButtonClick }
                         selectAll={ props.selectAll }
                         size={ props.headerSize || settings.sizes.dataTable.header.row.default as DataTableHeaderRowProps['size'] }
diff --git a/uui/components/tables/DataTableHeaderCell.module.scss b/uui/components/tables/DataTableHeaderCell.module.scss
index 5c522106de..272fd0098c 100644
--- a/uui/components/tables/DataTableHeaderCell.module.scss
+++ b/uui/components/tables/DataTableHeaderCell.module.scss
@@ -20,7 +20,7 @@
     padding-inline-end: var(--uui-dt-header-cell-padding-end);
     width: 0;
     background-clip: padding-box;
-    height: var(--uui-dt-header-cell-height);
+    min-height: var(--uui-dt-header-cell-height);
 
     .caption-wrapper {
         column-gap: var(--uui-dt-header-cell-caption-column-gap);
diff --git a/uui/components/tables/DataTableHeaderGroupCell.module.scss b/uui/components/tables/DataTableHeaderGroupCell.module.scss
new file mode 100644
index 0000000000..e2f952a541
--- /dev/null
+++ b/uui/components/tables/DataTableHeaderGroupCell.module.scss
@@ -0,0 +1,93 @@
+@use '../../assets/styles/index' as *;
+
+// !!! For these variables the values are set inline
+// --uui-dt-header-group-cell-icon-size,
+// --uui-dt-header-group-cell-padding-start,
+// --uui-dt-header-group-cell-padding-end,
+
+.root {
+    --uui-dt-header-group-cell-font: var(--uui-font);
+    --uui-dt-header-group-cell-font-weight: 600;
+    --uui-dt-header-group-cell-line-height: 30px;
+    --uui-dt-header-group-cell-height: var(--uui-size);
+    --uui-dt-header-group-cell-caption-column-gap: 3px;
+    --uui-dt-header-group-cell-truncate-caption-line-height: 18px;
+    color: var(--uui-text-primary);
+    align-items: center;
+    padding-inline-start: var(--uui-dt-header-group-cell-padding-start);
+    padding-inline-end: var(--uui-dt-header-group-cell-padding-end);
+    width: 0;
+    background-clip: padding-box;
+    min-height: var(--uui-dt-header-group-cell-height);
+
+    .caption-wrapper {
+        column-gap: var(--uui-dt-header-group-cell-caption-column-gap);
+    }
+
+    .caption-wrapper {
+        display: flex;
+        overflow: hidden;
+        flex: 1 1 0;
+        min-width: 0;
+
+        &.align-center {
+            justify-content: center;
+        }
+    }
+
+    .caption {
+        --uui-text-line-height: var(--uui-dt-header-group-cell-line-height);
+        font-family: var(--uui-dt-header-group-cell-font);
+        font-weight: var(--uui-dt-header-group-cell-font-weight);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 0; //????
+
+        &.truncate {
+            /* stylelint-disable */
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            /* stylelint-enable */
+            overflow: hidden;
+            white-space: normal;
+            line-height: var(--uui-dt-header-group-cell-truncate-caption-line-height);
+        }
+    }
+
+    .group-cell-tooltip {
+        top: 0;
+    }
+
+    .upper-case {
+        text-transform: uppercase;
+    }
+}
+
+.group-cell-tooltip-wrapper {
+    --uui-dt-header-group-cell-tooltip-caption-font-size: 14px;
+    --uui-dt-header-group-cell-tooltip-caption-font-weight: 600;
+    --uui-dt-header-group-cell-tooltip-info-font-size: 12px;
+    --uui-dt-header-group-cell-tooltip-info-font-weight: 400;
+    //
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    row-gap: var(--uui-vertical-gap);
+
+    .group-cell-tooltip-text {
+        color: var(--uui-tooltip-text);
+        padding: 0;
+    }
+
+    .tooltip-caption {
+        font-size: var(--uui-dt-header-group-cell-tooltip-caption-font-size);
+        font-weight: var(--uui-dt-header-group-cell-tooltip-caption-font-weight);
+    }
+
+    .tooltip-info {
+        font-size: var(--uui-dt-header-group-cell-tooltip-info-font-size);
+        font-weight: var(--uui-dt-header-group-cell-tooltip-info-font-weight);
+    }
+}
diff --git a/uui/components/tables/DataTableHeaderGroupCell.tsx b/uui/components/tables/DataTableHeaderGroupCell.tsx
new file mode 100644
index 0000000000..4767565122
--- /dev/null
+++ b/uui/components/tables/DataTableHeaderGroupCell.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { cx, DataColumnGroupProps, DataTableHeaderGroupCellProps, Overwrite, uuiDataTableHeaderGroupCell } from '@epam/uui-core';
+import { DataTableCellContainer, HeaderCellContentProps } from '@epam/uui-components';
+import { DataTableHeaderCellMods } from './types';
+import { Tooltip } from '../overlays';
+import { Text, TextProps } from '../typography';
+import { settings } from '../../settings';
+
+import './variables.scss';
+import css from './DataTableHeaderGroupCell.module.scss';
+
+export interface DataTableHeaderGroupCellModsOverride {
+}
+
+export class DataTableHeaderGroupCell extends
+    React.Component<
+    DataTableHeaderGroupCellProps & Overwrite<DataTableHeaderCellMods,
+    DataTableHeaderGroupCellModsOverride>
+    > {
+    getTooltipContent = (column: DataColumnGroupProps) => (
+        <div className={ cx(css.groupCellTooltipWrapper, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionTooltip) }>
+            <Text cx={ [css.groupCellTooltipText, css.tooltipCaption] }>
+                { column.caption }
+            </Text>
+            { column.info && (
+                <Text cx={ [css.groupCellTooltipText, css.tooltipInfo] }>
+                    { column.info }
+                </Text>
+            ) }
+        </div>
+    );
+
+    getColumnCaption = () => {
+        const renderTooltip = this.props.group.renderTooltip || this.getTooltipContent;
+        const captionCx = [
+            css.caption,
+            this.props.textCase === 'upper' && css.upperCase,
+            uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption,
+            settings.sizes.dataTable.header.row.groupCell.truncate.includes(this.props.size) && css.truncate,
+        ];
+
+        return (
+            <div
+                className={ cx(css.captionWrapper, css['align-' + this.props.group.textAlign], uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionWrapper) }
+            >
+                <Tooltip
+                    placement="top"
+                    color="inverted"
+                    content={ renderTooltip(this.props.group) }
+                    cx={ css.groupCellTooltip }
+                    openDelay={ 600 }
+                >
+                    <Text
+                        key="text"
+                        fontSize={ settings.sizes.dataTable.header.row.groupCell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'] as TextProps['fontSize'] }
+                        size={ settings.sizes.dataTable.header.row.groupCell.columnCaption.size as TextProps['size'] }
+                        cx={ captionCx }
+                    >
+                        { this.props.group.caption }
+                    </Text>
+                </Tooltip>
+            </div>
+        );
+    };
+
+    getLeftPadding = () => {
+        const { columnsGap, isFirstCell } = this.props;
+
+        if (columnsGap) return isFirstCell ? columnsGap : +columnsGap / 2;
+        return isFirstCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+    };
+
+    getRightPadding = () => {
+        const { columnsGap, isLastCell } = this.props;
+
+        if (columnsGap) return isLastCell ? columnsGap : +columnsGap / 2;
+        return isLastCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+    };
+
+    renderCellContent = (props: HeaderCellContentProps) => {
+        const computeStyles = {
+            '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+            '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+        } as React.CSSProperties;
+
+        return (
+            <DataTableCellContainer
+                column={ this.props.group }
+                ref={ (ref) => {
+                    (props.ref as React.RefCallback<HTMLElement>)(ref);
+                } }
+                cx={ cx(
+                    uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell,
+                    css.root,
+                    `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`,
+                    this.props.isFirstCell && 'uui-dt-header-first-column',
+                    this.props.isLastCell && 'uui-dt-header-last-column',
+                ) }
+                rawProps={ {
+                    role: 'columnheader',
+                    ...props.eventHandlers,
+                } }
+                style={ computeStyles }
+            >
+                { this.getColumnCaption() }
+            </DataTableCellContainer>
+        );
+    };
+
+    render() {
+        if (this.props.group.renderHeaderCell) {
+            return this.props.group.renderHeaderCell(this.props);
+        }
+
+        const computeStyles = {
+            '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+            '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+            width: '100%',
+        } as React.CSSProperties;
+
+        return (
+            <DataTableCellContainer
+                column={ this.props.group }
+                cx={ cx(
+                    uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell,
+                    css.root,
+                    `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`,
+                    this.props.isFirstCell && 'uui-dt-header-first-column',
+                    this.props.isLastCell && 'uui-dt-header-last-column',
+                ) }
+                rawProps={ { role: 'columnheader' } }
+                style={ computeStyles }
+            >
+                { this.getColumnCaption() }
+            </DataTableCellContainer>
+        );
+    }
+}
diff --git a/uui/components/tables/DataTableHeaderRow.tsx b/uui/components/tables/DataTableHeaderRow.tsx
index e7afd97939..e842bf748a 100644
--- a/uui/components/tables/DataTableHeaderRow.tsx
+++ b/uui/components/tables/DataTableHeaderRow.tsx
@@ -9,6 +9,7 @@ import { settings } from '../../settings';
 
 import './variables.scss';
 import css from './DataTableHeaderRow.module.scss';
+import { DataTableHeaderGroupCell } from './DataTableHeaderGroupCell';
 
 export type DataTableHeaderRowProps = CoreDataTableHeaderRowProps & DataTableHeaderRowMods;
 export const DataTableHeaderRow = withMods<CoreDataTableHeaderRowProps, DataTableHeaderRowProps>(
@@ -24,6 +25,15 @@ export const DataTableHeaderRow = withMods<CoreDataTableHeaderRowProps, DataTabl
                 columnsGap={ mods.columnsGap }
             />
         ),
+        renderGroupCell: (props) => (
+            <DataTableHeaderGroupCell
+                { ...props }
+                size={ mods.size }
+                textCase={ mods.textCase || 'normal' }
+                key={ props.key }
+                columnsGap={ mods.columnsGap }
+            />
+        ),
         renderConfigButton: () => (
             <IconButton
                 key="configuration"
diff --git a/uui/settings.ts b/uui/settings.ts
index 40f8d96366..a2e8f1826a 100644
--- a/uui/settings.ts
+++ b/uui/settings.ts
@@ -233,6 +233,25 @@ export const settings: Settings = {
                         },
                         truncate: ['48'],
                     },
+                    groupCell: {
+                        defaults: {
+                            size: '36',
+                            padding: '12',
+                            paddingEdge: '24',
+                        },
+                        columnCaption: {
+                            fontSize: '14',
+                            fontWeight: '400',
+                            size: '18',
+                            uppercase: '12',
+                        },
+                        iconSize: {
+                            36: '18',
+                            48: '18',
+                            60: '18',
+                        },
+                        truncate: ['48'],
+                    },
                 },
             },
             body: {
diff --git a/uui/settings.types.ts b/uui/settings.types.ts
index da7941bd82..e3af01d0ae 100644
--- a/uui/settings.types.ts
+++ b/uui/settings.types.ts
@@ -154,6 +154,19 @@ interface DataTableHeaderCellSizes {
     truncate?: string[];
 }
 
+interface DataTableHeaderGroupCellDefaults {
+    size: string;
+    padding: string;
+    paddingEdge: string;
+}
+
+interface DataTableHeaderGroupCellSizes {
+    defaults: DataTableHeaderGroupCellDefaults;
+    columnCaption: TextSize & UppercaseTextSize;
+    iconSize: Sizes;
+    truncate?: string[];
+}
+
 interface DataTableHeaderCellDefaults {
     size: string;
     resizeMarker: string;
@@ -195,6 +208,7 @@ interface FiltersPanelSizes {
 interface DataTableHeaderRowSizes {
     default: string;
     cell: DataTableHeaderCellSizes;
+    groupCell: DataTableHeaderGroupCellSizes;
 }
 
 interface DataTableHeaderSizes {