渲染将填充全宽的表格列。

Question

想象窗口 1000px 宽度。 四个文本列，宽度为 100 像素。 我想让列增长到 250px 以填充整个宽度。

我正在使用 AutoSizer 和 MultiGrid。

Answer 1

Column

文档应该有足够的信息供您完成此操作。基本上你想要这样的东西：

<Table width={1000} {...props}>
  <Column
    label='Name'
    dataKey='name'
    flexGrow={1}
    width={100}
  />
  {/* other columns ... */}
</Table>

Answer 2

有点晚了，但是如果您使用 AutoSizer，您可以执行类似的操作：

<AutoSizer>
{({width, height}) => (
    <Table height={height} width={width}>
        <Column width={width/4} className="MyColumn1" .../>
        <Column width={width/4} className="MyColumn2" .../>
        <Column width={width/4} className="MyColumn3" .../>
        <Column width={width/4} className="MyColumn4" .../>
    </Table>
)}
</AutoSizer>

AutoSizer 提供“宽度”和“高度”，因此您可以像这样使用它们。您可以根据需要使用“宽度”调整列的宽度，因此它将取决于容器的宽度。

---

如果您使用 AutoSizer，则不得为表格使用固定值，因为它的目标是为您提供“高度”和“宽度”，因此您的表格应使用这些值。

<Table width={1000} {...props}>

---

我希望这对某人有帮助。

Answer 3

不要使用插件，而是使用 Flexbox 来定位您的项目。您可以在这里学习： http://flexboxfroggy.com/