react-data-table-component icon indicating copy to clipboard operation
react-data-table-component copied to clipboard

[FEATURE]: Ability to apply styles on a column header cell container

Open ADTC opened this issue 1 year ago • 0 comments

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.

ADTC avatar Feb 06 '24 18:02 ADTC