Changes to datagrid

blocks/components/LCPDataGrid.js

@@ -77,11 +77,7 @@ function lcpCellRenderer(params) {
             console.log('Grid is not ready yet');
         }
     };
-    // let gridData = [
-    //     { Department2: 'Sheriffs Office 2', Budget: '150000', MeetAt: '12/12/2025', PreferredColor: '#e0e0e0', PostContent: '<div> </div>' },
-    //     { Department2: 'Treasurer2', Budget: '10000', MeetAt: '12-05', PreferredColor: '#232323', PostContent: '<p> </p>' },
-    //     { Department2: 'Assessor2', Budget: '40000', MeetAt: 1737718512, PreferredColor: 'red', PostContent: '<h1> </h1>' },
-    // ];
+
 
     const gridData = dataset;
     // Helper function to detect the data type of a value
@@ -224,6 +220,15 @@ const isValidCSSColor = (value) => {
 
     return dataTypes;
 };
+
+    // Use useEffect to update dataTypes whenever data changes
+    useEffect(() => {
+        if (data && data.length > 0) {
+            const detectedDataTypes = detectDataTypes(data);
+            setAttributes({ dataTypes: detectedDataTypes });
+        }
+    }, [data, setAttributes]);
+    
     // Assuming gridData is already populated
     const gridDataTypes = detectDataTypes(gridData);  // This will detect the types of each field
 
@@ -315,11 +320,13 @@ const isValidCSSColor = (value) => {
 
             const columns = keys.map((key, index) => {
                 return {
+                    colId: getColumnLabel(index),  // 'A', 'B', 'C', ...
                     headerName: getColumnLabel(index),  // 'A', 'B', 'C', ...
                     field: key, // Field will match the key (Department2, Budget, etc.)
                     valueParser: lcpDataTypeParser,
                     cellRenderer: lcpCellRenderer, // Reference the custom cell renderer
-                    headerComponent: LCPDataGridHeader
+                    headerComponent: LCPDataGridHeader,
+                    lcpDataType: 'myCustomDataType'  // Add your custom parameter here
                     
                 };
             });
@@ -427,21 +434,21 @@ const isValidCSSColor = (value) => {
                 />
             </div>
 
-            {/* Button outside the grid */}
-            <div>
-            {/* Input to add multiple rows */}
-            <div>
-                <input
-                    type="number"
-                    value={rowsToAdd}
-                    onChange={(e) => setRowsToAdd(Math.max(1, parseInt(e.target.value, 10)))}
-                    min="1"
-                />
-                <button onClick={addRows}>Add Row(s)</button>
-            </div>
-            <div>
-                <span>{currentRowCount} Rows</span>
-            </div>
+            {/* Grid Footer */}
+            <div style={{padding:'15px 0px',display:'flex', flexDirection:'row', justifyContent:'space-between', background:'white'}}>
+                {/* Input to add multiple rows */}
+                <div style={{display:'flex', flexDirection:'row'}}>
+                    <input
+                        type="number"
+                        value={rowsToAdd}
+                        onChange={(e) => setRowsToAdd(Math.max(1, parseInt(e.target.value, 10)))}
+                        min="1"
+                    />
+                    <button onClick={addRows}>Add Row(s)</button>
+                </div>
+                <div>
+                    <span>{currentRowCount} Rows</span>
+                </div>
             </div>
         </div>
     );