react-data-table-component
react-data-table-component copied to clipboard
[FEATURE]: Ability to apply styles on a column header cell container
Feature Check list
- [x] Agree to the Code of Conduct
- [x] Read the README to ensure the feature is not already present
- [x] You read Creating Issues, Features and Pull Requests
- [x] Considered the value versus complexity for all users of the library as well as library maintenance
- [x] Considered if this can be a storybook or documentation example
Is your feature request related to a problem? Please describe
If I use style property in a TableColumn to apply styles to a particular column only (not all columns), it only applies to the (non-header) data cells in the column.
For example:
style: {
borderRight: '1px solid green',
},
This shows a right border in the data cells only, not in the header cells.
Describe the solution you'd like
I would like to apply it to the header cell as well. Or there could be a headCellStyles property.
Describe alternatives you've considered
I could write CSS like this (in its simplest form, not considering SCSS modules that need :global to wrap it):
.rdt_TableCol[data-column-id="myId"] {
border-right: 1px solid green;
}
Feels like a hack but it works!
Additional context
Nil.