在反应虚拟化中的表数据之后添加自定义行

Question

Im using react-virtualized table with Columns. Its an existing table that I'm converting. The table displays 100 rows at a time. At the bottom of the table is a button to load the next 100 rows. I'm having trouble getting my button in the table. Its in an extra row with a conditional. Cant figure out how to do that with the Column approach

I've tried displaying the table with Columns then adding an extra row at the bottom but that doesn't work.

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

I know I can use the infinite loader but this table has existing functionality that I'm trying to reproduce

Answer 1

Recently I have faced a similar problem, after digging dipper in their documentation and experimenting a little bit I have found the solution, as you can see in code I have imported defaultTableRowRenderer from react-virtualized, this component is responsible for rendering your row based on row data.

First I have provided the row count 1 more than the actual row count needs to render and

then handled 2 more props

1. rowGetter : here for this extra row I am returning previous row data, you can return any data here, then I have handled the
2. rowRenderer render props from Table and returning defaultTableRowRenderer for all index except this extra row where I am returning my custom UI with load more text

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>

Soon, I will create a Codepen/Codesnippet to see it working live

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

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