Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #3139 : After resizing and reordering column takes the size of the column it is displacing #4410

Merged
merged 14 commits into from
Aug 11, 2023
Merged

Fix #3139 : After resizing and reordering column takes the size of the column it is displacing #4410

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5feda5a
After resizing and reordering column takes the size of the column it …
shuklabhisekh May 16, 2023
098e8ea
fixed eslint issue
shuklabhisekh May 17, 2023
1087242
After resizing and reordering column takes the size of the column it …
shuklabhisekh May 16, 2023
aacc301
fixed eslint issue
shuklabhisekh May 17, 2023
4c36521
formatted Datable.js
shuklabhisekh May 21, 2023
d9dc3da
formatted Datable.js
shuklabhisekh May 21, 2023
9eb9a65
Merge branch 'master' into master
shuklabhisekh May 21, 2023
01a49e5
refactored
shuklabhisekh May 22, 2023
aa5e280
fixed lint issue
shuklabhisekh May 22, 2023
8ed195a
Merge branch 'master' into master
shuklabhisekh May 22, 2023
e042733
Merge branch 'master' into master
melloware Jul 6, 2023
a73127f
Merge branch 'master' into master
melloware Aug 10, 2023
f1b10ad
Merge branch 'master' into master
shuklabhisekh Aug 11, 2023
a0b6815
Merge branch 'master' into master
melloware Aug 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 34 additions & 20 deletions components/lib/datatable/DataTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,26 @@ export const DataTable = React.forwardRef((inProps, ref) => {
}
};

const addColumnWidthStyles = (widths) => {
createStyleElement();
let innerHTML = '';
let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

widths.forEach((width, index) => {
let style = `width: ${width}px !important; max-width: ${width}px !important`;

innerHTML += `
${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
${style}
}
`;
});

styleElement.current.innerHTML = innerHTML;
};

const restoreColumnWidths = () => {
if (columnWidthsState.current) {
let widths = columnWidthsState.current.split(',');
Expand All @@ -388,24 +408,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
}

if (ObjectUtils.isNotEmpty(widths)) {
createStyleElement();

let innerHTML = '';
let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

widths.forEach((width, index) => {
let style = `width: ${width}px !important; max-width: ${width}px !important`;

innerHTML += `
${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
${style}
}
`;
});

styleElement.current.innerHTML = innerHTML;
addColumnWidthStyles(widths);
}
}
};
Expand Down Expand Up @@ -684,15 +687,17 @@ export const DataTable = React.forwardRef((inProps, ref) => {
const dropHeaderOffset = DomHandler.getOffset(dropHeader);
const targetLeft = dropHeaderOffset.left - containerOffset.left;
const columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
let dragIndex = DomHandler.index(draggedColumnElement.current);
let dropIndex = DomHandler.index(findParentHeader(event.currentTarget));

reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';

if (event.pageX > columnCenter) {
if (event.pageX > columnCenter && dragIndex < dropIndex) {
reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
dropPosition.current = 1;
} else {
} else if (dragIndex > dropIndex) {
reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
dropPosition.current = -1;
Expand Down Expand Up @@ -733,6 +738,15 @@ export const DataTable = React.forwardRef((inProps, ref) => {
let isSameColumn = (col1, col2) => (getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field'));
let dragColIndex = columns.findIndex((child) => isSameColumn(child, draggedColumn.current));
let dropColIndex = columns.findIndex((child) => isSameColumn(child, column));
let widths = [];
let headers = DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');

headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
const movedItem = widths.find((items, index) => index === dragColIndex);
const remainingItems = widths.filter((items, index) => index !== dragColIndex);
const reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)];

addColumnWidthStyles(reorderedWidths);

if (dropColIndex < dragColIndex && dropPosition.current === 1) {
dropColIndex++;
Expand Down