Render consistently on the server and client

[switz]

The fixed-data-table does not render with matching markup on the server and client.

Console output

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ight:32px;z-index:1;transform:translate3
 (server) ight:32px;z-index:1;left:0px;top:0px;"
Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

Possible Solution

We will probably need to change the code to always render with top and left on the first pass then use translate if the browser supports after that.
facebookarchive/fixed-data-table#44

I may send a pull request if I get a chance to fix it myself, but I figured I'd report it nonetheless.

Edit: this PR seems to be a reasonable solution facebookarchive/fixed-data-table#308

[wcjordan]

Thanks for filing. I've created a pull request with the PR you pointed out from fixed-data-table.
Any chance you have sample code for reproducing the issue to help us verify it's fixed?

[switz]

Sure, I threw together an example based on https://github.com/erikras/react-redux-universal-hot-example (which admittedly is massive overkill) in a few minutes: https://github.com/switz/fixed-data-table-2-server-rendering-example

Just clone, npm i, npm run dev, and hit http://localhost:3000 in the browser.

Thanks for the quick response and PR!

[wcjordan]

Awesome, thanks! I'm able to reproduce the error in the example on master and it appears fixed with the new PR.

[wcjordan]

Merged in, we'll push to npm with 0.6.4 on Monday.