Material UI Data Grid: is there a way to right align an entire column?

Question

I'm new to Material UI and have been trying to figure this out.

In Material UI, is there a way to have two columns in a Data Grid, one left aligned and one right aligned? So far I have been able to left and right align the headers, but the way I do it seems to leave the cells behind.

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

const columns = [
    { field: 'id', headerName: 'Column 1', align: "left", headerAlign: "left", width: "50%" },
    { field: 'data', headerName: 'Column 2', align: "right", headerAlign: "right", width: "50%" },
  ];

const rows = [
  { id: 1, data: 'asdfasdf'},
  { id: 2, data: '12951d'}, ];


function DataTable () {

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

export default DataTable;

As you can see, the way I did it was by setting each column width to 50%. This actually works for the headers, but the format is not carried over to the cells. Is there a way I can do this?

Sandbox: https://codesandbox.io/s/material-demo-forked-gcvi8?file=/demo.js

Answer 1

You can make use of custom CSS so that you can increase the width of the cascading columns to 100%.

.MuiDataGrid-renderingZone, .MuiDataGrid-root .MuiDataGrid-row {
  width: 100% !important;
}

I used !important for overriding the inline CSS added by ReactJS. There could be inbuilt solutions if you refer to the ReactJS documentation.

Codesandbox demo: https://j0geb.csb.app/