How to make some columns align left and some column align center in React Table - React

Question

Hello Stack overflow members

This is array for the column headers. I want column 1 to column 5 left align (all the header, sub header and table data cells of column 1 to column 5 to be left aligned) while I I want column 6 to column 8 to be centre aligned (all the header, sub header and table data cells of column 1 to column 5 to be centre aligned). Please help me to solve this as I can only make either all columns center or all columns left aligned.

I want to implement this particular style on column 6 to 8 header as shown in this image. .

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

This is my Header Data

const columns = [
 {
    Header: 'Column 1',
        columns: [
           {
               Header: 'S Column 1',
               accessor: 'firstName'
           }
      ]
  },
  {
      Header: 'Column 2',
       columns: [
         {
            Header: 'S Column 2',
            accessor: 'firstName'
          }
       ]
     },
    {
            Header: 'Column 3',
            columns: [
    {
            Header: 'S Column 3',
            accessor: 'firstName'
          }
         ]
   },
    {
          Header: 'Column 4',
          columns: [
    {
            Header: 'S column 4',
            accessor: 'firstName'
     }
    ]
      },
     {
     Header: 'Column 5',
    columns: [
    {
    Header: 'S column 5',
     accessor: 'firstName'
    }
   ]
   },
  {
     Header: 'Column 6',
     columns: [
  {
        Header: 'S column 6a',
        accessor: 'firstName'
  },
   {
        Header: 'S column 6b',
        accessor: 'firstName'
    },
    {
        Header: 'S column 6c',
        accessor: 'firstName'
     },
    {
         Header: 'S column 6d',
         accessor: 'firstName'
    }
  ]
     },
      {
     Header: 'Column 7',
     columns: [
     {
      Header: 'S column 7',
         accessor: 'firstName'
   }
    ]
     },
      {
        Header: 'Column 8',
        columns: [
      {
       Header: 'S Column 8a',
       accessor: 'firstName'
      },
     {
       Header: 'S Column 8b',
       accessor: 'firstName'
     },
    {
    Header: 'S Column 8c',
    accessor: 'firstName'
    },
    {
      Header: 'S Column 8d',
      accessor: 'firstName'
      }
     ]
      },
      ];

kiranvj · Accepted Answer · 2020-10-27T10:54:50.237

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 data will 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

Hello thanks man, but for columns which will be centre aligned , their sub cell data will also be centre aligned — , Dec 04 '18 at 06:20
Can you help me in this regard by slightly modifying your answer so that the sub cells also follow the header pattern, center aligned header will have centre aligned Data , while left aligned header will have left aligned data — , Dec 04 '18 at 06:26
how can i align the cell center that has formateDate. such as { Header: 'Submitted Date', accessor: 'createdAt', Cell: (e) => formatDate(e.value), }, — Tenz, Apr 21 '22 at 18:55
@Tenz try this `Cell: (e) =>
{formatDate(e.value)}
` or any other approach mentioned above — kiranvj, Apr 25 '22 at 04:26

score 1 · Answer 2 · answered Dec 04 '18 at 03:59

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)

Kiranvj almost solved my problem is for columns which will be centre aligned , their sub cell data will also be centre aligned. Can you help me in this regard by slightly modifying the answer of kiranvj so that the sub cells also follow the header pattern, center aligned header will have centre aligned Data , while left aligned header will have left aligned data. — , Dec 04 '18 at 06:25

pigeontoe · Answer 3 · 2021-09-17T17:52:36.310

1

Adding headerStyle: {textAlign: 'right'} to the column will do the trick without the need for a custom renderer for the header cell. A little cleaner imho

{
    Header: "Name",
    accessor: "name",
    headerStyle: {textAlign: 'right'}
},

UPDATE:

This is an option in v6, but it does not appear to have made it to v7.

edited Sep 17 '21 at 17:52

answered May 20 '19 at 16:46

pigeontoe

446
3
8

Sorry for the delay @Nick. This was a feature in v6 https://github.com/tannerlinsley/react-table/tree/v6#columns, but i don't think it was kept in v7. – pigeontoe Sep 17 '21 at 17:48

score 0 · Answer 4 · answered Aug 30 '22 at 06:54

0

I have implemented it this way in my project. As per your code, you can implement it as follows,

columns: [
           {             
              accessor: "firstName",
              Header: "S Column 1",
              style: {
                textAlign: 'right'
              }
           }
]

You can adjust it as per your other columns. Hope it helps.

answered Aug 30 '22 at 06:54

Aamir

2,173
1
29
58

Hmm this does not seem to affect anything? – ii iml0sto1 Nov 24 '22 at 09:59

Derek Adair · Answer 5 · 2019-04-07T20:29:09.823

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
     }]

How to make some columns align left and some column align center in React Table - React

5 Answers5

UPDATE:

Using CSS + headerClassName