[DataTable] Refresh visible columns

package.json

@@ -7,7 +7,7 @@
         "type": "git",
         "url": "git+https://github.com/eyeseetea/d2-ui-components.git"
     },
-    "version": "1.3.3-beta.4",
+    "version": "1.3.1-beta.3",
     "main": "index.js",
     "types": "index.d.ts",
     "peerDependencies": {

src/data-table/DataTable.tsx

@@ -122,19 +122,21 @@ export function DataTable<T extends ReferenceObject = TableObject>(props: DataTa
         mouseActionsMapping,
     } = props;
 
-    const initialSorting = initialState.sorting || {
-        field: columns[0].name,
-        order: "asc" as const,
-    };
-    const initialSelection = initialState.selection || [];
-    const initialPagination = initialState.pagination;
-    const initialVisibleColumns = columns.filter(({ hidden }) => !hidden).map(({ name }) => name);
+    const [stateSelection, updateSelection] = useState(initialState.selection || []);
+    const [statePagination, updatePagination] = useState(initialState.pagination);
+    const [visibleColumns, updateVisibleColumns] = useState([]);
+    const [stateSorting, updateSorting] = useState(
+        initialState.sorting || {
+            field: columns[0].name,
+            order: "asc" as const,
+        }
+    );
 
-    const [stateSorting, updateSorting] = useState(initialSorting);
-    const [stateSelection, updateSelection] = useState(initialSelection);
-    const [statePagination, updatePagination] = useState(initialPagination);
-    const [visibleColumns, updateVisibleColumns] = useState(initialVisibleColumns);
     useEffect(() => updatePagination(pagination => ({ ...pagination, page: 1 })), [resetKey]);
+    useEffect(() => {
+        const newVisibleColumns = columns.filter(({ hidden }) => !hidden).map(({ name }) => name);
+        updateVisibleColumns(visibleColumns => _.uniq([...visibleColumns, ...newVisibleColumns]));
+    }, [columns]);
 
     const sorting = controlledSorting || stateSorting;
     const selection = controlledSelection || stateSelection;