// App.js
import { DataGrid } from "@mui/x-data-grid";
const columns = [
{ field: "id", headerName: "ID", width: 70 },
{ field: "name", headerName: "Name", width: 130 },
{
field: "address",
headerName: "Address",
width: 300,
renderCell: (params) => {
return (
<>
<div>{params.value.street}</div>
<div>
{params.value.city},{params.value.state}{" "}
{params.value.zip}
</div>
</>
);
},
},
];
const rows = [
{
id: 1,
name: "Geek",
address: {
street: "123 GeeksForGeeks",
city: "Anytown",
state: "Great",
zip: "12345",
},
},
{
id: 2,
name: "Author",
address: {
street: "456 Writer",
city: "Writertown",
state: "New",
zip: "54321",
},
},
];
export default function App() {
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid rows={rows} columns={columns} />
</div>
);
}