React-bootstrap-table2: Cannot read property 'get' of null (Export CSV)

[dwalsh01]

Hi,

Big fan of this project. I am trying to implement exporting data in my project, here is how my component is setup.

• Component connects to redux and upon mounting fetches data from database

• This data is then rendered in a bootstrap table (I have error and loading states which prevent the table rendering before there is data to render

Below is my component return function:

return ( <ToolkitProvider keyField="travel_id" data={data} columns={columns} exportCSV> {props => ( <div> <ExportCSVButton {...props.csvProps}>Export CSV!!</ExportCSVButton> <hr /> <BootstrapTable {...props.baseProps} /> </div> )} </ToolkitProvider> );

Here are my columns:

const columns = [ { dataField: 'f_name', text: 'first name' }, { dataField: 'l_name', text: 'Last Name' }, { dataField: 'department', text: 'Department' }, { dataField: 'travel_id', text: 'travel id' }, { dataField: 'date_leave', text: 'date_leave' }, { dataField: 'date_return', text: 'date_return' } ];
Here is my package.json, should it be neccessary:

{ "name": "travel-express", "version": "0.1.0", "private": true, "dependencies": { "auth0-js": "^9.7.3", "axios": "^0.18.0", "json2csv": "^4.2.1", "jwt-decode": "^2.2.0", "moment": "^2.22.2", "react": "^16.4.1", "react-bootstrap-table": "^4.3.1", "react-bootstrap-table-next": "^0.1.15", "react-bootstrap-table2-editor": "^0.2.1", "react-bootstrap-table2-toolkit": "^1.0.0", "react-dom": "^16.4.1", "react-loader-spinner": "^2.1.0", "react-particles-js": "^2.3.0", "react-redux": "^5.0.7", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scripts": "1.1.4", "react-table": "^6.8.6", "redux": "^4.0.0", "redux-promise": "^0.6.0", "redux-thunk": "^2.3.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": { "babel-eslint": "^8.2.5", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-plugin-import": "^2.13.0", "eslint-plugin-jsx-a11y": "^6.1.0", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.10.0", "prettier": "1.13.7", "prettier-eslint": "^8.8.2" }, "proxy": { "/auth/outlook": { "target": "http://localhost:5000" }, "/api/*": { "target": "http://localhost:5000" }, "/authorize-outlook*": { "target": "http://localhost:5000" } } }

The table renders correctly, however upon clicking the Export CSV button I get the following error in my console:

Uncaught TypeError: Cannot read property 'get' of null at CSVOperation._this.handleExportCSV (csv.js:47) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at Object.invokeGuardedCallback (react-dom.development.js:187) at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201) at executeDispatch (react-dom.development.js:461) at executeDispatchesInOrder (react-dom.development.js:483) at executeDispatchesAndRelease (react-dom.development.js:581) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592) at forEachAccumulated (react-dom.development.js:562) at runEventsInBatch (react-dom.development.js:723) at runExtractedEventsInBatch (react-dom.development.js:732) at handleTopLevel (react-dom.development.js:4476) at batchedUpdates$1 (react-dom.development.js:16659) at batchedUpdates (react-dom.development.js:2131) at dispatchEvent (react-dom.development.js:4555) at interactiveUpdates$1 (react-dom.development.js:16714) at interactiveUpdates (react-dom.development.js:2150) at dispatchInteractiveEvent (react-dom.development.js:4532)

Should you require any more information from my project please let me know.

[AllenFang]

I saw your react-bootstrap-table-next is still 0.1.15 and react-bootstrap-table2-editor is 0.2.1. Please upgrade all of react-bootstrap-table2's packages to newest should solve your problem :)

Please open this issue if this issue still remain, thank you :) 👍 👍

[dwalsh01]

@AllenFang Ended up in the mean time implementing a workaround! Will do this going forward. Thanks! Great project, keep it up!

[shahriarnowshad]

@dwalsh01 can you share your solution ? I am having the same problem.

[dwalsh01]

@dwalsh01 can you share your solution ? I am having the same problem.

What I did at the time was use react-csv and implemented an export button that got passed the data via props.

so basically like this roughly:

< page >
< export data={data} />
< table columns={columns} data={data} />
</ page >

I styled the button to then just sit above the table.

Hope it helps

[Popov85]

Problem still remains on:

 "react-bootstrap-table-next": "^3.3.1",
 "react-bootstrap-table2-toolkit": "^2.1.0",

[neosavvy]

Problem still remains on:

 "react-bootstrap-table-next": "^3.3.1",
 "react-bootstrap-table2-toolkit": "^2.1.0",

Yeah same here - using

"react-bootstrap-table-next": "^3.3.3", "react-bootstrap-table2-toolkit": "^2.1.1",

[bkwilcox100]

"react-bootstrap-table-next": "^3.3.3",
    "react-bootstrap-table2-filter": "^1.3.0",
    "react-bootstrap-table2-toolkit": "^2.1.1",

I am also having the same issue

[ahiltgen]

"react-bootstrap-table-next": "^3.3.1",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.0.7",
"react-bootstrap-table2-toolkit": "^2.1.2",

I am having the same issue.

[AllenFang]

https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/1417#issuecomment-657180179