带分页的 ReactJS BootstrapTable 不适用于 ExportCSV

Question

我正在使用带有分页的 ReactJS BootstrapTable。效果很好，但我的用户希望能够将 table 中的数据导出到 Excel 电子表格。我集成了 Bootstrap ExportCSV ToolkitProvider。它只有在我没有分页时才有效。

<ToolkitProvider
              keyField="id"
              data={ products}
              columns={ columns }
              exportCSV
            >
              {
                props => (
                  <div>
                    <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
                    <hr />

                    <BootstrapTable { ...props.baseProps } noDataIndication={ noDataFunction } />

                    </div>
                )
              }
            </ToolkitProvider>

当我添加分页时，出现此错误：

csv.js:120 Uncaught TypeError: Cannot read property 'get' of null
    at u.handleExportCSV (csv.js:120)
    at onClick (button.js:57)
    at Object.<anonymous> (react-dom.production.min.js:49)
    at p (react-dom.production.min.js:69)
    at react-dom.production.min.js:73
    at C (react-dom.production.min.js:140)
    at P (react-dom.production.min.js:169)
    at T (react-dom.production.min.js:158)
    at N (react-dom.production.min.js:232)
    at On (react-dom.production.min.js:1718)

这是我的分页代码：

<ToolkitProvider
              keyField="id"
              data={ products}
              columns={ columns }
              exportCSV
            >
              {
                props => (
                  <div>
                    <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
                    <hr />
                    <PaginationProvider pagination={ paginationFactory(paginationOption) }>
                    {
                      ({
                        paginationProps,
                        paginationTableProps
                      }) => (
                        <div>                         
                                <BootstrapTable headerClass={ headerClass }
                                  noDataIndication={ noDataFunction }

                                  striped
                                  hover
                                  keyField='id' 
                                  data={ products} 
                                  columns={ columns } 
                                  filter={ filterFactory() } 
                                { ...paginationTableProps }           
                                />

                                {paginationProps.dataSize > 0 && 
                                    <PaginationListStandalone { ...paginationProps  } />        
                                }
                                {paginationProps.dataSize > 0 && 
                                    <SizePerPageDropdownStandalone { ...paginationProps } />        
                                }


                                { paginationProps.dataSize > 0 && 
                                    <PaginationTotalStandalone { ...paginationProps } />        
                                }
                        </div>
                      )
                    }
                </PaginationProvider> 
                  </div>
                )
              }
            </ToolkitProvider>

Answer 1

请检查您的 imports.These 是否需要导入

import ToolkitProvider, {  CSVExport } from 'react-bootstrap-table2-toolkit';

import paginationFactory from 'react-bootstrap-table2-paginator';

const { ExportCSVButton } = CSVExport;

也代替了PaginationProvider 你也可以把道具

<BootstrapTable pagination={paginationFactory()} >

带分页的 ReactJS BootstrapTable 不适用于 ExportCSV

ReactJS BootstrapTable with pagination does not work with ExportCSV

export-to-csv

reactjs

bootstrap-table

react-bootstrap-table