You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am trying to change the default styling for the table in general but let's focus on header cells. By default they have a controversial 馃槂 gradient and I would like to get rid of it.
I tried
<Cell style={{ background: "none", backgroundImage: "none" }}>
First Name
</Cell>
But this sets a style on element with classes fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 while the background is set on parent element with classes fixedDataTableCellLayout_main public_fixedDataTableCell_main
I could try some hacks like setting the background color to white or overwriting the classes in css but surely there's a proper way to do it that I am missing - otherwise how could you even use this library?
Here's the sandbox - it's the example I copied from the InfinteScroll:
Unfortunately the CSS for the library isn't very extensible. Your best bet is probably to override styles using !important.
Alternatively you can use any component you want for the Cells. The Cell component is just a default to help you get started. I recommend not using it and using your own component styled as you'd like. But the class you mention fixedDataTableCellLayout_main public_fixedDataTableCell_main is on the parent component and would still be there as a parent DOM element to your cell.
This is an unfortunate decision made by the FB devs on the original FDT. We have #60 and #61 ticketed out to improve it if you'd like to work on a better solution and submit a PR. Thanks
I'm going to close this but feel free to ask any follow ups here or add longer term ideas to #60 & #61
@wcjordan Thank you for detailed explanation - I was afraid that is going to be the answer. I will check the tickets you mentioned.
I think a solution also could be to just create your own stylesheet based on the default you give (since I am importing it anyway).
Do you think docs update would be a good idea?
I am trying to change the default styling for the table in general but let's focus on header cells. By default they have a controversial 馃槂 gradient and I would like to get rid of it.
I tried
But this sets a style on element with classes
fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1
while the background is set on parent element with classesfixedDataTableCellLayout_main public_fixedDataTableCell_main
I could try some hacks like setting the background color to white or overwriting the classes in css but surely there's a proper way to do it that I am missing - otherwise how could you even use this library?
Here's the sandbox - it's the example I copied from the InfinteScroll:
https://codesandbox.io/s/fixed-data-table-2-infinite-scroll-6svwz?file=/src/InfiniteScrollExample.tsx
The text was updated successfully, but these errors were encountered: