Внесение изменений в изменение размера поведения столбца таблицы ⇐ CSS

[Anonymous]

В первый раз здесь. < /p>
Мне нужно изменить поведение колонки заголовка в таблице ANTD, чтобы быть измененным. Код в TS + React + antd + react-retizeable.
Столбец таблицы может быть изменена, может быть фиксированное/закрепленное столбец.
Когда вы изменяете размер последнего столбца в таблице, он увеличит ширину, но RH останется прикрепленным к столе. Таким образом, эффективно RH будет оставаться там, и увеличение ширины будет применено вместе с прокруткой, так что RH всегда будет виден, прикреплен к правой стороне таблицы. т.е. Увеличьте ширину столбца, и RH должен оставаться прикрепленным к правой стороне таблицы.import React, { useState } from 'react';
import { Resizable, ResizeCallbackData } from 'react-resizable';
import 'react-resizable/css/styles.css';

const ResizableTitle = (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
props: React.HTMLAttributes & {
onResize: (
e: React.SyntheticEvent,
data: ResizeCallbackData
) => void;
onResizeStop: (
e: React.SyntheticEvent,
data: ResizeCallbackData
) => void;
width: number;
minWidth: number;
isResize: boolean;
}
) => {
const { onResize, width, onResizeStop, minWidth, isResize, ...restProps } =
props;

const [isFieldResizing, setIsFieldResizing] = useState(false);

if (!width || !isResize) {
return ;
} else {
return (

}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
onResizeStart={(e) => {
e.stopPropagation();
setIsFieldResizing(true);
document.body.classList.add('no-select');
}}
onResizeStop={(e, data) => {
setIsFieldResizing(false);
onResizeStop(e, data);
document.body.classList.remove('no-select');
}}
minConstraints={[minWidth, 0]}>


);
}
};

export default ResizableTitle;
< /code>
Это образец о том, как он используется с таблицей ANTD. < /p>
import { Table } from 'antd';
import ResizableTitle from './components/resizable-title';
// ...

const ListForms = ({ formsRef }: IListForms) => {
// ....
return (


item),
onChange: onFormsSelectChange,
onSelectAll: isAllFormsSelected
? onClearAllForms
: onSelectAllForms,
fixed: 'left',
columnWidth: '50px',
}}
rowKey="id"
scroll={
formsList && formsList.length > 0
? { x: '1050', y: '400' }
: {}
}
tableLayout={
formsList && formsList.length > 0 ? 'fixed' : 'auto'
}
/>


// ...
);
};

export default ListForms;
< /code>
Вот CSS (SCSS) в случае, если нужно: < /p>
.ant-table-thead {
> tr > th {
.react-resizable-handle {
opacity: 0;
background: none;
transition: $transition-default;
right: 0;
top: 0;
z-index: 9;
height: 100%;
width: 12px;
padding: 0;

&:after {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 3px;
z-index: 1;
width: 1px;
background-color: $border-color-split;
}

&:hover {
opacity: 1;
}
}

&.is-resizing {
.react-resizable-handle {
opacity: 1;
transition: $transition-default;
cursor: col-resize;
}
}

&:hover {
.react-resizable-handle {
opacity: 1;
transition: $transition-default;
cursor: col-resize;
}

.table-sort-icon {
width: 16px;
opacity: 1;
transition: $transition-default;
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ble-column