How to center align header for MUIDataTable in React js

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}
            />
        );
    }
}