如何获取 Column 的内容以包装在 react-virtualized 中

Question

我正在使用 react-virtualized 在 InfiniteLoader 组件中显示 Table。我有多个 Column 条目，其中 2 个是固定宽度的，一个是可变的。我怎样才能让可变宽度的包裹而不是切断？代码：

    <InfiniteLoader
      isRowLoaded={this.isRowLoaded}
      loadMoreRows={this.loadMoreRows}
      rowCount={99999999}
    >
      {({ onRowsRendered, registerChild }) => (
        <Table
          width={this.state.width || 800}
          height={1200}
          rowCount={this.state.len}
          rowHeight={this.lineSize}
          rowGetter={this.renderItem}
        >
          <Column label='Index' dataKey='index' width={indexWidth} className='metadata'/>
          <Column label='Date' dataKey='date' width={dateWidth} className='metadata' />
          <Column label='Text' dataKey='text' width={400} flexGrow={1}/>
        </Table>
      )}
    </InfiniteLoader>

Answer 1

如果您使用 Column 的内置样式和默认渲染器，则文本不会换行。（设置为 white-space: nowrap。）您可以不使用默认渲染器，或者不加载样式 - sheet，或者您可以根据需要覆盖它们.最简单的方法可能是只为 Column.

提供您自己的 cellRenderer

查看 Table + CellMeasurer demo page (source here) 的 Column 文本换行示例。

如何获取 Column 的内容以包装在 react-virtualized 中

How to get content of Column to wrap in react-virtualized

react-virtualized