Skip to content

React: VscodeTable resets column widths to initial state on re-render if columns property is set. #629

Description

@colmmurphyxyz

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions