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

Changing the height of tablerows in Material UI v5: A step-by-step guide

Creating a QR code alongside an image positioned in the center: Step-by-step guide

Can an API call continue running server-side without interruption if I redirect to another page in React?

Creating a Post API in React using the useState Hook

Next.js encountered an error when trying to locate the 'net' module while working with PostgreSQL

What steps should I take to correct the alignment of this grid using CSS?

What is the best way to ensure that two contact fields are capable of adapting

Customized placement of form fields on an HTML grid determined by the user

Is there a way to insert images from a webpage in NextJs?

Styling with CSS in Angular 2+ can be quite challenging

Guide to positioning Navigation Bar in the center

Is it possible to conceal the Google recaptcha badge using CSS and show the legal text in its place instead?

Tips for dividing the WordPress header navigation horizontally using separate PHP files

Are there any aesthetically pleasing CSS themes available for GWT integration?

Selector for the Nth child element

Why do I always find myself needing to verify variable values in react?

Adjusting the border size of an SVG without using the viewbox

Click the button to go to the initial page on the pagination bar of a material-ui

Ways to stop the thead from appearing on every page in a printout

Monitoring active users on Django platform using rest framework