73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import { html } from 'htm/preact';
|
|
|
|
const styles = {
|
|
td: {
|
|
padding: '10px 12px',
|
|
borderBottom: '1px solid var(--border-color)',
|
|
color: 'var(--text-primary)',
|
|
maxWidth: '300px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
cursor: 'pointer'
|
|
}
|
|
};
|
|
|
|
function formatValue(value, col) {
|
|
if (col === '_time') {
|
|
return formatTime(value);
|
|
}
|
|
|
|
if (value === null) return 'null';
|
|
if (value === undefined) return 'undefined';
|
|
|
|
if (typeof value === 'object') {
|
|
try {
|
|
return JSON.stringify(value, null, 2);
|
|
} catch (e) {
|
|
return '[Object]';
|
|
}
|
|
}
|
|
|
|
return String(value);
|
|
}
|
|
|
|
function formatTime(nanoTime) {
|
|
if (!nanoTime) return '';
|
|
const date = new Date(nanoTime / 1000000);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
|
|
export function TableCell({ value, column, isTruncated, onShowPopover, onHidePopover }) {
|
|
const formattedValue = formatValue(value, column);
|
|
|
|
const handleMouseEnter = (e) => {
|
|
if (onShowPopover) {
|
|
onShowPopover(e, formattedValue);
|
|
}
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
if (onHidePopover) {
|
|
onHidePopover();
|
|
}
|
|
};
|
|
|
|
return html`
|
|
<td
|
|
style=${styles.td}
|
|
onMouseEnter=${handleMouseEnter}
|
|
onMouseLeave=${handleMouseLeave}
|
|
>
|
|
${formattedValue}
|
|
${isTruncated && html`<span style=${{ marginLeft: '4px', fontSize: '10px' }}>✂️</span>`}
|
|
</td>
|
|
`;
|
|
}
|