With a resizable VscodeTable, there doesn't seem to be any way to declare the initial widths of the columns without adverse side-effects
- On each re-render, column widths are reverted to their initial value (either the value of the columns property, or evenly-spaced if property is not set).
- Widths are set via inline styles, making it difficult (impossible?) to overwrite.
- When colums are resized, VscodeTable does not update the value of
this._columns, or expose the current state in any other way, as far as I can tell.
Reproduction Example
const COLUMNS = ['20%', '40%', '30%', '10%'];
const Example: React.FC = () => {
const [num, setNum] = useState(1);
return (
<VscodeTable resizable columns={COLUMNS}>
<VscodeTableHeader>
<VscodeTableHeaderCell>A</VscodeTableHeaderCell>
<VscodeTableHeaderCell>B</VscodeTableHeaderCell>
<VscodeTableHeaderCell>C</VscodeTableHeaderCell>
<VscodeTableHeaderCell>D</VscodeTableHeaderCell>
</VscodeTableHeader>
<VscodeTableBody>
<VscodeTableRow>
{/* click handler will trigger a re-render, set column widths back to initial state if user has resized a column */}
<VscodeTableCell onClick={() => setNum(num + 1)}>{num{</VscodeTableCell>
<VscodeTableCell>2</VscodeTableCell>
<VscodeTableCell>3</VscodeTableCell>
<VscodeTableCell>4</VscodeTableCell>
</VscodeTableRow>
</VscodeTableBody>
</VscodeTable>
);
};
Any help is greatly appreciated. TIA!
With a resizable VscodeTable, there doesn't seem to be any way to declare the initial widths of the columns without adverse side-effects
this._columns, or expose the current state in any other way, as far as I can tell.Reproduction Example
Any help is greatly appreciated. TIA!