I'm currently exploring Material UI and grappling with a specific challenge.
Is there a method within Material UI to create a Data Grid with two columns, one left-aligned and the other right-aligned? I've managed to align the headers as desired, but the cell alignment remains inconsistent.
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;
My current approach involves setting each column's width to 50%, which successfully aligns the headers but fails to carry over to the cells. Is there a recommended way to achieve this alignment?
Sandbox: https://codesandbox.io/s/material-demo-forked-gcvi8?file=/demo.js