CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-table
user10374052
user10374052

Reputation:

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

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. 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'
      }
     ]
      },
      ];

Upvotes: 26

Views: 98265

Answers (5)

Aamir
Aamir

Reputation: 2283

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.

Upvotes: 0

pigeontoe
pigeontoe

Reputation: 486

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.

Upvotes: 1

kiranvj
kiranvj

Reputation: 34107

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

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

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

Upvotes: 39

Derek Adair
Derek Adair

Reputation: 21915

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

Upvotes: -2

Jayce444
Jayce444

Reputation: 9063

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)

Upvotes: 1

Related Questions