在表中的数据后添加自定义行-经过虚拟化

Question

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

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

        <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

import {
  Column,
  Table,
  defaultTableRowRenderer as DefaultRowRenderer
} from "react-virtualized";

const yourRowCount = 10; //some value from props;
const yourRowsData = []; //from props

<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