Question

我使用带有列的react-virtualized表。它是我要转换的现有表。该表一次显示100行。表格底部是一个按钮，用于加载接下来的100行。我无法将按钮放到桌子上。它在有条件的额外行中。无法弄清楚如何使用Column方法做到这一点

我尝试显示带有“列”的表，然后在底部添加额外的一行，但这不起作用。

        <Table
          width={width}
          height={height}
        >
          <Column label="Name" dataKey="name" width={200} />
          <Column width={300} label="Description" dataKey="description" 
       />
          //extra custom row here with button to get more data
        </Table>

我知道我可以使用无限加载器，但是此表具有我要重现的现有功能

Answer 1

最近我遇到了类似的问题，在他们的文档中挖掘了北斗星并进行了一些试验之后，我找到了解决方案，正如您在代码中看到的，我是从react-virtualized导入的defaultTableRowRenderer负责根据行数据呈现行。

首先，我提供了row count 1 more than the actual row count呈现和

然后再处理2个道具

rowGetter：在这里，这是我要返回的前一行数据，您可以在此处返回任何数据，然后我已经处理了
rowRenderer 从Table渲染道具，并为所有索引返回 defaultTableRowRenderer ，除了这一行之外，我将返回自定义UI并加载更多内容文字

导入{ 柱，表， defaultTableRowRenderer作为DefaultRowRenderer }来自“反应虚拟化”；

const yourRowCount = 10; //道具的一些价值； const yourRowsData = []; //来自道具

<Table
 width={width}
 height={height}
 rowCount={yourRowCount + 1}
 rowGetter={({ index }) => {
      if (index === yourRowCount.length) {
        index=index-1
      }
     return rows[index]
    }}
 rowRenderer={(props) => {
      if (props.index === yourRowCount.length) {
        return <div onClick={this.handleLoadMore}>Load More<div/>
      }
     return <DefaultRowRenderer {...props}></DefaultRowRenderer>;
    }}
>
   <Column label="Name" dataKey="name" width={200} />
   <Column width={300} label="Description" dataKey="description"/>
</Table>

很快，我将创建一个Codepen / Codesnippet来观看它的实时运行

参考： https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#rowrenderer

https://github.com/bvaughn/react-virtualized/blob/master/source/Table/defaultRowRenderer.js

在react-virtualized表数据之后添加自定义行

1 个答案: