Fix #3139 : After resizing and reordering column takes the size of th…

…e column it is displacing (#4410) * After resizing and reordering column takes the size of the column it is displacing * fixed eslint issue * After resizing and reordering column takes the size of the column it is displacing * fixed eslint issue * formatted Datable.js * refactored * fixed lint issue --------- Co-authored-by: Melloware <[email protected]>
primefaces · Aug 11, 2023 · e91ae5b · e91ae5b
1 parent 2ae14fe
commit e91ae5b
Showing 1 changed file with 34 additions and 20 deletions.
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -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(',');
@@ -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);
             }
         }
     };
@@ -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;
@@ -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++;