{"action":"created","issue":{"url":"https://api.github.com/repos/orgsync/react-list/issues/178","repository_url":"https://api.github.com/repos/orgsync/react-list","labels_url":"https://api.github.com/repos/orgsync/react-list/issues/178/labels{/name}","comments_url":"https://api.github.com/repos/orgsync/react-list/issues/178/comments","events_url":"https://api.github.com/repos/orgsync/react-list/issues/178/events","html_url":"https://github.com/orgsync/react-list/issues/178","id":229193660,"number":178,"title":"Difficulty with table","user":{"login":"NickHeiner","id":829827,"avatar_url":"https://avatars1.githubusercontent.com/u/829827?v=3","gravatar_id":"","url":"https://api.github.com/users/NickHeiner","html_url":"https://github.com/NickHeiner","followers_url":"https://api.github.com/users/NickHeiner/followers","following_url":"https://api.github.com/users/NickHeiner/following{/other_user}","gists_url":"https://api.github.com/users/NickHeiner/gists{/gist_id}","starred_url":"https://api.github.com/users/NickHeiner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickHeiner/subscriptions","organizations_url":"https://api.github.com/users/NickHeiner/orgs","repos_url":"https://api.github.com/users/NickHeiner/repos","events_url":"https://api.github.com/users/NickHeiner/events{/privacy}","received_events_url":"https://api.github.com/users/NickHeiner/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-05-16T23:07:15Z","updated_at":"2017-06-01T06:55:04Z","closed_at":null,"body":"I have a table with fixed headers and a scrolling body. I implemented this by putting the following on `tbody`:\r\n\r\n```css\r\n  .cf-document-list-body {\r\n    display: block;\r\n    max-height: 65vh;\r\n    overflow: auto;\r\n}\r\n```\r\n\r\nI would like to use `ReactList` to render the rows of this table.\r\n\r\nIn my `itemsRenderer`, I have:\r\n\r\n```jsx\r\n    return <table>\r\n        <HeaderRow columns={columns} headerClassName={headerClassName}/>\r\n        <tbody className={bodyClassName} ref={ref}>\r\n          {renderedItems}\r\n        </tbody>\r\n        <FooterRow columns={columns} />\r\n    </table>;\r\n```\r\n\r\nI am passing `scrollParentGetter` to be a function that returns the `tbody` ref.\r\n\r\nThis produces the following HTML:\r\n\r\n```html\r\n<div style=\"position: relative; height: 75511px;\">\r\n  <div style=\"transform: translate(0px, 0px);\">\r\n    <table>\r\n      <!-- table contents are correct -->\r\n    </table>\r\n  </div>\r\n</div>\r\n```\r\n\r\nThis messes up my scrolling, and produces a giant `div` on the page that's `75511px` tall. I think that what needs to happen is the two wrapper `div`s need to be in the element that has fixed height. In my case, that's the `tbody`, but it's invalid HTML to put `div`s in a `tbody`.\r\n\r\nI'm doing this for an open-source project, in case you want to see the full code: https://github.com/department-of-veterans-affairs/caseflow/pull/2019.\r\n\r\nI'm not sure what the best way to fix this is. Why is it necessary to use these two wrapper `div`s? Why not just throw everything in the `tbody`, and then just add and remove elements according to their visibility, as determined by looking the `tbody` scroll and bounding rect attributes?\r\n\r\nOr is there a different way you'd envisioned people doing this with tables?"},"comment":{"url":"https://api.github.com/repos/orgsync/react-list/issues/comments/305405456","html_url":"https://github.com/orgsync/react-list/issues/178#issuecomment-305405456","issue_url":"https://api.github.com/repos/orgsync/react-list/issues/178","id":305405456,"user":{"login":"DrGor","id":3310321,"avatar_url":"https://avatars3.githubusercontent.com/u/3310321?v=3","gravatar_id":"","url":"https://api.github.com/users/DrGor","html_url":"https://github.com/DrGor","followers_url":"https://api.github.com/users/DrGor/followers","following_url":"https://api.github.com/users/DrGor/following{/other_user}","gists_url":"https://api.github.com/users/DrGor/gists{/gist_id}","starred_url":"https://api.github.com/users/DrGor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DrGor/subscriptions","organizations_url":"https://api.github.com/users/DrGor/orgs","repos_url":"https://api.github.com/users/DrGor/repos","events_url":"https://api.github.com/users/DrGor/events{/privacy}","received_events_url":"https://api.github.com/users/DrGor/received_events","type":"User","site_admin":false},"created_at":"2017-06-01T06:55:04Z","updated_at":"2017-06-01T06:55:04Z","body":"@NickHeiner just wondering if you found a solution for fixed headers... \r\nThe problem that I'm having is that `position: fixed` has a different behaviour if the parent element has `style=\"transform: translate(0px, 0px);\"`. See https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children/15256339#15256339"}}
{"actor":{"display_login":"DrGor"}}