ReactJS BootstrapTable с нумерацией страниц не работает с ExportCSV - PullRequest
Новая
       19

ReactJS BootstrapTable с нумерацией страниц не работает с ExportCSV

0 голосов
/ 17 октября 2019

Я использую ReactJS BootstrapTable с нумерацией страниц. Прекрасно работает, но мои пользователи хотят иметь возможность экспортировать данные из таблицы в электронную таблицу 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>

1 Ответ

0 голосов
/ 05 ноября 2019

Пожалуйста, проверьте ваш импорт. Это необходимый импорт 

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

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

const { ExportCSVButton } = CSVExport;

Также вместо PaginationProvider вы также можете поставить реквизиты на 

<BootstrapTable pagination={paginationFactory()} >
...