CODEWITHSUNDEEP
reactjsreact-table
Serge Najimov
Serge Najimov

Reputation: 491

Different colour for react-table headers

Having trouble with styling table created by react-table library.

Please find the design below. enter image description here

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 enter image description here

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)

Upvotes: 3

Views: 3213

Answers (3)

Serge Najimov
Serge Najimov

Reputation: 491

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>
    );
  }
}

enter image description here

Not the best solution, but works

Upvotes: 0

Taha jamil
Taha jamil

Reputation: 44

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

Upvotes: 0

noiseymur
noiseymur

Reputation: 876

Check this, there are class names added to the data where the data should be styled differently. I think that's what you need.

Upvotes: 1

Related Questions