[Timeline]: ProjectDemo with Timeline.

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

@@ -2,8 +2,7 @@ import { Task, ColumnsProps } from './types';
 import { resources, statuses, statusTags } from './demoData';
 import React from 'react';
 import { TextArea, PickerToggler, TextInput, DataTableCell, NumericInput, PickerInput,
-    DatePicker, DataPickerRow, PickerItem, IconContainer, 
-    DataTableCustomHeaderCell } from '@epam/uui';
+    DatePicker, DataPickerRow, PickerItem, IconContainer, DataTableCellContainer } from '@epam/uui';
 import { ArrayDataSource, DataColumnProps, DataQueryFilter, IEditableDebouncer, cx } from '@epam/uui-core';
 import { ReactComponent as statusIcon } from '@epam/assets/icons/common/radio-point-10.svg';
 
@@ -383,9 +382,9 @@ export function getColumnsTimelineMode(columnsProps: ColumnsProps & { timelineCo
             allowResizing: false,
             renderHeaderCell(props) {
                 return (
-                    <DataTableCustomHeaderCell { ...props }>
+                    <DataTableCellContainer { ...props }>
                         <TimelineHeader timelineController={ timelineController } />
-                    </DataTableCustomHeaderCell>
+                    </DataTableCellContainer>
                 );
             },
             renderCell(props) {

uui-components/src/table/DataTableCellContainer.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cx, DataColumnProps, IHasCX, uuiDataTableHeaderCell } from '@epam/uui-core';
+import { FlexCell } from '../layout';
+import css from './DataTableCellContainer.module.scss';
+
+/**
+ * Header cell props of DataTable with Timeline.
+ */
+export interface DataTableCellContainerProps extends IHasCX, React.PropsWithChildren {
+    /** DataColumnProps object for the column the cell is at */
+    column: DataColumnProps;
+}
+
+export function DataTableCellContainer(props: DataTableCellContainerProps) {
+    return (
+        <FlexCell
+            { ...props.column }
+            minWidth={ props.column.width }
+            rawProps={ {
+                role: 'columnheader',
+                'aria-sort': 'none',
+            } }
+            cx={
+                cx(
+                    'uui-dt-vars',
+                    uuiDataTableHeaderCell.uuiTableHeaderCell,
+                    css.cell,
+                    props.column.cx,
+                    props.cx,
+                ) 
+            }
+        >
+            { props.children }
+        </FlexCell>
+    );
+}

uui-components/src/table/index.ts

@@ -5,4 +5,4 @@ export * from './DataTableHeaderCell';
 export * from './DataTableCell';
 export * from './tableCellsSelection';
 export * from './tableCellsFocus';
-export * from './DataTableCustomHeaderCell';
+export * from './DataTableCellContainer';

uui/components/tables/index.ts

@@ -2,7 +2,6 @@ export * from './DataTableCell';
 export * from './DataTableRow';
 export * from './DataTableHeaderRow';
 export * from './DataTableHeaderCell';
-export * from './DataTableCustomHeaderCell';
 export * from './DataTable';
 export * from './DataRowsContainer';
 export * from './columnsConfigurationModal';

uui/index.tsx

@@ -4,3 +4,6 @@ export * from './components';
 export * from './i18n';
 export * from './helpers';
 export * from './settings';
+
+export type { DataTableCellContainerProps } from '@epam/uui-components';
+export { DataTableCellContainer } from '@epam/uui-components';