fix(AnalyticalTable): enable minWidth/maxWidth column option, disable dragging while resizing (#518)

* fix(AnalyticalTable): enable column option minWidth and maxWidth again, fix draggable column bug

Co-authored-by: Marcus Notheis <marcus.notheis@sap.com>

Author: Lukas742

packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx

@@ -17,11 +17,11 @@ const TableRow: FC<RowProps> = ({ columns, y, row }: RowProps) => {
             y={y}
             rx="2"
             ry="8"
-            width={column.width - 4}
+            width={column.totalWidth - 4}
             height="16"
           />
         );
-        columnOffset += column.width;
+        columnOffset += column.totalWidth;
         return el;
       })}
     </>

packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx

@@ -10,8 +10,8 @@ const styles: CSSProperties = {
   zIndex: 1
 };
 
-const DefaultLoadingComponent = () => {
-  return <Loader delay={500} style={styles} />;
+const DefaultLoadingComponent = ({ style }) => {
+  return <Loader delay={500} style={{ ...styles, ...style }} />;
 };
 
 DefaultLoadingComponent.displayName = 'DefaultLoadingComponent';

packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts

@@ -12,7 +12,7 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo, c
 
   const handleDragStart = useCallback(
     (e) => {
-      if (resizeInfo.isResizingColumn === e.currentTarget.dataset.columnId) {
+      if (resizeInfo.isResizingColumn) {
         e.preventDefault();
         return;
       }

packages/main/src/components/AnalyticalTable/hooks/useStyling.ts

@@ -32,7 +32,7 @@ const getHeaderProps = (columnProps, { instance, column }) => {
   const lastColumnId = instance.visibleColumns[instance.visibleColumns.length - 1].id;
   const isLastColumn = column.id === lastColumnId;
   const style: CSSProperties = {
-    width: column.width
+    width: column.totalWidth
   };
 
   if (instance.state.isScrollable && isLastColumn) {

packages/main/src/components/AnalyticalTable/index.tsx

@@ -388,7 +388,9 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
             </header>
           );
         })}
-        {loading && busyIndicatorEnabled && props.data?.length > 0 && <LoadingComponent />}
+        {loading && busyIndicatorEnabled && props.data?.length > 0 && (
+          <LoadingComponent style={{ width: `${totalColumnsWidth}px` }} />
+        )}
         {loading && props.data?.length === 0 && (
           <TablePlaceholder
             columns={tableInternalColumns.filter(