reactjs - 带有分页的 ReactJS BootstrapTable 不适用于 ExportCSV
问题描述
我正在使用带有分页的 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>
解决方案
请检查您的进口。这些是必要的进口
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';
const { ExportCSVButton } = CSVExport;
除了 PaginationProvider 之外,您还可以将道具放到
<BootstrapTable pagination={paginationFactory()} >
推荐阅读
- rust - Bevy 如何根据参数的类型“范围”其系统?
- python - 运行 DAG 时气流调度程序崩溃
- javascript - 加载我写的轮播视频时谷歌浏览器不显示封面?
- vuejs-slots - 为 vue2-daterange-picker 设置自定义范围槽时出现“TypeError:ranges.clickRange 不是函数”
- python - docker中的Spacy负载模型
- c++ - 虚拟是在 C++ 中定义智能函数指针吗?
- javascript - 谷歌材料条形图没有按比例绘制条形图
- ios - SwitUI - 列表中的两个 navigationLink
- python - python中的数独求解器不是印刷板
- angular - 当我在子元素上使用相同的角度动画时,它不起作用