70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
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;
|