ReactJS BootstrapTable with pagination does not work with ExportCSV

Question

I am using ReactJS BootstrapTable with pagination. Works great, but my users want the ability to export the data on the table to Excel spreadsheet. I integrated the Bootstrap ExportCSV ToolkitProvider. It only works if I don't have pagination.

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

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

                    </div>
                )
              }
            </ToolkitProvider>

When I added pagination, I get this error:

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)

Here is my code with pagination:

<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

Please check your imports.These are the necessary imports

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

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

const { ExportCSVButton } = CSVExport;

Also instead of PaginationProvider you can also put props to

<BootstrapTable pagination={paginationFactory()} >