React-table: Custom Header

Created on 30 Mar 2017 · 4Comments · Source: tannerlinsley/react-table

I am restyling your table. But I couldn't add a sort icon in the header.

Like:

| ___ Name ___ | ___ Age 🡱 ___ |

I tried to tie into the header like so:
<ReactTable columns={ [ { accessor: 'age', header: ( { column } ) => ??? } ] } />

But maybe there is an even better solution to create a template for all the column-headers to add a font-awesome icon like  in the end of the column (depending if it's sort ASC or DESC)

Any recommendations?

Source

chrys1110

Most helpful comment

Why don't you use CSS for that?
Here's what I use:

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

eladbs on 2 Apr 2017

👍3 ❤1

All 4 comments

you need to add the header: () => Progress, as described in this section of the readme.

something like this should work...

const columns = [
  {
    header: () => (<span>Age<i className='fa fa-arrow-up' /></span>)
  }
];

I would render another small component outside of the header property and just include it, you can then use state to track whether its sorting ASC or DESC and adjust accordingly.