Added tabbed interface for mutliple LCPDataGrid.js components

2025-01-26 01:55:35 -08:00
parent d9e69737a0
commit 8812de19db
7 changed files with 228 additions and 327 deletions
--- a/blocks/components/LCPDataGridHeader.js
+++ b/blocks/components/LCPDataGridHeader.js
@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+const LCPDataGridHeader = (props) => {
+    const { displayName, column, updateData, sort, menu } = props;
+
+    const [editing, setEditing] = useState(false);
+    const [newHeader, setNewHeader] = useState(displayName);
+    const colId = column.colId;
+    const handleEditClick = () => {
+        setEditing(true);
+    };
+
+    const handleBlur = () => {
+        setEditing(false);
+        if (updateData && typeof updateData === 'function') {
+            updateData(newHeader); // Save the new header name
+        }
+    };
+
+    const handleChange = (e) => {
+        setNewHeader(e.target.value);
+    };
+
+    return (
+        <div className="custom-header">
+
+            {/* Column ID 
+            <div>
+            <span style={{ marginRight: '8px' }}>
+                <strong>{colId}</strong>
+            </span>
+            </div>*/}
+            {/* Editable Header Text */}
+                        {/* Icon */}
+                        <span style={{ marginRight: '8px' }}>
+                <img src="your-icon-path.svg" alt="icon" style={{ width: '20px', height: '20px' }} />
+            </span>
+            {editing ? (
+                <input
+                    type="text"
+                    value={newHeader}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    style={{ fontSize: '14px', padding: '2px 5px', width: '100%' }}
+                />
+            ) : (
+                <span
+                    onClick={handleEditClick}
+                    style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: '16px' }}
+                >
+                    {newHeader}
+                </span>
+            )}
+
+            {/* Sorting *
+            <span style={{ marginLeft: '8px' }}>
+                {sort === 'asc' && <span>↑</span>}
+                {sort === 'desc' && <span>↓</span>}
+            </span> */}
+
+            {/* Additional Menu *
+            <span style={{ marginLeft: '8px' }}>
+                <button onClick={menu}>Menu</button>
+            </span> */}
+        </div>
+    );
+};
+
+export default LCPDataGridHeader;