1544: Update columnconfig based on changes in parent

Author: Ruben van Leeuwen

.changeset/metal-rules-sell.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Adds resizable table columns

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDragHandler.tsx

@@ -30,7 +30,6 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({
     };
 
     const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
-    let startWidth: number;
 
     return (
         <div>
@@ -44,7 +43,8 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({
                         const thElement = headerRowRef.current.querySelector(
                             `th[data-field-name="${fieldName}"]`,
                         ) as HTMLTableCellElement;
-                        startWidth = thElement.getBoundingClientRect().width;
+                        const startWidth =
+                            thElement.getBoundingClientRect().width;
                         const newWidth = startWidth + data.x;
 
                         onUpdateColumWidth(

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 
 import { useTranslations } from 'next-intl';
@@ -117,6 +117,15 @@ export const WfoTable = <T extends object>({
     onRowClick,
     className,
 }: WfoTableProps<T>) => {
+    const [localColumnConfig, setLocalColumnConfig] =
+        useState<WfoTableColumnConfig<T>>(columnConfig);
+
+    useEffect(() => {
+        if (!localColumnConfig || localColumnConfig !== columnConfig) {
+            setLocalColumnConfig(columnConfig);
+        }
+    }, [columnConfig]); // Dont add localColumnConfig to dependencies, it should trigger on local column changes
+
     const {
         tableContainerStyle,
         tableStyle,
@@ -128,9 +137,6 @@ export const WfoTable = <T extends object>({
     } = useWithOrchestratorTheme(getWfoTableStyles);
     const t = useTranslations('common');
 
-    const [localColumnConfig, setLocalColumnConfig] =
-        useState<WfoTableColumnConfig<T>>(columnConfig);
-
     const sortedVisibleColumns = getSortedVisibleColumns(
         columnConfig,
         columnOrder,