className is not applied to <Table> about window-table HOT 10 CLOSED

Hi @frankcalise Thank you for creating the issue. Good catch.
I will ship a fix for this soon.

from window-table.

I released a fix for this in v0.5.0
In fact, I updated the demo in the homepage with a striped table, along with some example code.

see it here: https://window-table.now.sh/

Thanks again for creating the issue

from window-table.

Actually, this is a lot trickier than I initially expected. Since react-window destroys rows when scrolling, it changes the odd-even behaviour of the rows, making them flip the strips as you scroll.

I'm not sure what the solution to that would be. But most likely, it should be done with react-window itself.

from window-table.

Hey @pupudu - thanks for the quick response. Ok so maybe striped isn't necessarily supported due to virtualization aspect here. But yeah we could probably implement with some row styler function if it passes the caller the index?

Something like rowClassName in Brian's original react-virtualized Table component? https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md

Regardless the passing of the className now looks to be fixed, so that's good, thanks! I have great interest in this project actually because my company uses many large data filled tables. Originally using react-bootstrap-table (why not sure didn't just use react-bootstrap's Table component) but displaying all the data at once causes it to be very laggy and mess up other interactions with the UI.

I'll try to help in anyway I can :)

from window-table.

Your demo seems to handle striped well though? Oh I see, if evens are dark then scroll some and sometimes odds are dark. So yeah it's not supported perfectly, however as far as usefulness to read across the row it's effective.

from window-table.

Thank you for the responses @frankcalise. I was also having a look at rowClassName. That's probably the best we can do. I will have a go most probably today.

I am really happy to hear that you are interested in this project. That gives us more energy to invest time on this.
Cheers!

from window-table.

Cool sounds good. I've branches my project to try and replace react-bootstrap-table and for a simple table with custom column components I've got it working. Yours obviously with the virtualization from react-window. But it also fits mobile way better since it gets the horizontal scroll. The other package does very poorly on small screens.

The next thing I'll have to try is a click to select row, which would utilize rowClassName also is imagine.

from window-table.

Hey @frankcalise
I just published v0.6.0 with the new rowClassName prop as we discussed.

I also added a Guide section to the documentation website which shows how to use the new prop to make a striped table: https://window-table.now.sh/docz-guides-striped-table

The prop itself is documented here: https://window-table.now.sh/docz-components-api-window-table#rowclassname-string--function

Hope this helps

from window-table.

Very cool, thanks for the quick turn around! Now I'll try to implement a select (checkbox) column for the rows to later do something with the selected IDs.

Maybe if I come up with a good example we can discuss if it's an efficient solution as well as make add it to the list of Guides on the docs.

Thanks again.

from window-table.

Sure thing mate. Looking forward to that.

Cheers!

from window-table.