Create assets/dashAgGridComponentFunctions.js

assets/dashAgGridComponentFunctions.js

@@ -0,0 +1,67 @@
+var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
+// Store original data globally
+window.gridOriginalData = null;
+
+dagcomponentfuncs.ModelLink = function(props) {
+    if (!props.data.Model_Link) {
+        return props.value;  // Just return text if no link
+    }
+    return React.createElement(
+        'a',
+        {
+            href: props.data.Model_Link,
+            target: '_blank',
+            style: {
+                color: '#007bff',
+                textDecoration: 'none'
+            }
+        },
+        props.value
+    );
+};
+
+dagcomponentfuncs.PinRenderer = function(props) {
+    // Store original data when component first renders
+    if (!window.gridOriginalData) {
+        const allRows = [];
+        props.api.forEachNode(node => {
+            allRows.push({...node.data});
+        });
+        window.gridOriginalData = allRows;
+    }
+
+    return React.createElement(
+        'div',
+        {
+            onClick: function() {
+                const api = props.api;
+                const newValue = !props.value;
+                
+                // Create a copy of the original data and update pin state for clicked row only
+                const allRows = window.gridOriginalData.map(row => ({
+                    ...row,
+                    // Preserve existing pin states and only update the clicked row
+                    pinned: row.Model_Display === props.data.Model_Display ? newValue : 
+                            (row.pinned || false)
+                }));
+                
+                // Update window.gridOriginalData to maintain pin states
+                window.gridOriginalData = allRows;
+                
+                // Separate rows
+                const pinnedRows = allRows.filter(row => row.pinned);
+                const unpinnedRows = allRows.filter(row => !row.pinned);
+                
+                // Update both sections
+                api.setPinnedTopRowData(pinnedRows);
+                api.setRowData(unpinnedRows);
+            },
+            style: {
+                cursor: 'pointer',
+                textAlign: 'center',
+                fontSize: '16px'
+            }
+        },
+        props.value ? '📌' : '☐'
+    );
+};