reactjs 呈现将填充全宽的表列,

vm0i2vca 于 2023-10-17 发布在 React

关注(0)|答案(3)|浏览(76)

想象一下窗口1000px的宽度。四个文本列100px宽。我想让列增长到250像素，以填补全宽。
我正在使用AutoSizer和MultiGrid。

reactjs

来源：https://stackoverflow.com/questions/43546160/render-table-columns-that-will-fill-full-width

3条答案

按热度按时间

hlswsv351#

Column docs应该有足够的信息让你完成这一点。基本上你想要这样的东西：

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

赞(0）回复(0）举报 2023-10-17

mzsu5hc02#

有点晚，但如果你使用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提供“宽度”和“高度”，因此您可以像这样使用它们。您可以使用'width'来调整列的宽度，因此它将取决于容器的宽度。
如果使用AutoSizer，则不能为表使用固定值，因为它的目标是提供“高度”和“宽度”，因此表应使用这些值。