react-restyle-components 0.4.40 → 0.4.41

package/lib/src/core-components/src/components/Table/Table.js

@@ -151,9 +151,34 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const [toggleDragOverColumn, setToggleDragOverColumn] = useState(null);
     // Internal state for reordered columns (used in popup and for rendering)
     const [reorderedColumns, setReorderedColumns] = useState(columns);
-    // Sync reorderedColumns when columns prop changes
+    // Sync reorderedColumns when columns prop structure changes (columns added/removed)
+    // We only reset when the actual column dataFields change, not on every reference change
     useEffect(() => {
-        setReorderedColumns(columns);
+        const currentDataFields = reorderedColumns
+            .map((c) => c.dataField)
+            .sort()
+            .join(',');
+        const newDataFields = columns
+            .map((c) => c.dataField)
+            .sort()
+            .join(',');
+        if (currentDataFields !== newDataFields) {
+            // Columns structure changed - merge new columns while preserving order where possible
+            const newColumnMap = new Map(columns.map((c) => [c.dataField, c]));
+            const existingDataFields = new Set(reorderedColumns.map((c) => c.dataField));
+            // Keep existing order for columns that still exist, update their data
+            const preserved = reorderedColumns
+                .filter((c) => newColumnMap.has(c.dataField))
+                .map((c) => newColumnMap.get(c.dataField));
+            // Add new columns at the end
+            const added = columns.filter((c) => !existingDataFields.has(c.dataField));
+            setReorderedColumns([...preserved, ...added]);
+        }
+        else {
+            // Same columns but maybe different data - update column data while preserving order
+            const columnMap = new Map(columns.map((c) => [c.dataField, c]));
+            setReorderedColumns(reorderedColumns.map((c) => columnMap.get(c.dataField) || c));
+        }
     }, [columns]);
     // Close column toggle panel on outside click
     useEffect(() => {
@@ -703,11 +728,11 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         const result = toggleExpand(row);
         expandable?.onExpandChange?.(result.expandedKeys, result.expanded, row);
     }, [toggleExpand, expandable]);
-    // Filtered column list for toggle panel
+    // Filtered column list for toggle panel - use reorderedColumns to preserve reorder state
     const filteredToggleColumns = useMemo(() => {
-        return columns.filter((c) => c.dataField !== keyField &&
+        return reorderedColumns.filter((c) => c.dataField !== keyField &&
             c.text.toLowerCase().includes(columnSearch.toLowerCase()));
-    }, [columns, keyField, columnSearch]);
+    }, [reorderedColumns, keyField, columnSearch]);
     // Get row key
     const getRowKey = useCallback((row) => row[keyField], [keyField]);
     // Render cell content

package/lib/src/core-components/src/components/ag-grid/AgGrid.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AG Grid Component
+ * A comprehensive, AG Grid-like data table with all enterprise features
+ * Reference: https://www.ag-grid.com/react-data-grid/getting-started/
+ */
+import React from 'react';
+import type { AgGridProps, AgGridRef } from './types';
+export declare const AgGrid: <T extends Record<string, any>>(props: AgGridProps<T> & {
+    ref?: React.ForwardedRef<AgGridRef<T>> | undefined;
+}) => React.ReactElement;
+export default AgGrid;