[DataTable]: new D'n'D.

app/src/demo/dnd/DndCriterion.tsx

@@ -41,6 +41,7 @@ export class DndCriterion extends React.Component<DndCriterionProps> {
  return (
  <DndActor
  key={ item.id }
+ id={ item.id }
  srcData={ item }
  dstData={ item }
  canAcceptDrop={ this.handleCanAcceptDrop }

app/src/demo/dnd/DndMaterial.tsx

@@ -50,6 +50,7 @@ export class DndMaterial extends React.Component<DndMaterialProps> {
  return (
  <DndActor
  key={ item.id }
+ id={ item.id }
  srcData={ item }
  dstData={ item }
  canAcceptDrop={ this.handleCanAcceptDrop }

app/src/demo/dnd/DndModule.tsx

@@ -47,6 +47,7 @@ export class DndModule extends React.Component<DndModuleProps> {
  return (
  <DndActor
  key={ item.id }
+ id= { item.id }
  srcData={ item }
  dstData={ item }
  canAcceptDrop={ this.handleCanAcceptDrop }

app/src/demo/dnd/DndSection.tsx

@@ -63,6 +63,7 @@ export class DndSection extends React.Component<DndSectionProps> {
  return (
  <DndActor
  key={ item.id }
+ id={ item.id }
  srcData={ item }
  dstData={ item }
  canAcceptDrop={ this.handleCanAcceptDrop }

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

@@ -50,7 +50,7 @@ export function ProjectTableDemo() {
  getMetadata: () => metadata,
  });
 
- const [tableState, setTableState] = useState<DataTableState>({ sorting: [{ field: 'order' }], visibleCount: 1000 });
+ const [tableState, setTableState] = useState<DataTableState>({ sorting: [{ field: 'order' }], visibleCount: 1000, folded: { 1: false } });
  const dataTableFocusManager = useDataTableFocusManager<Task['id']>({}, []);
 
  const searchHandler = useCallback(
@@ -122,6 +122,7 @@ export function ProjectTableDemo() {
  getRowOptions: (task) => ({
  ...lens.prop('items').key(task.id).toProps(), // pass IEditable to each row to allow editing
  isSelectable: true,
+ // checkbox: { isVisible: true },
  dnd: {
  srcData: { ...task, isTask: true },
  dstData: { ...task, isTask: true },

app/src/docs/_examples/dnd/Basic.example.tsx

@@ -61,6 +61,7 @@ export default function DndMaterial() {
  const renderMaterial = (item: MaterialItem, prevItem: MaterialItem, nextItem: MaterialItem) => (
  <DndActor
  key={ item.id }
+ id={ item.id }
  srcData={ item }
  dstData={ item }
  canAcceptDrop={ canAcceptDrop }

uui-components/src/table/DataTableHeaderCell.tsx

@@ -119,6 +119,7 @@ export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHe
  return (
  <DndActor
  key={ this.props.column.key + (this.props.value.columnsConfig?.[this.props.column.key]?.order || '') }
+ id={ this.props.column.key }
  dstData={ this.props.column }
  srcData={ this.props.column.fix ? null : this.props.column }
  canAcceptDrop={ this.canAcceptDrop }

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

@@ -0,0 +1,7 @@
+.container {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ z-index: 100;
+ width: 100%;
+}

uui-components/src/table/DataTableRow.tsx

@@ -2,8 +2,12 @@ import React, { ReactNode } from 'react';
 import isEqual from 'react-fast-compare';
 import {
  DataColumnProps, DataRowProps, uuiMod, DndActorRenderParams, DndActor, uuiMarkers, DataTableRowProps, Lens, IEditable,
+ DndDropLevelsRenderParams,
+ uuiDndState,
 } from '@epam/uui-core';
 import { DataTableRowContainer } from './DataTableRowContainer';
+import { FlexRow } from '../layout';
+import css from './DataTableRow.module.scss';
 
 const uuiDataTableRow = {
  uuiTableRow: 'uui-table-row',
@@ -52,6 +56,14 @@ const DataTableRowImpl = React.forwardRef(function DataTableRow<TItem, TId>(prop
  });
  };
 
+ const renderDropLevels = (params: DndDropLevelsRenderParams<TId>) => {
+ return (
+ <FlexRow cx={ [css.container] }>
+ { params.dropLevelsProps.map((dropLevelProps) => props.renderDropLevel({ ...dropLevelProps, isRowCheckable: props.isCheckable })) }
+ </FlexRow>
+ );
+ };
+
  const renderRow = (params: Partial<DndActorRenderParams>, clickHandler?: (props: DataRowProps<TItem, TId>) => void, overlays?: ReactNode) => {
  return (
  <DataTableRowContainer
@@ -71,6 +83,8 @@ const DataTableRowImpl = React.forwardRef(function DataTableRow<TItem, TId>(prop
  props.isSelected && uuiMod.selected,
  params.isDraggable && uuiMarkers.draggable,
  props.isInvalid && uuiMod.invalid,
+ params.isRowHighlighted && uuiMarkers.dropping,
+ params.isDndInProgress && uuiDndState.dragInProgress,
  uuiDataTableRow.uuiTableRow,
  props.cx,
  props.isFocused && uuiMod.focus,
@@ -80,11 +94,53 @@ const DataTableRowImpl = React.forwardRef(function DataTableRow<TItem, TId>(prop
  />
  );
  };
+
+ const renderDragGhost = (params: Partial<DndActorRenderParams>, clickHandler?: (props: DataRowProps<TItem, TId>) => void, overlays?: ReactNode) => {
+ return (
+ <DataTableRowContainer
+ columns={ [props.columns[0]] }
+ ref={ params.ref || ref }
+ renderCell={ renderCell }
+ onClick={ clickHandler && (() => clickHandler(props)) }
+ rawProps={ {
+ ...props.rawProps,
+ ...params.eventHandlers,
+ role: 'row',
+ 'aria-expanded': (props.isFolded === undefined || props.isFolded === null) ? undefined : !props.isFolded,
+ ...(props.isSelectable && { 'aria-selected': props.isSelected }),
+ style: { width: props.columns[0].width, minWidth: props.columns[0].minWidth ?? props.columns[0].width },
+ } }
+ cx={ [
+ params.classNames,
+ props.isSelected && uuiMod.selected,
+ params.isDraggable && uuiMarkers.draggable,
+ props.isInvalid && uuiMod.invalid,
+ params.isRowHighlighted && uuiMarkers.dropping,
+ uuiDataTableRow.uuiTableRow,
+ uuiDndState.dragGhost,
+ props.cx,
+ props.isFocused && uuiMod.focus,
+ ] }
+ overlays={ overlays }
+ link={ props.link }
+ />
+ );
+ };
 
  const clickHandler = props.onClick || props.onSelect || props.onFold || props.onCheck;
 
  if (props.dnd && (props.dnd.srcData || props.dnd.canAcceptDrop)) {
- return <DndActor { ...props.dnd } render={ (params) => renderRow(params, clickHandler, props.renderDropMarkers?.(params)) } />;
+ return (
+ <DndActor
+ isMultilevel={ true }
+ { ...props.dnd }
+ id={ props.id }
+ path={ props.path.map(({ id }) => id) }
+ render={ (params, overlays) => renderRow(params, clickHandler, overlays) }
+ renderDragGhost={ (params, overlays) => renderDragGhost(params, clickHandler, overlays) }
+ renderDropLevels={ props.renderDropLevel ? renderDropLevels : null }
+ />
+ );
  } else {
  return renderRow({}, clickHandler);
  }

uui-core/src/constants/selectors.ts

@@ -62,12 +62,15 @@ export const uuiMarkers = {
  scrolledRight: '-scrolled-right',
  scrolledTop: '-scrolled-top',
  scrolledBottom: '-scrolled-bottom',
+ dropping: 'uui-dropping-marker',
 } as const;
 
 export const uuiDndState = {
  draggedOut: 'uui-dragged-out',
  dropAccepted: 'uui-drop-accepted',
  dragGhost: 'uui-drag-ghost',
+ dragHandle: 'uui-drag-handle',
+ dragInProgress: 'uui-drag-in-progress',
 } as const;
 
 export const uuiDataTableHeaderCell = {