Fix-data-table - 如何设置表流体宽度

Question

我正在尝试从facebok的fix-data-table插件安装流量宽度表。

不起作用的是流体部分。它不流畅。那我在这里错过了什么？

代码

<div style={{width:'100%'}}>
    <Table
        rowHeight={50}
        rowsCount={10}
        width={2000}
        height={500}
        headerHeight={30}>
        <Column
        header={<Cell>First Name</Cell>}
        cell={<Cell>mama</Cell>}
        fixed={true}
        width={100}
        />
        <Column
        header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
        cell={<Cell>chacha</Cell>}
        flexGrow={2}
        width={200}
        />
        <Column
        header={<Cell>Company (flexGrow greediness=1)</Cell>}
        cell={<Cell>nana</Cell>}
        flexGrow={1}
        width={200}
        />
        <Column
        width={100}
        header={<Cell>Last Name</Cell>}
        cell={<Cell>sasa</Cell>}
        />
    </Table>
</div>

截图

Answer 1

实际上，您拥有所有4列，但在设置为<Table />组件属性的总宽度与每个<Column />宽度的总和之间存在冲突。您的表格宽度设置为 2000 ，但列数为： 100 + 200 + 200 + 100 = 600 。这使得第二列非常宽，因为它具有flexGrow属性集（第3列也具有此属性）。 flexGrow属性采用任何可用的额外宽度，并根据所有列的flexGrow值按比例分配。

<强>更新： 实际上，您必须为<Table />组件指定宽度。如果希望表占用其父容器的所有可用空间，则可以使用像this one这样的响应包装器。