In my AntD table, I’ve added a column resizer. But when resizing, accidental clicks triggers the column sorter which is not good. I was trying to limit the sort click only the built-in sort icon of the AntD table. But doesn’t work.
So thought of creating a full custom table header instead. But the required clicks doesn’t actually get triggered on click. Need a global solution due to existing column titles.
const ResizableTableTitle = ({...}) => {
const {
title,
sorter,
sortOrder = 'descend',
sortDirections,
onHeaderCell,
} = column || {};
const isSortable = !!sorter;
if (!width || disableResize) {
return <th {...restProps} />;
}
const renderSorter = () => {
if (!isSortable) return null;
return (
<span
className="ant-table-column-sorter ant-table-column-sorter-full"
onClick={() => console.log('render sorter parent span')} // <- This doesn't work
>
<span
onClick={() => console.log('render sorter child span')} // <- This doesn't work
className="ant-table-column-sorter-inner"
aria-hidden="true"
>
<span
role="img"
aria-label="caret-up"
className="anticon anticon-caret-up ant-table-column-sorter-up"
>
<svg
viewBox="0 0 1024 1024"
focusable="false"
data-icon="caret-up"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
>
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" />
</svg>
</span>
<span
role="img"
aria-label="caret-down"
className="anticon anticon-caret-down ant-table-column-sorter-down"
>
<svg
viewBox="0 0 1024 1024"
focusable="false"
data-icon="caret-down"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
>
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" />
</svg>
</span>
</span>
</span>
);
};
const content = (
<div
className="ant-table-column-sorters"
style={{...}}
onClick={() => console.log('Header clicked')} // <- Only this works
>
<span className="ant-table-column-title">
{typeof title === 'function' ? title() : title}
</span>
{renderSorter()}
</div>
);
return (
<Resizable
width={width}
height={0}
handle={(handleAxis, ref) => (
<div
role="button"
tabIndex={0}
ref={ref}
className={`handle-${handleAxis}`}
style={{
position: 'absolute',
zIndex: 1,
cursor: 'ew-resize',
userSelect: 'none',
...
}}
>
<i className="icon core-icon core-drag drag-icon" />
</div>
)}
onResize={onResize}
onResizeStop={onResizeStop}
draggableOpts={{
enableUserSelectHack: true,
disabled: disableResize,
grid: [10, 0], // Adjust grid size as needed
}}
axis="x"
resizeHandles={['e']}
>
<th {...restProps}>{content}</th>
</Resizable>
);
};
In here only the mentioned console log is happening. Others doesn’t
following is part of the common Table Component
const updatedColumnData = useMemo(() => {
if (columnResizeDisable) {
return columnData;
}
return columnData.map((column) => {
...
return {
...column,
sorter: false,
width: finalWidth,
onHeaderCell: () => ({
column,
width: finalWidth,
onResize: handleResize(column.dataIndex),
onResizeStop: handleSaveResize(column.dataIndex),
disableResize,
}),
};
});
}, [...]);
return (
<Table
columns={updatedColumnData}
dataSource={dataSource}
components={{
header: {
cell: columnResizeDisable ? undefined : ResizableTableTitle,
},
...components,
}}
onChange={onChangeOverride}
...
/>
)
