styling column header in material table in react js

Question

im using materialtable for my application and i need to style my column header text to center....the data being displayed is getting aligned but not the header.....i used headerStyle...im able to change the text color but not the text alignment....i dnt want to use "TableHeader" from materialtable as im using sorting on my columns and when im using the TableHeader the sorting functionality is not working

            <MaterialTable
              className="-striped -highlight"
              title="Settlements"
              columns={[ 
                
                { title: 'Code', field: 'eCode', sortable: true,wrap: true,align:'left'},
                { title: 'Name', field: 'eName', sortable: true, wrap: true,align:'left'},
                { title: 'Amount', field: 'pAmount', sortable: true, wrap: true,align:'center',
              customSort:(a,b)=>(a.pAmount)-(b.pAmount) },

              options={{
                headerStyle:{color:'red',textAlign:'center'},
                exportButton: true,
                exportAllData: true,
                thirdSortClick: false,
                actionsColumnIndex: -1,
                pageSize: (this.state.data.length > 50) ? 50 : this.state.data.length,
                pageSizeOptions: [10, 25, 50, 100],
                rowStyle: rowData => ({
                  backgroundColor: (rowData.tableData.id % 2 === 0) ? '#FFF' : '#E5EEF6'
                })
              }}

Answer 1

To center the header text in the Material Table, you can update the headerStyle property of the options object to include a textAlign property with a value of 'center'.

options={{
  headerStyle:{color:'red',textAlign:'center'},
  // Other options...
}}

This will center the text of the column headers.

Alternatively, you can use the align property of each column to align the text of the cells in that column. For example, to center the text of the "Amount" column, you can update the column definition like this:

{ title: 'Amount', field: 'pAmount', sortable: true, wrap: true, align: 'center', customSort: (a,b) => (a.pAmount)-(b.pAmount) },

This will center the text of the cells in the "Amount" column. You can set the align property to 'left', 'right', or 'center' to align the text accordingly.