React-table: Select Tree Table HOC records not showing in table

[nqDev01]

What version of React-Table are you using?

6.8.0
Your bug may already be fixed in the latest release. Run yarn upgrade react-table!
Place your version here...

What bug are you experiencing, or what feature are you proposing?

Please include a detailed explanation here...
I am trying to render Select Tree table HOC but its not showing any records on table it shows select record when i select all even logs Ids of selected rows . but data is not showing in table its shows no of records correct in paging footer.
Its works for me in a separate test project with create react app. but with my project.?
I am using W
I
ebpack 3,

Use https://codesandbox.io/s/X6npLXPRW (by clicking the "Fork" button) to reproduce the issue.

Then paste a link to your newly forked codesandbox here...

What are the steps to reproduce the issue?

1. list the steps
2. to reproduce
3. the issue
   { "name": "aaaa", "description": "aaaa", "version": "1.4.0", "private": false, "dependencies": { "babel-polyfill": "^6.26.0", "babel-preset-react": "^6.24.1", "chance": "^1.0.13", "chart.js": "^2.2.1", "classnames": "^2.2.5", "collection-visit": "^1.0.0", "d3": "~3", "date-range-picker": "^0.3.5", "dropzone": "^5.2.0", "font-awesome": "^4.7.0", "formik": "^0.10.4", "intro.js": "^2.8.0-alpha.1", "lodash": "^4.17.4", "moment": "^2.19.2", "moment-range": "^3.1.0", "namor": "^1.0.1", "niftystates": "~0.6.0", "node-sass": "^4.7.2", "opn": "^5.2.0", "prepend-file": "^1.3.1", "react": "^16.2.0", "react-addons-shallow-compare": "^15.6.2", "react-bootstrap": "^0.31.5", "react-bootstrap-table": "^4.1.4", "react-dates": "^16.0.0", "react-dom": "^16.2.0", "react-draggable": "^3.0.4", "react-modal": "^3.1.2", "react-number-format": "^3.0.2", "react-select": "^1.2.1", "react-table": "^6.8.0", "recharts": "^1.0.0-beta.10", "rivets": "~0.8.1", "xdomain": "^0.7.3", "yup": "^0.23.0" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-syntax-async-functions": "^6.13.0", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-regenerator": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babelify": "^7.3.0", "body-parser": "^1.13.1", "browserify": "^14.1.0", "clean-webpack-plugin": "^0.1.17", "compression-webpack-plugin": "^1.1.2", "copy-webpack-plugin": "^4.3.1", "css-loader": "^0.28.7", "del": "^2.2.2", "express": "^4.12.4", "file-loader": "^1.1.6", "html-loader": "^0.5.1", "html-webpack-plugin": "^2.30.1", "html-webpack-template": "^6.1.0", "lodash.assign": "^4.2.0", "postcss-loader": "^2.0.10", "preload-webpack-plugin": "^2.2.0", "pump": "^1.0.1", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", "url-loader": "^0.6.2", "vinyl-buffer": "~1.0.0", "vinyl-source-stream": "~1.1.0", "webpack": "^3.10.0", "webpack-dev-server": "^2.11.1", "ws": "^2.2.2" }, "scripts": { "build": "webpack --env.prod --env.buildTo=dev", "prod": "webpack --env.prod --env.buildTo=dist", "start": "webpack-dev-server --open --hot --inline --env.buildTo=wdist", "UAT": "webpack --env.prod --env.buildTo=UAT" } }
   when pivot off its shows record
   

With pivotBy

[nqDev01]

`function getColumns(data) {
const columns = [];
const sample = data[0];
for (let key in sample) {
if (ignoreColumns.includes(key)) continue;
**if (key=='post'){
columns.push({
accessor: d => d.post,
Header: key,
id:key,
style: { whiteSpace: 'normal' },
})

  continue;};**
columns.push({
  accessor: key,
  Header: key,
  style: { whiteSpace: 'normal' },
})

}
return columns;
}`
solved it by adding this in columns , somehow accessor were being capitalize.

[ranrao]

@nqDev01 - Can u please elaborate on how you resolved the issue? I have a similiar problem. Works well in codesandbox, but when i embed in my project, a blank table is seen. Thanks much in advance!

[khartnett]

@nqDev01 Also having this problem. Can't seem to reproduce it in codesandbox, but even if I put the sample code from Select Tree Table here https://react-table.js.org/#/story/select-tree-table-hoc into my project the bug happens. How did you find the accessor was being capitalized?

[khartnett]

@ranrao I've solved the issue I was having. The problem is actually a css issue. The data is there it's just hidden. My project is built on Bootstrap which includes this hidden class:

.hidden {
  display: none !important;
}

react-table adds this class to the expandable rows, however this looks to be unnecessary. I don't see any hidden class defined in the react-table css (there is a '-hidden' however). A quick band-aid solution is to add this css with more selectors to the project to override it:

.rt-td.rt-expandable.hidden {
  display: block !important;
}

[shulj310]

I had the same issue (using Bootstrap). Adding the above custom css made for a quick fix!