Using Aphrodite to accomplish custom styles about fixed-data-table-2 HOT 10 CLOSED

I would have to play around with some things to see if it was for sure possible to help out with issue #47 . It'd be really trivial for someone to include an "Aphrodite" stylesheet into their project to tinker with. The deal with Aphrodite is that there isn't support for "Global" styles. You'd need to have a global style sheet (by either using webpack or just simply including it in your index.html file) in order to accomplish global styles. However, the gains you get with being able to write inline styles that get compiled on a component bases (i.e. only when a component is loaded) and write inline with 'pseudo selectors, media queries and the like' are astronomical when it comes to writing reusable, robust components. I'll do some work over the weekend to see if I can't get you a solid example of how I'm using them.

I was able to talk with Paul O'Shannessy at React Rally a few weeks back and he mentioned he was pleased that someone has taken this project under their wing so once again... thank you!

from fixed-data-table-2.

Good to know. For now I'll work on adding some new examples that demonstrate using FDT with Aphrodite and react-dimensions to the repo. I'll also see if there are any places where we can trim down or simplify the default styles. I'll close this issue once that work is done.

I'll also open 2 new issues. One for discussion separating default styles out into a theme or themes which can be easily included or removed. The goal being supporting style overrides which don't require !important in the future.

The 2nd would be a discussion of replacing the internal Facebook utilities which FDT uses for styling components with alternatives. The goal being cleaning up the FDT internals and making the project more approachable to future contributors.

from fixed-data-table-2.

Example using Aphrodite is available here: http://schrodinger.github.io/fixed-data-table-2/example-styling.html

If anyone wants to really snazz it up, enhancements are welcome!

from fixed-data-table-2.

That sounds reasonable to me. Do you want to submit a sample PR and then a follow up PR to replace the use of cx in the code base?

Also do you know if Aphrodite supports any theme-ing or other CSS configuration tools which might assist with issues like #47

from fixed-data-table-2.

@ryanhca Any updates with that proof of concept? I'm interested to see how this can turn out

from fixed-data-table-2.

https://github.com/ryanhca/fixed-data-table-aphrodite/blob/master/example.jsx

I just published a small example. I wish I had time to make something more involved. But you'll see how trivial this can be. Just simple add the styles to the table/column/cell that you'd like to be styled. Very simplistic way to get the look you want!

You'll also see that I included come involved ways of making the table responsive. Using the global event listeners I was able to add and destroy event listeners while using the React Component LifeCycle methods. Involved for sure, but it gets the job done really nicely and works across all major browsers so far!

from fixed-data-table-2.

Thanks Ryan! This looks like a good way to apply styles as an FDT user, and I think we should integrate some examples like this into the repo.

It looks like you didn't need to modify any FDT internals for your example either. Are there any cases where styling is difficult with how FDT currently exists?

I'm also curious how we can cleanup FDTs current CSS using inline styles. Do you have any advice or suggestions there? @KamranAsif do you think it's better to have Table, Column, & Cell take a class name and join it with the defaults (current behavior) or have it override the defaults?

One thing which would be really nice would be to join with the defaults but allow individual style attributes to be overridden where they conflict with the defaults. I'm not sure how best to accomplish this. From reading about Aphrodite, it seems Aphrodite uses !important to do this, but some may not be comfortable with that approach. We could also offer a prop to disable default styles for users who need to.

Thanks again for the examples, and any feedback you have on the above questions.

from fixed-data-table-2.

wrt making the table responsive, there's a lot of conversation here requesting something like that.

I think it might be a good idea to add an example with your code for responsiveness or maybe using an HOC like react-dimensions. That's probably the cleanest way to maintain a separation of concerns while making FDT user friendly.

from fixed-data-table-2.

@wcjordan I haven't found any cases that make gaining the specificity I need a problem atm, if I run into anything I'll post about the issues here. We have modified a few things in the FDT Stylsheet. Aphrodite is good at getting compartmentalized components but it doesn't handle "global" styles well, so leaving that stylesheet in is nice. I'm not sure what suggestions I would have for cleaning up the stylesheet atm. I think if the Defaults were vanilla (similar to the way they are now but even more stripped down) one could get away with building on top of what already exists. Some of the global styles we have changed have been table header colors, font-sizes/families and cell heights. These were trivial changes and easy to unpack the file and pack it back up.

The !important tag is a bit terse and I cringe each time I see it haha. Our hope is that we can run Aphrodite someday in the non !important mode. This would take a lot of effort for us at the moment being that we have a large global stylesheet in our project as well as the styles that come with FDT.

As for responsive tables. I have really only tinkered around with those event handlers (creating/destroying a "resize" event along with the component that displays the table) that are a part of the example. Feel free to play around with those as they seem to get the job done really well. I would like to see how well the work with 10000's of rows of data/lazyloading/other performance heavy scenarios. I could imagine things getting heavy really quickly with listeners being built and destroyed but we really haven't pushed the limits of React perf yet.

from fixed-data-table-2.

PR with examples demonstrating this is up here: #59

I've opened follow up issues here:
#60
#61

Let's move any follow up discussion to those issues and PR and use them to plan for the future.

from fixed-data-table-2.