import * as React from
'react'
;
import Box from
'@mui/material/Box'
;
import { DataGrid } from
'@mui/x-data-grid'
;
import { yellow, blue } from
'@mui/material/colors'
;
const columns = [
{
field:
'id'
, headerName:
'ID'
, minWidth: 100, align:
'center'
,
headerAlign:
'center'
, flex: 1
},
{
field:
'type'
,
headerName:
'Type'
,
editable:
true
,
minWidth: 150,
align:
'center'
,
headerAlign:
'center'
,
flex: 1
},
{
field:
'name'
,
headerName:
'Name'
,
editable:
true
,
minWidth: 150,
align:
'center'
,
headerAlign:
'center'
,
flex: 1
},
{
field:
'price'
,
headerName:
'Price(₹/kg)'
,
type:
'number'
,
editable:
true
,
minWidth: 150,
align:
'center'
,
headerAlign:
'center'
,
flex: 1
},
];
const rows = [
{ id: 1, type:
'Vegetable'
, name:
'Potato'
, price: 35 },
{ id: 2, type:
'Grocery'
, name:
'Flour'
, price: 30 },
{ id: 3, type:
'Vegetable'
, name:
'Tomato'
, price: 50 },
{ id: 4, type:
'Fruit'
, name:
'Orange'
, price: 100 },
{ id: 5, type:
'Vegetable'
, name:
'Brinjal'
, price: 43 },
{ id: 6, type:
'Vegetable'
, name:
'LadyFinger'
, price: 87 },
{ id: 7, type:
'Fruit'
, name:
'Apple'
, price: 120 },
{ id: 8, type:
'Grocery'
, name:
'Rice'
, price: 80 },
];
const DataGridDemo = () => {
return
(
<Box sx={{ height: 400, width:
'98%'
,
boxShadow: 2, margin:
'10px'
}}>
<DataGrid
rows={rows}
columns={columns}
pageSize={10}
rowsPerPageOptions={[5]}
disableSelectionOnClick
sx={{
'& .MuiDataGrid-cell:hover'
: {
color:
'white'
,
backgroundColor: blue[700]
},
"& .MuiDataGrid-columnHeaders"
: {
backgroundColor: yellow[500],
fontSize: 16,
color:
'purple'
},
"& .MuiDataGrid-virtualScrollerRenderZone"
: {
"& .MuiDataGrid-row"
: {
"&:nth-child(2n)"
:
{ backgroundColor: blue[500] }
}
}
}}
/>
</Box>
);
}
export
default
DataGridDemo;