Search code examples
reactjsreact-hooksreact-bootstrapreact-bootstrap-table

ExportCSV using react-bootstrap-table-2


I'm trying to trigger my exportCSV from a different component outside of the TookkilProvider... is that possible? I did see some reference to this.refs.table.handleExportCSV(); here, but I can't seem to find that function

My code is below:

<ToolkitProvider
    keyField="id"
    data={[...data]}
    columns={Columns}
    exportCSV={{ onlyExportFiltered: true, exportAll: false }}
    search
>
    {
        props => (
            <div>
                <MyExportCSV {...props.csvProps} />
                <hr />
                <BootstrapTable keyField='id'
                    {...props.baseProps}
                    pagination={paginationFactory(options)} expandRow={expandRow}
                    ref={n => node = n} />

            </div>
        )
    }
</ToolkitProvider>

Solution

  • You can do it with useRef in parent and forwardRef in child components. Create custom MyExportCSV with hidden input and pass parent ref to it and call onExport() on click. Then on parent you can create button that will be on click trigger event click of child input. I wrote example for you. DEmo