How to center align header for MUIDataTable in React js - reactjs

Question

I'm using MUIDataTable but I can't center the headers. I need to center the headers vertically and horizontally. Please someone can help me:
I'm trying with this code but don't work:
columns: [{
name: <strong>#</strong>,
options: {
filter: false,
download: false,
print: false,
}
},
{ name: <strong>Empresa</strong>, options: { align: "center"} },
{ name: <strong>Ruc</strong>, options: { align: "center"} },
{ name: <strong>Fecha</strong>, options: { align: "center"} },
{ name: <strong>Usuario Aginado</strong>, options: { align: "center"} },
{ name: <strong>Usuario Ediccion</strong>, options: { align: "center"} },
{ name: <strong>Indicador</strong>, options: { align: "center"} },
{ name: <strong>Objetivo</strong>, options: { align: "center"} },
{ name: <strong>Estado</strong>, options: { align: "center"} },
{ name: <strong>Tiempo Excedido</strong>, options: { align: "center"} },
{
name: <strong><i className="zmdi zmdi-edit"></i></strong>,
options: {
filter: false,
download: false,
print: false
}
}
],
...
<MUIDataTable
data={this.state.data}
columns={this.state.columns}
options={this.state.options}
/>

Answer 1

Please check this example:
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
export default class MuiDatatable extends React.Component {
render() {
const columns = [
{
label: "Name",
name: "Name",
options: {
filter: true,
customHeadRender: (columnMeta, updateDirection) => (
<th key={1} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
{columnMeta.name}
</th>
)
}
},
{
label: "Title",
name: "Title",
options: {
filter: true,
sortDirection: 'asc',
customHeadRender: (columnMeta, updateDirection) => (
<th key={2} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
{columnMeta.name}
</th>
)
}
},
{
name: "Location",
options: {
filter: false,
customHeadRender: (columnMeta, updateDirection) => (
<th key={3} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
{columnMeta.name}
</th>
)
}
},
{
name: "Age",
options: {
filter: true,
sort: false,
customHeadRender: (columnMeta, updateDirection) => (
<th key={4} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
{columnMeta.name}
</th>
)
}
},
{
name: "Salary",
options: {
filter: true,
sort: false,
customHeadRender: (columnMeta, updateDirection) => (
<th key={5} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
{columnMeta.name}
</th>
)
}
}
];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"]
];
const options = {
selectableRows: "none"
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}

Answer 2

I only added the following code to my jss to make the header center:
MUIDataTableHeadCell: {
toolButton: {
justifyContent: 'center'
},
},

Answer 3

First off;
Import 'createTheme' and 'ThemeProvider';
import { createTheme, ThemeProvider } from '#mui/material/styles'
Next;
const getMuiTheme = () =>
createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
fontFamily: 'poppins',
justifyContent: 'center',
fontWeight: 'bold',
},
},
},
},
})
That's all...
The MuiButton component controls the text header section. Feel free to modify to your taste. If you wish to align to left like most people would like to, you can just set paddingLeft to '1px'. In your case, justifyContent: center should do