时间戳

首页 > 解决方案 > 在 react-virtualized 中的表数据后添加自定义行

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

问题描述

我使用带有列的反应虚拟化表。它是我正在转换的现有表。该表一次显示 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>

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

标签： javascriptreact-virtualized

解决方案

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

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

然后又处理了 2 个道具

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

从“react-virtualized”导入 { Column, Table, defaultTableRowRenderer as 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/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

推荐阅读