Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrapping header content in a div element #1754

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

michal-lipski
Copy link

Wrapping header content in a div element in order to apply styles on all of the header elements without modifying styles of the header.

The real world case for me was to move caret (sorting indicator) before header text. The easiest way is to use display flex and flex-direction: row-reverse. Problem is that I cannot apply this styling on header directly, as it needs to have display table-cell to work properly. With this wrapper, it will be easier to style content of the header.

Wrapping header content in a div element in order to apply styles on all of the header elements without modifying styles of the header.
@AllenFang
Copy link
Owner

Sorry for lately reply,

HI @michal-lipski I'm not sure if following will help you:
<TableHeaderColumn dataField='name' headerText='Product Name'><div>Product Name</div></TableHeaderColumn>

the children will wrap a custom div, but not sure if it's will be more easy for you to move the sort caret.

If it doesn't help, I think your PR is ok, but I hope we can have a prop to control if wrap a div or not

Let me know you idea, thanks your contributions.

@michal-lipski
Copy link
Author

Thanks, but this will not help as carret componenet is rendered outside of a childern: { children }{ sortCaret }

Ok, I see that wrapping in a div might be a breaking change. Someone could rely their style on direct children of element.

How about wrapHeader property? Or wrapHeaderContent property? By default, it will be equal to false.

@AllenFang
Copy link
Owner

@michal-lipski how about wrapHeaerCell? and agree the default is false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants