Having trouble with styling table created by react-table library.
Please find the design below.
Table is created the way it is shown in documentation. Is it possible to colour headers as shown in design?
Thank you in advance
P.S.
Here is the code snippet from documentation
To create headers I need to create an array. So i cant change style for a specific header (actually I can provide element to render, but it will be rendered inside the element)
Check this, there are class names added to the data where the data should be styled differently. I think that's what you need.
You can use any react component or JSX to display content in column headers, cells and footers.
const columns = [
{
Header: () => (
<span>
<i className="fa-tasks" /> Progress
</span>
)
}
]
kindly check on this link for further details
https://github.com/tannerlinsley/react-table/tree/v6#custom-cell-header-and-footer-rendering
Had to use a workaround. As Taha Jamil mentioned you can any JSX to render inside of the Header. By adjusting some styles you will get something like this:
{
Header: () => {
return(
<div
style={{
backgroundColor: "red",
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
padding: "12px 20px",
}}
>
Title
</div>
);
}
}
Not the best solution, but works