Trouble aligning Material UI data-table columns (table head) to center in React

Question

Trouble aligning Material UI data-table columns (table head) to center in React

I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proceed. Here is my code:

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';

export default function DataTable({data, someColumns}) {

    const columns = someColumns;
      
    const rows = data;

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
}

The data in the columns defaults to being aligned left. How can I change this?

EDIT: I was able to fix it using this CSS. Thanks to Fahad.

.MuiDataGrid-colCellTitle {
    display: block;
    text-align:center;
    width: 100%; 
}

.MuiDataGrid-cell {
    display: block;
    position: relative;
    text-align: center;
}

This CSS will center both rows and columns in the table.

css reactjs material-ui

Answer 1

Answer №1

If you happen to stumble upon this issue, I recommend checking out the implementation of ColDef linked here.

The recommended way to approach this is as follows:

const [columns, setColumns] = useState([
  {
    field: 'status',
    width: 130,
    headerName: 'Status',
    // Set text alignment properties for headers and cells
    headerAlign: 'center',
    align: 'center',
    renderCell: (params) => {
      return (
          <Chip label={params.value} />
      )
    }
  },
]);

If your content includes elements other than text (as shown in the example), simply setting alignment properties might not center the content properly. Since cells are styled with display: flex and align-items: center, you'll need to add justify-content for horizontally centered cells:

.MuiDataGrid-cellCenter {
  justify-content: center;
}

You can apply similar adjustments for MuiDataGrid-cellLeft or MuiDataGrid-cellRight if required.

Answer 2

If you happen to stumble upon this issue, I recommend checking out the implementation of ColDef linked here.

The recommended way to approach this is as follows:

const [columns, setColumns] = useState([
  {
    field: 'status',
    width: 130,
    headerName: 'Status',
    // Set text alignment properties for headers and cells
    headerAlign: 'center',
    align: 'center',
    renderCell: (params) => {
      return (
          <Chip label={params.value} />
      )
    }
  },
]);

If your content includes elements other than text (as shown in the example), simply setting alignment properties might not center the content properly. Since cells are styled with display: flex and align-items: center, you'll need to add justify-content for horizontally centered cells:

.MuiDataGrid-cellCenter {
  justify-content: center;
}

You can apply similar adjustments for MuiDataGrid-cellLeft or MuiDataGrid-cellRight if required.

Answer 3

Answer №2

I found a solution that worked perfectly for me.

If you want to target th and tr in your style.css file, you can do so using the property .MuiDataGrid-colCellTitle. To align it in the center, add the following CSS:

Style.css

 .MuiDataGrid-colCellTitle {
  display: block;
  text-align:center;
  width: 100%;
}

Make sure to import the necessary components:

import { DataGrid } from '@material-ui/data-grid';

Next, declare your rows and columns data within a function:

export default function DataGridDemo() {
  const columns = [
    // Add your column data here
  ];

  const rows = [
    // Add your row data here
  ];
  
  // Apply your styles

  return (
    <div
      style={{
        height: 400,
        width: "100%",
        backgroundColor: "red",
        textAlign: "center"
      }}
    >
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
}

You can find the Code Sandbox link with an example implementation here: https://codesandbox.io/s/thirsty-leaf-izuhd?file=/src/App.js

Answer 4

I found a solution that worked perfectly for me.

If you want to target th and tr in your style.css file, you can do so using the property .MuiDataGrid-colCellTitle. To align it in the center, add the following CSS:

Style.css

 .MuiDataGrid-colCellTitle {
  display: block;
  text-align:center;
  width: 100%;
}

Make sure to import the necessary components:

import { DataGrid } from '@material-ui/data-grid';

Next, declare your rows and columns data within a function:

export default function DataGridDemo() {
  const columns = [
    // Add your column data here
  ];

  const rows = [
    // Add your row data here
  ];
  
  // Apply your styles

  return (
    <div
      style={{
        height: 400,
        width: "100%",
        backgroundColor: "red",
        textAlign: "center"
      }}
    >
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
}

You can find the Code Sandbox link with an example implementation here: https://codesandbox.io/s/thirsty-leaf-izuhd?file=/src/App.js

Trouble aligning Material UI data-table columns (table head) to center in React

Answer №1

Answer №2

Similar questions

The React Native application unexpectedly shuts down upon clicking on the RNPickerSelect component

Implementing Text Input Props in MUI: A Step-by-Step Guide

Assign a specific class to a table row once a checkbox is selected by utilizing states

How to Dynamically Update Sass Styles with Webpack 2?

What is the most efficient method for line wrapping in the react className attribute while utilizing Tailwind CSS with minimal impact on performance?

Padding and margin properties for Material UI Grid items and TextFields

Choose an element by its specific data attribute

What is the functionality behind a free hosting website?

How can I display only the y-axis values and hide the default y-axis line in react-chartjs-2?

Having trouble deploying a Node/React application on Heroku

Tips for adjusting the width of a table

Tips for extracting data from nested JSON structures

Why does the data in useState only update after clicking the button for the second time?

Alternatives to using $.getJSON()

The issue with text color not displaying properly within a Material-UI Theme

The forEach method is supported on FileList in CRA/Next JS applications, however, it does not work on FileList in Next JS applications created using

React: Enzyme lacks functional local scope

CSS menu LI with horizontal spacing

"Encountering an error with AWS Amplify, Next.JS, and GraphQL Server: Unable to retrieve current user in

Npm issue. I'm unable to successfully install any packages as it keeps throwing an error