CODEWITHSUNDEEP
reactjsdatatableheader
Cristian D. Gonzalez T.
Cristian D. Gonzalez T.

Reputation: 33

How to center align header for MUIDataTable in React js

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

Upvotes: 1

Views: 6259

Answers (3)

SegunDev
SegunDev

Reputation: 131

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

Upvotes: 0

Md Rafee
Md Rafee

Reputation: 5530

I only added the following code to my jss to make the header center:

MUIDataTableHeadCell: {
  toolButton: {
    justifyContent: 'center'
  },
},

Upvotes: 0

Khabir
Khabir

Reputation: 5854

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

Upvotes: 1

Related Questions