Unable to align column header and body differently

[pbrianmackey]

I have

<TableHeaderColumn dataField="myData" className='alignHeader' columnClassName="alignColumn" dataAlign="right">MyData</TableHeaderColumn>

  .alignHeader{
    text-align: left;
  }
  .alignColumn{
    text-align: right;;
  }

The output is

<th class="alignHeader " style="text-align: right; width: 300px; min-width: 300px;" title="MyData" data-reactid=".0.0.0.2.0.1.1.0.0.0.0.1:$7/=17" data-field="myData"><span data-reactid=".0.0.0.2.0.1.1.0.0.0.0.1:$7/=17.0">MyData</span><div data-reactid=".0.0.0.2.0.1.1.0.0.0.0.1:$7/=17.2"></div></th>

The style overrides whatever I input for className. I want the header to text align left and the body align right. How can I do this?

[AllenFang]

@pbrianmackey, I'll check if there's some bug. Thanks.

[AllenFang]

@pbrianmackey, because a dataAlign is being right so that react-bootstrap-table will keep the column of header and body as align right, and this is be applied on inline style, that's why you can't overwrite the text-align. I'm going to support a headerAlign props for fixing this issues, so In next version, your code will be:

<TableHeaderColumn dataField='myData' dataAlign='right' headerAlign='left'>

[AllenFang]

Release on v2.3.5. Thanks