Add border to MUI DataGrid Row

Question

im trying to style Material UI DataGrid rows to have borders, something close to this screenshot (I censored some information, but u get the idea)

The problem I have is that I can't get the right border to appear ( codesandbox below )

So far I tryied to style the global class .MuiDataGrid-row with border: 1 , all borders except the right are being applied, I don't understand why.

Also with this approach, the first row have double bottom border because the second row top border is overlapping and it looks weird, if u can give me a hand with that too would be great!

Answer 1

There are two methods

METHOD 1: (simple)

Add showCellRightBorder={true} to your Datagrid component

METHOD 2: (provides customization)

Add the following css to your sx prop of Datagrid Component..

CODE TO BE REMOVED:
// "& .MuiDataGrid-row": {
//   borderTop: 1,
//   borderBottom: 0
// },

CODE TO BE ADDED:
"& .MuiDataGrid-cell": {
border: 1,
borderRight: 0,
borderTop: 0,
// add more css for customization
},