В моей таблице ANTD я добавил столбец. Но при изменении размера случайные клики запускают сортировщик колонны, что не очень хорошо. Я пытался ограничить сортировку, щелкните только встроенный значок сортировки таблицы ANTD. Но не работает. < /P>
Так подумал о создании полного заголовка таблицы пользовательской таблицы. Но требуемые клики на самом деле не запускаются при щелчке. Нужно глобальное решение из-за существующих названий столбцов.const ResizableTableTitle = ({...}) => {
const {
title,
sorter,
sortOrder = 'descend',
sortDirections,
onHeaderCell,
} = column || {};
const isSortable = !!sorter;
if (!width || disableResize) {
return ;
}
const renderSorter = () => {
if (!isSortable) return null;
return (
console.log('render sorter parent span')} //
);
};
const content = (
className="ant-table-column-sorters"
style={{...}}
onClick={() => console.log('Header clicked')} //
{typeof title === 'function' ? title() : title}
{renderSorter()}
);
return (
(
role="button"
tabIndex={0}
ref={ref}
className={`handle-${handleAxis}`}
style={{
position: 'absolute',
zIndex: 1,
cursor: 'ew-resize',
userSelect: 'none',
...
}}
>
)}
onResize={onResize}
onResizeStop={onResizeStop}
draggableOpts={{
enableUserSelectHack: true,
disabled: disableResize,
grid: [10, 0], // Adjust grid size as needed
}}
axis="x"
resizeHandles={['e']}
>
{content}
);
};
< /code>
Здесь происходит только упомянутый журнал консоли. Другие не < /p>
Ниже приводит часть компонента общей таблицы < /p>
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 (
)
Подробнее здесь: https://stackoverflow.com/questions/796 ... -sort-icon
