Skip to content

Commit

Permalink
Fixed #2086 - Freezing Columns leads to wrong order on Column reorder.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Jun 5, 2021
1 parent 49a26c7 commit 49b0df9
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 21 deletions.
59 changes: 39 additions & 20 deletions src/components/datatable/DataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1000,27 +1000,31 @@ export class DataTable extends Component {
}
}

onColumnDragStart(event) {
if(this.columnResizing) {
onColumnDragStart(e) {
const { originalEvent: event, column } = e;

if (this.columnResizing) {
event.preventDefault();
return;
}

this.iconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
this.iconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);

this.draggedColumn = this.findParentHeader(event.target);
this.draggedColumnEl = this.findParentHeader(event.currentTarget);
this.draggedColumn = column;
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
}

onColumnDragOver(event) {
let dropHeader = this.findParentHeader(event.target);
if(this.props.reorderableColumns && this.draggedColumn && dropHeader) {
onColumnDragOver(e) {
const event = e.originalEvent;
const dropHeader = this.findParentHeader(event.currentTarget);
if (this.props.reorderableColumns && this.draggedColumnEl && dropHeader) {
event.preventDefault();
let containerOffset = DomHandler.getOffset(this.container);
let dropHeaderOffset = DomHandler.getOffset(dropHeader);

if(this.draggedColumn !== dropHeader) {
if (this.draggedColumnEl !== dropHeader) {
let targetLeft = dropHeaderOffset.left - containerOffset.left;
//let targetTop = containerOffset.top - dropHeaderOffset.top;
let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
Expand All @@ -1045,50 +1049,65 @@ export class DataTable extends Component {
}
}

onColumnDragLeave(event) {
if(this.props.reorderableColumns && this.draggedColumn) {
onColumnDragLeave(e) {
const event = e.originalEvent;
if (this.props.reorderableColumns && this.draggedColumnEl) {
event.preventDefault();
this.reorderIndicatorUp.style.display = 'none';
this.reorderIndicatorDown.style.display = 'none';
}
}

onColumnDrop(event) {
onColumnDrop(e) {
const { originalEvent: event, column } = e;

event.preventDefault();
if (this.draggedColumn) {
let dragIndex = DomHandler.index(this.draggedColumn);
let dropIndex = DomHandler.index(this.findParentHeader(event.target));
if (this.draggedColumnEl) {
let dragIndex = DomHandler.index(this.draggedColumnEl);
let dropIndex = DomHandler.index(this.findParentHeader(event.currentTarget));
let allowDrop = (dragIndex !== dropIndex);
if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
allowDrop = false;
}

if (allowDrop) {
let columns = this.state.columnOrder ? this.getColumns() : React.Children.toArray(this.props.children);
ObjectUtils.reorderArray(columns, dragIndex, dropIndex);
let dragColIndex = columns.findIndex((child) => child.props.columnKey === this.draggedColumn.columnKey || (this.draggedColumn.field && child.props.field === this.draggedColumn.field));
let dropColIndex = columns.findIndex((child) => child.props.columnKey === column.columnKey || (column.field && child.props.field === column.field));

if (dropColIndex < dragColIndex && this.dropPosition === 1) {
dropColIndex++;
}

if (dropColIndex > dragColIndex && this.dropPosition === -1) {
dropColIndex--;
}

ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);

let columnOrder = [];
for(let column of columns) {
for (let column of columns) {
columnOrder.push(column.props.columnKey||column.props.field);
}

this.setState({
columnOrder: columnOrder
columnOrder
});

if (this.props.onColReorder) {
this.props.onColReorder({
originalEvent: event,
dragIndex: dragIndex,
dropIndex: dropIndex,
dragIndex: dragColIndex,
dropIndex: dropColIndex,
columns: columns
});
}
}

this.reorderIndicatorUp.style.display = 'none';
this.reorderIndicatorDown.style.display = 'none';
this.draggedColumn.draggable = false;
this.draggedColumn = null;
this.draggedColumnEl.draggable = false;
this.draggedColumnEl = null;
this.dropPosition = null;
}
}
Expand Down
42 changes: 41 additions & 1 deletion src/components/datatable/HeaderCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export class HeaderCell extends Component {
this.onResizerClick = this.onResizerClick.bind(this);
this.onResizerDoubleClick = this.onResizerDoubleClick.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onDragStart = this.onDragStart.bind(this);
this.onDragOver = this.onDragOver.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onDrop = this.onDrop.bind(this);
}

onClick(event) {
Expand Down Expand Up @@ -115,6 +119,42 @@ export class HeaderCell extends Component {
}
}

onDragStart(event) {
if (this.props.onDragStart) {
this.props.onDragStart({
originalEvent: event,
column: this.props.columnProps
});
}
}

onDragOver(event) {
if (this.props.onDragOver) {
this.props.onDragOver({
originalEvent: event,
column: this.props.columnProps
});
}
}

onDragLeave(event) {
if (this.props.onDragLeave) {
this.props.onDragLeave({
originalEvent: event,
column: this.props.columnProps
});
}
}

onDrop(event) {
if (this.props.onDrop) {
this.props.onDrop({
originalEvent: event,
column: this.props.columnProps
});
}
}

getMultiSortMetaDataIndex() {
if (this.props.multiSortMeta) {
let columnSortField = this.props.columnProps.sortField || this.props.columnProps.field;
Expand Down Expand Up @@ -244,7 +284,7 @@ export class HeaderCell extends Component {
<th ref={(el) => this.el = el} role="columnheader" tabIndex={tabIndex}
className={className} style={this.props.columnProps.headerStyle||this.props.columnProps.style} onClick={this.onClick} onMouseDown={this.onMouseDown} onKeyDown={this.onKeyDown}
colSpan={this.props.columnProps.colSpan} rowSpan={this.props.columnProps.rowSpan} aria-sort={ariaSortData}
onDragStart={this.props.onDragStart} onDragOver={this.props.onDragOver} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop}>
onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}>
{resizer}
<span className="p-column-title">{this.props.columnProps.header}</span>
{sortIconElement}
Expand Down

0 comments on commit 49b0df9

Please sign in to comment.