[FEATURE]: Add customStyles for "rdt_TableBody".

[Vjedi729]

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

Right now, the only way to apply styles to the table body (which contains the rows but not the headers) is to write CSS. It would be sensible to allow this using CSS-in-JS objects as well. In my use-case, I would like to scroll through rows while the row headers stay at the top of the page.

Describe the solution you'd like

The simplest solution to this is to add a "tableBody" key to the "customStyles" property, the same as has been done for "table" (for "rdt_Table").

Describe alternatives you've considered

The existing alternative is to add CSS referencing "rdt_TableBody".

Additional context

It would also be helpful to include a list of "customStyles" keys and their respective HTML classes in the documentation, to make it easier to find the key that corresponds to the tag that you want to style.

[BinduManjunatha1]

Hi,

How do we add CSS refrence to existing classes like rdt_TableBody?

I'm trying to use react-data-table-component for my development but having issues while applying the styles. I'm trying to use Styled components for overriding the pre defined classes but it doesn't work. How can we override predefined classes?

import DataTable from 'react-data-table-component'; import styled from 'styled-components';

export const ReactDataTable = styled(DataTable).rdt_TableHead { background-color:gray };

using this ReactDataTable inside my component for displaying the table data.

[hendra1]

bump..