From 5feda5a9134560e648e180c406f7a96c224091a3 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Wed, 17 May 2023 01:17:36 +0530 Subject: [PATCH 1/7] After resizing and reordering column takes the size of the column it is displacing --- components/lib/datatable/DataTable.js | 34 +++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index c0daeb5783..76dc788d20 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -665,15 +665,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; @@ -714,6 +716,34 @@ 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))); + let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; + 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) + ]; + let innerHTML = ''; + + destroyStyleElement(); + createStyleElement(); + + reorderedWidths.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; if (dropColIndex < dragColIndex && dropPosition.current === 1) { dropColIndex++; From 098e8ea231803a9e866bc0a1c1f81b58eab7ed11 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Wed, 17 May 2023 16:07:12 +0530 Subject: [PATCH 2/7] fixed eslint issue --- components/lib/datatable/DataTable.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 76dc788d20..af555cdd4a 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -718,6 +718,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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))); let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; const movedItem = widths.find((items, index) => index === dragColIndex); @@ -734,6 +735,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { reorderedWidths.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}), @@ -742,7 +744,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { } `; }); - + styleElement.current.innerHTML = innerHTML; if (dropColIndex < dragColIndex && dropPosition.current === 1) { From 1087242d4d5165d69fc7a63babd306d3897a0879 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Wed, 17 May 2023 01:17:36 +0530 Subject: [PATCH 3/7] After resizing and reordering column takes the size of the column it is displacing --- components/lib/datatable/DataTable.js | 34 +++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 80b8edc567..b5b561aa5b 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -665,15 +665,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; @@ -714,6 +716,34 @@ 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))); + let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; + 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) + ]; + let innerHTML = ''; + + destroyStyleElement(); + createStyleElement(); + + reorderedWidths.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; if (dropColIndex < dragColIndex && dropPosition.current === 1) { dropColIndex++; From aacc3015d61234ba305b14e46438d1c56ed27717 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Wed, 17 May 2023 16:07:12 +0530 Subject: [PATCH 4/7] fixed eslint issue --- components/lib/datatable/DataTable.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index b5b561aa5b..e25e75ee74 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -718,6 +718,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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))); let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; const movedItem = widths.find((items, index) => index === dragColIndex); @@ -734,6 +735,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { reorderedWidths.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}), @@ -742,7 +744,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { } `; }); - + styleElement.current.innerHTML = innerHTML; if (dropColIndex < dragColIndex && dropPosition.current === 1) { From 4c36521f5a9a6ec7dc8dbae1bf6601b4431bad14 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Sun, 21 May 2023 10:34:05 +0530 Subject: [PATCH 5/7] formatted Datable.js --- components/lib/datatable/DataTable.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index af555cdd4a..8be938364d 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -666,12 +666,12 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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)); + 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 && dragIndex < dropIndex ) { + 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; @@ -718,16 +718,12 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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))); let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; 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) - ]; + const reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)]; let innerHTML = ''; destroyStyleElement(); From 01a49e5eeb7e8b10382418f5ff3103c6e348cc60 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Mon, 22 May 2023 23:44:44 +0530 Subject: [PATCH 6/7] refactored --- components/lib/datatable/DataTable.js | 68 ++++++++++----------------- 1 file changed, 25 insertions(+), 43 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index e25e75ee74..f8693540b7 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -369,26 +369,30 @@ export const DataTable = React.forwardRef((inProps, ref) => { } if (ObjectUtils.isNotEmpty(widths)) { - createStyleElement(); + addInnerHtml(widths); + } + } + }; - let innerHTML = ''; - let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; + const addInnerHtml = (widths) => { + createStyleElement(); - widths.forEach((width, index) => { - let style = `width: ${width}px !important; max-width: ${width}px !important`; + let innerHTML = ''; + let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; - 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} - } - `; - }); + widths.forEach((width, index) => { + let style = `width: ${width}px !important; max-width: ${width}px !important`; - styleElement.current.innerHTML = innerHTML; - } - } + 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 findParentHeader = (element) => { @@ -666,12 +670,12 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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)); + 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 && dragIndex < dropIndex ) { + 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; @@ -718,34 +722,12 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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))); - let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; 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) - ]; - let innerHTML = ''; - - destroyStyleElement(); - createStyleElement(); - - reorderedWidths.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 reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)]; + addInnerHtml(reorderedWidths); if (dropColIndex < dragColIndex && dropPosition.current === 1) { dropColIndex++; From aa5e280ffcba790a2980cc84077dfb3ef0b277d5 Mon Sep 17 00:00:00 2001 From: Abhishek Shukla Date: Tue, 23 May 2023 00:08:19 +0530 Subject: [PATCH 7/7] fixed lint issue --- components/lib/datatable/DataTable.js | 38 +++++++++++++-------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index f8693540b7..1728943989 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -358,25 +358,8 @@ export const DataTable = React.forwardRef((inProps, ref) => { } }; - const restoreColumnWidths = () => { - if (columnWidthsState.current) { - let widths = columnWidthsState.current.split(','); - - if (props.columnResizeMode === 'expand' && tableWidthState.current) { - tableRef.current.style.width = tableWidthState.current; - tableRef.current.style.minWidth = tableWidthState.current; - elementRef.current.style.width = tableWidthState.current; - } - - if (ObjectUtils.isNotEmpty(widths)) { - addInnerHtml(widths); - } - } - }; - - const addInnerHtml = (widths) => { + const addColumnWidthStyles = (widths) => { createStyleElement(); - let innerHTML = ''; let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; @@ -395,6 +378,22 @@ export const DataTable = React.forwardRef((inProps, ref) => { styleElement.current.innerHTML = innerHTML; }; + const restoreColumnWidths = () => { + if (columnWidthsState.current) { + let widths = columnWidthsState.current.split(','); + + if (props.columnResizeMode === 'expand' && tableWidthState.current) { + tableRef.current.style.width = tableWidthState.current; + tableRef.current.style.minWidth = tableWidthState.current; + elementRef.current.style.width = tableWidthState.current; + } + + if (ObjectUtils.isNotEmpty(widths)) { + addColumnWidthStyles(widths); + } + } + }; + const findParentHeader = (element) => { if (element.nodeName === 'TH') { return element; @@ -727,7 +726,8 @@ export const DataTable = React.forwardRef((inProps, ref) => { 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)]; - addInnerHtml(reorderedWidths); + + addColumnWidthStyles(reorderedWidths); if (dropColIndex < dragColIndex && dropPosition.current === 1) { dropColIndex++;