51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
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 colId = column.colId;
|
|
const lcpDataType = column.getColDef().customDataType; // Retrieve custom data type
|
|
|
|
// Sorting function
|
|
const handleSort = () => {
|
|
if (sort === 'asc') {
|
|
updateData(colId, 'desc'); // Assuming updateData is a function to set sort direction
|
|
} else {
|
|
updateData(colId, 'asc');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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 } />
|
|
{lcpDataType}
|
|
|
|
</span>
|
|
|
|
{/* Editable Header Text */}
|
|
<span
|
|
style={{ fontWeight: 'bold', fontSize: '16px' }}
|
|
onClick={handleSort} // Click header for sorting
|
|
>
|
|
{colId}
|
|
</span>
|
|
|
|
{/* Sorting Indicators */}
|
|
<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;
|