Cannot display all columns of a table

[deepakagrawal]

I have a data table with large number of columns. I don't see a horizontal scroll bar in that case. Therefore, I don't see all the columns. Is this a bug or is there any way I can show the horizontal scroll bar?

[hoangmt]

I think the bar is there. You can look at the demo here: #78
The problem might due to the browser you are using. I am having same issue, on firefox i can see the scroll bar but on chrome it is hidden.
Maybe other people can give more insights.

[deepakagrawal]

You are right. It works fine in firefox or internet explorer. Chrome seems to not show a horizontal scroll bar.

[couture-ql]

Possibly an upstream issue with react-data-grid and Chrome. With large data-sets the horizontal scrollbar is not available in Chrome and symptoms are very similar to #78.

Possible upstream issue:
Comcast/react-data-grid#916

---

Example of table in Chrome not showing horizontal scrollbar:

[couture-ql]

Managed to figure out that the upstream scrolling issues are resolved in 5.0.1 in react-data-grid. Merge commit f505d00b, within their release-5.0.1 branch. However, I have been unsuccessful in bumping the version used in dash-table-experiments to use either react-data-grid@5.0.1 or react-data-grid@5.0.3. There appear to be some dependency issues I am unable to sort out that are causing me grief.

1. I need to include immutable as a dev dependency, despite the transitive dependency being listed upstream. I'm not familiar with npm enough to know if it should have pulled that in automatically, despite it being listed as a devDependency upstream.
2. even if I include immutable as devDependency to dash-table-experiments, neither the demo or the usage-callable.py examples appear to improve in Chrome. I'm not sure if we need to also bump the version of React. Currently this project uses 15.5.4, and at the time of writing this, react-data-grid@5.0.3 uses React 16.4.2. Which, after some double checking, is odd to me because React 16.x is not officially supported, and 15.x is, however the upstream deps rely on it.

I'm not sure how to help next with providing a fix, since all the React dependencies for dash are quite complicated: this project requires dash-components-archetype (now deprecated) which relies on React 15.5.4.

I'm not a node expert, so I'm not sure if there's something I'm missing I should have tried. I would have submitted a PR, but until I can get it working there's no point.

So far I've only bothered to change dependencies:

---

diff --git a/package.json b/package.json
index 8555d5c..42f787d 100644
--- a/package.json
+++ b/package.json
@@ -31,14 +31,15 @@
     "prop-types": "^15.5.9",
     "ramda": "^0.24.1",
     "react": "^15.5.4",
-    "react-data-grid": "^2.0.58",
-    "react-data-grid-addons": "^2.0.58",
+    "react-data-grid": "^5.0.3",
+    "react-data-grid-addons": "^5.0.3",
     "react-dom": "^15.5.4",
     "react-virtualized": "^9.9.0"
   },
   "devDependencies": {
     "dash-components-archetype-dev": "^0.2.7",
     "enzyme": "^2.8.2",
+    "immutable": "^3.8.2",
     "react-test-renderer": "^15.5.4"
   }
 }

[couture-ql]

Ah, so. The above patch will help fix things. I fooled around with the demo app, and made the surrounding div width 50% to really force the rendered viewport to be smaller, and the updated dependencies to react-grid-data will help with scrolling just fine. I'll provide a saner PR so we can try it.

See #97