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

admin管理员组

文章数量:1336182

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: =/demo.js

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

• javascript
• html
• css
• reactjs
• material-ui

Share Follow asked Jun 16, 2021 at 9:49 SUNiMODSUNiMOD 10522 silver badges55 bronze badges 2

• Do you need it like this? nimb.ws/hiHV1W – m4n0 Commented Jun 16, 2021 at 9:58
• @m4n0 Yes! could you tell me how you did that? – SUNiMOD Commented Jun 16, 2021 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/

I have recently also experienced this problem. It builds on top of the original code. It just provides a flex: 1 property on the column definition to stretch the column to fill the width.

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

本文标签： javascriptMaterial UI Data Grid is there a way to right align an entire columnStack Overflow