在 react-virtualized 中的表数据后添加自定义行答案

【问题标题】：Add custom rows after table data in react-virtualized在 react-virtualized 中的表数据后添加自定义行
【发布时间】：2019-12-09 18:54:49
【问题描述】：

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

我尝试过使用 Columns 显示表格，然后在底部添加一个额外的行，但这不起作用。

        <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>

我知道我可以使用无限加载器，但该表具有我正在尝试重现的现有功能

【问题讨论】：

标签： javascript react-virtualized

【解决方案1】：

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

首先我提供了row count 1 more than the actual row count需要渲染和

然后又处理了 2 个道具

rowGetter：这里对于这个多余的行我返回上一行数据，你可以在这里返回任何数据，然后我已经处理了
rowRenderer 从 Table 渲染道具并为所有索引返回 defaultTableRowRenderer，除了这个额外的行，我正在返回我的自定义 UI 并加载更多文本

进口{ 柱子，桌子， defaultTableRowRenderer 作为 DefaultRowRenderer } 来自“反应虚拟化”；

const yourRowCount = 10; //一些来自props的值； 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/Codesn-p 来实时查看它的工作情况

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

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

【讨论】：