How do I change the style of the header using ReactTable

Question

I need to change the default style to the style below

Welcome to SO. please provide minimal and relevant code which you tried isn't working. So that we can help — Hemadri Dasari, Oct 01 '18 at 16:14
please refer the doc, https://react-table.js.org/#/story/readme. Just refer the Columns section. — Sree Nath, Oct 01 '18 at 17:15

score 8 · Answer 1 · answered Oct 25 '19 at 07:17

8

one other solution would be to return a custom component in the header section.`

 const columns=[
      { 
        Header:()=><small className="my_custom_class">Name</small>,
        accessor:"name"
      }]`

answered Oct 25 '19 at 07:17

Zadiki Hassan Ochola

746
15
25

Jarrod L · Answer 2 · 2018-10-18T14:27:55.863

2

Update the css reference

Within your class, replace import "react-table/react-table.css"; with import "../myPath/react-table-override.css"; to use your own modified css file located at [myPath].

Update the css

Replace the original css

.ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc {
  box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
}

.ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc {
  box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6);
}

with the following css to remove the default box-shadowing and to add unicode arrows to the end of the header names.

.ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc {
  div:first-child:after {
    content: " ▴";
  }
}

.ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc {
  div:first-child:after {
    content: " ▾";
  }
}

edited Oct 18 '18 at 14:27

answered Oct 17 '18 at 18:47

Jarrod L

285
5
16

Would need to be (extra {} removed) .ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc div:first-child:after { content: " ▴"; } .ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc div:first-child:after { content: " ▾"; } – user3775501 Oct 18 '18 at 08:36
Have tried everything to get this to work but it doesn't. Copied the css from react-table.css into a new file, made the changes and switched the import statement to the new one...import "../../components/ext-react-table.css" but nothing ever changes. Have emptied the cache and done a hard reload. If there is no reference to the css it still displays fine so not convinced that the css link does anything? – user3775501 Oct 18 '18 at 09:15
Well the css in "../../components/ext-react-table.css" is being used, have proven that so the css changes can't be correct, will go through the objects.... – user3775501 Oct 18 '18 at 09:34

score 2 · Answer 3 · answered Oct 18 '18 at 13:40

I got the following to work, after copying react-table.css into a new file, amending as below and importing the new file wherever react-table is used.

The first two parts get rid of the ugly black border and the last two add the relevant arrows.

.ReactTable .rt-thead .rt-th.-sort-asc,
.ReactTable .rt-thead .rt-td.-sort-asc {
    box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.6)
}

.ReactTable .rt-thead .rt-th.-sort-desc,
.ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.6)
}

div.-sort-desc::after {
    content: " \25BC";
    float: right;
}

div.-sort-asc::after {
    content: " \25B2";
    float: right;
}

Glad you figured it out! Using the unicode characters looks cleaner than mine, I'm going to do that too. — Jarrod L, Oct 18 '18 at 14:19

Midhun G S · Accepted Answer · 2018-10-03T14:10:49.743

1

Try adding the following css. You have to position the arrows properly.

rt-resizable-header -sort-desc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-top: 20px solid #000;
}

rt-resizable-header -sort-asc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-bottom: 20px solid #000;
}
.ReactTable .rt-thead .rt-th.-sort-desc, .ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: none;
}

edited Oct 03 '18 at 14:10

answered Oct 01 '18 at 17:25

Midhun G S

906
9
22

Thanks for the reply! Could you put some examples of how to use it? – Felipe Muniz Oct 02 '18 at 13:31
You have to override the react-table css. Will share the example shortly – Midhun G S Oct 02 '18 at 17:08
@MithunGS Do you mind sharing how you managed to get it to override the table's normal css? I've been trying for some time and can't get it to be applied – user3775501 Oct 16 '18 at 15:26
Both the css shown above for rt-resizable-header and the existing ReactTable css for rt-resizable-header show up in the page source but the new css never has any effect. There must be something else that needs to be done? – user3775501 Oct 17 '18 at 09:19
@user3775501 Replacing the default `import "react-table/react-table.css";` with your own `import "../myPath/react-table-override.css";` allows you to use locally modified css. – Jarrod L Oct 17 '18 at 17:44
@JarrodL the problem with that though is it's creating bugs for later when react-table gets updated. You'd have to re-copy the css for react-table and make the same changes to it locally. Is there no other way to override just the one part? – user3775501 Oct 18 '18 at 07:47
@user3775501 Good point on future css updates. We override most of the css, but will have to manage future changes if they affect stylization. – Jarrod L Oct 18 '18 at 14:23

score 1 · Answer 5 · edited Nov 01 '19 at 04:13

import 'react-table/react-table.css';
 use headerStyle property inside column prop.

  headerStyle: {
          background:'blue',
          textAlign:'center',
          color: 'darkorange',
          borderRadius: '5px',
          padding: '5px',
          border:'1px solid black',
          borderRight: '3px solid yellow',
          borderLeft:'3px solid yellow',
          borderTop:'3px solid yellow',
          borderBottom:'3px solid yellow'
          },

How do I change the style of the header using ReactTable

5 Answers5