title: How to make some columns align left and some column align center in React Table - React
body: <p>Hello Stack overflow members</p>
  
  <p>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.</p>
  
  <p><strong>I want to implement this particular style on column 6 to 8 header as shown in this image.</strong> <a href="https://i.stack.imgur.com/EfrqH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EfrqH.png" alt="Image"></a>.</p>
  
  <p><strong>If you can help me, please provide a demo on CodeSandbox</strong></p>
  
  <p>This is my Header Data</p>
  
  <pre><code>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'
        }
       ]
        },
        ];
  </code></pre>