Unfinished support for updating attributes

blocks/components/LCPDataGridHeader.js

@@ -1,67 +1,46 @@
 import React, { useState } from 'react';
+import {Icon, calendar } from '@wordpress/icons'; // Make sure to use the correct import
 
 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
+    // Sorting function
+    const handleSort = () => {
+        if (sort === 'asc') {
+            updateData(colId, 'desc'); // Assuming updateData is a function to set sort direction
+        } else {
+            updateData(colId, 'asc');
         }
     };
 
-    const handleChange = (e) => {
-        setNewHeader(e.target.value);
-    };
-
     return (
-        <div className="custom-header">
+        <div className="lcp-data-grid-column-header" style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+
+            {/* Calendar Icon */}
+            <span style={{ marginRight: '8px', display: 'inline-block' }}>
+                <Icon icon={ calendar } />
 
-            {/* 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 
+                style={{ fontWeight: 'bold', fontSize: '16px' }}
+                onClick={handleSort} // Click header for sorting
+            >
+                {displayName}
             </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 *
+            {/* Sorting Indicators */}
             <span style={{ marginLeft: '8px' }}>
                 {sort === 'asc' && <span>↑</span>}
                 {sort === 'desc' && <span>↓</span>}
-            </span> */}
+            </span>
 
-            {/* Additional Menu *
+            {/* Additional Menu */}
             <span style={{ marginLeft: '8px' }}>
                 <button onClick={menu}>Menu</button>
-            </span> */}
+            </span>
         </div>
     );
 };