jbetancur / react-data-table-component

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://react-data-table-component.netlify.app
Apache License 2.0
2.03k stars 409 forks source link

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

Open ADTC opened 6 months ago

ADTC commented 6 months ago

Feature Check list

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.