React DataTable customization - reactjs

Question

Is it possible to style the headers of the react-data-table-component? I tried this
columns: [
{
name: "Name",
selector: "name",
sortable: true,
style: {
background: "orange",
},
},
],
But it styles all the cells underneath that header, not the header itself.
Please let me know if there is documentation that I study this component API from.

Answer 1

I didn't find any mechanism to customize only the header cells, but you could style them with CSS selectors by passing an id in each column object and using the rdt_TableCol class
columns: [
{
name: "Name",
selector: "name",
id: "name",
sortable: true,
style: {
background: "orange",
},
},
],
and in a CSS file
[data-column-id="name"].rdt_TableCol {
background-color: orange;
}
https://codesandbox.io/s/style-header-cell-rdt-c1y35
of course, this method is susceptible to internal changes in the lib, make sure to fix the version and revisit the code if you upgrade the version

Answer 2

In the DataTable props you can assign a style to the customStyles property like so:
import { tableCustomStyles } from './tableStyle.jsx';
<DataTable
customStyles={tableCustomStyles}
/>
And then in the tableStyle.jsx file you can customize all properties of the table like this:
const tableCustomStyles = {
headCells: {
style: {
fontSize: '20px',
fontWeight: 'bold',
paddingLeft: '0 8px',
justifyContent: 'center',
backgroundColor: '#FFA500'
},
},
}
export { tableCustomStyles };
Here is the API reference: https://react-data-table-component.netlify.app/?path=/docs/api-custom-styles--page
And here is the styles.ts file from the repo that shows some of the properties you can manipulate: https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts