Method 1:

Something like this should do the job

columns: [           {                               accessor: "firstName",              Header: () => (                    <div                      style={{                        textAlign:"right"                      }}                    >S Column 1</div>)           },

If you can help me, please provide a demo on CodeSandbox

Play here

Update after OP comment

but for columns which will be centre aligned , their sub cell datawill also be centre aligned

Manipulate cell styles like this

Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>

Play it here

Method 2:

Use can use the headerClassName and specify a class name, in that class you can specify the rule text-align:center

So the code will look like

const columns = [{  Header: 'Column 5',  accessor: 'name',  headerClassName: 'your-class-name'},{......}]

Method 3:

If you have lot of headers, adding headerClassName in all headers is a pain. In that case you can set the class name in ReactTableDefaults

import ReactTable, {ReactTableDefaults} from 'react-table';const columnDefaults = {...ReactTableDefaults.column, headerClassName: 'text-left-classname'}

and in the ReactTable, use like this

<ReactTable ... ... column = { columnDefaults } />

Note: if you are using bootstrap you can assign the inbuilt class text-center to headerClassName

There's a few options. One is that the column configuration takes a style property, which you can use to pass in custom CSS including textAlign (see here for docs on column properties). Into each column pass the desired textAlign style value.

Another option would be to pass a custom Cell property to the columns, and wrap your content in an element to which you've assigned the text alignment styling. Something like:

{    Header: "Name",    accessor: "name",    Cell: cellContent => <RightAlign>{cellContent}</RightAlign>},

(Google around to see the docs and example usages)

Using CSS + headerClassName

CSS

.ReactTable .rt-thead .rt-tr-align-left {    text-align: left;}.ReactTable .rt-thead .rt-tr-align-right{    text-align: right;}

Column Config

const columns = [ {    Header: 'Column 1',    columns: [           {               Header: 'S Column 1',               accessor: 'firstName',               // Apply custom className to header               headerClassName: 'rt-tr-align-left'           }      ]  },  {     Header: 'Column 2',     columns: [{            Header: 'S Column 2',            accessor: 'firstName',            // Apply custom className to header            headerClassName: 'rt-tr-align-right'          }       ]       /// etc     }]