Table: fix resizing of columns in responsive mode (#5908)

* Table: define min and max width when resizing

* rename RESIZER_HEADER_MODE

* rename temp vars

* don't allow resizing of fixed size columns

* Fix for already resized columns

* upercased constant names

Source/Blazorise/wwwroot/table.js

@@ -83,9 +83,9 @@ export function fixedHeaderScrollTableToRow(element, elementId, row) {
 }
 
 export function initializeResizable(element, elementId, mode) {
-    const resizerClass = "b-table-resizer";
-    const resizingClass = "b-table-resizing";
-    const resizerHeaderMode = 0;
+    const RESIZER_CLASS = "b-table-resizer";
+    const RESIZING_CLASS = "b-table-resizing";
+    const RESIZER_HEADER_MODE = 0;
     let cols = null;
 
     element = getRequiredElement(element, elementId);
@@ -113,7 +113,7 @@ export function initializeResizable(element, elementId, mode) {
         };
 
         const calculateModeHeight = () => {
-            return mode === resizerHeaderMode
+            return mode === RESIZER_HEADER_MODE
                 ? element !== null
                     ? element.querySelector('tr:first-child > th:first-child').offsetHeight
                     : 0
@@ -123,11 +123,17 @@ export function initializeResizable(element, elementId, mode) {
         let actualHeight = calculateModeHeight();
 
         const createResizableColumn = function (col) {
-            if (col.querySelector(`.${resizerClass}`) !== null)
+            if (col.querySelector(`.${RESIZER_CLASS}`) !== null)
                 return;
+
+            // if the column already has both min and max width set, then we don't need to resize it
+            if (col.style.minWidth && col.style.maxWidth && !col.dataset.resized) {
+                return;
+            }
+
             // Add a resizer element to the column
             const resizer = document.createElement('div');
-            resizer.classList.add(resizerClass);
+            resizer.classList.add(RESIZER_CLASS);
 
             // Set the height
             resizer.style.height = `${actualHeight}px`;
@@ -166,43 +172,47 @@ export function initializeResizable(element, elementId, mode) {
             col.appendChild(resizer);
 
             // Track the current position of mouse
-            let x = 0;
-            let w = 0;
+            let startX = 0;
+            let startWidth = 0;
 
             const mouseDownHandler = function (e) {
                 mouseDownDate = new Date();
 
                 // Get the current mouse position
-                x = e.clientX;
+                startX = e.clientX;
 
                 // Calculate the current width of column
                 const styles = window.getComputedStyle(col);
-                w = parseInt(styles.width, 10);
+                startWidth = parseInt(styles.width, 10);
 
                 // Attach listeners for document's events
                 document.addEventListener('pointermove', mouseMoveHandler);
                 document.addEventListener('pointerup', mouseUpHandler);
 
-                resizer.classList.add(resizingClass);
+                resizer.classList.add(RESIZING_CLASS);
             };
 
             const mouseMoveHandler = function (e) {
                 // Determine how far the mouse has been moved
-                const dx = e.clientX - x;
+                const dx = e.clientX - startX;
 
                 resizer.style.height = `${calculateTableActualHeight()}px`;
 
                 // Update the width of column
-                col.style.width = `${w + dx}px`;
+                const widthStyle = `${startWidth + dx}px`;
+                col.style.width = widthStyle;
+                col.style.minWidth = widthStyle;
+                col.style.maxWidth = widthStyle;
+                col.dataset.resized = true;
             };
 
             // When user releases the mouse, remove the existing event listeners
             const mouseUpHandler = function () {
                 mouseUpDate = new Date();
 
-                resizer.classList.remove(resizingClass);
+                resizer.classList.remove(RESIZING_CLASS);
 
-                element.querySelectorAll(`.${resizerClass}`).forEach(x => x.style.height = `${calculateModeHeight()}px`);
+                element.querySelectorAll(`.${RESIZER_CLASS}`).forEach(x => x.style.height = `${calculateModeHeight()}px`);
 
                 document.removeEventListener('pointermove', mouseMoveHandler);
                 document.removeEventListener('pointerup', mouseUpHandler);