How to Enhance Your MUI DataGrid Rows with Borders

Trying to customize the borders of Material UI DataGrid rows to achieve a design similar to this screenshot (with some info censored): https://i.stack.imgur.com/0xRFd.png

The issue I'm facing is that I'm unable to display the right border correctly (refer to codesandbox link below).

I've attempted to style the global class .MuiDataGrid-row using border: 1, but only all borders except the right one are showing up, and I can't figure out why.

Furthermore, with this styling approach, the first row has a double bottom border due to the top border of the second row overlapping, creating an awkward appearance. Any suggestions on how to address this would be greatly appreciated!

https://codesandbox.io/s/nameless-leftpad-xfyou7?fontsize=14&hidenavigation=1&theme=dark

cssreactjsmaterial-uidatagrid

Answer №1

Ensure you include the showCellVerticalBorder attribute in your DataGrid element to display borders around body cells, and use showColumnVerticalBorder for header borders.

Answer №2

https://i.stack.imgur.com/oZw8q.png There are a couple of ways to achieve this

WAY 1: (basic)

Simply include showCellRightBorder={true} in your Datagrid component

WAY 2: (allows for customization)

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

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

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

Answer №3

The Datagrid component automatically adjusts the row width to 'fit-content', resulting in the rightmost border getting cut off. To resolve this issue, you can manually set the row width to your preferred size using the global class "& .MuiDataGrid-row". In my scenario, the solution looked like this:

"& .MuiDataGrid-row": {
  border: "1px solid lightgray",
  borderRadius: "5px",
  backgroundColor: "white",
  width: "calc(100% - 2px)",
  marginTop: 3
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The version of `create-react-app` you are currently using is 4.0.1, but the most recent release is 4.0.3

Even after running the command npm uninstall -g create-react-app followed by npm install -g create-react-app, I am still encountering the same error message and the create-react-app version remains unchanged. I attempted to use npm install -g <a href=" ...

reactjsnpmcreate-react-appreact-scripts

Designing rows and columns using Angular CSS within an ngFor loop

Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...

cssangular6ngfor

"data-grid in material-ui allows for columns with flexible widths which can be set with a

Is there a way to make the material-ui data-grid (also x-grid) API allow using "flex" and "width" for column definitions? Currently, setting flex to true omits the width, but ideally I would like to be able to set flex: true and width: 250 so that the co ...

reactjsdatagridmaterial-ui

React MUI5 component latency when changing disable prop conditionally

I've been experiencing issues with latency when trying to conditionally enable/disable a Material UI button. This problem arose after updating my materialUi and reactjs to the latest versions (React 18, MUI/Material: 5.10.10). I'm using a sample ...

reactjsreduxreact-reduxmaterial-ui

How can I modify the TextField's borderBottom style to be 'none' when it is disabled?

While working within a data cell, I encountered an issue with stacking text. To workaround this obstacle, I opted to create a text field, assign it a value and helper text, disable the field, and change the text color to black when disabled. My current cha ...

cssreactjsmaterial-ui

What could be causing issues with my ReactiveUserControl or ReactUI application when it comes to running Selenium auto tests with WinAppDriver using a C# test solution?

In my development experience, I have worked on creating a robust Automated Test solution using C#, WinAppDriver (also known as WAD), and Selenium. This solution was designed to test a complex WPF windows application. Things were going smoothly until the S ...

c#reactjsselenium

Using React with Redux: Defining the Event Handler Function

Currently, I am examining this code source. render() { const { value, onChange, options } = this.props return ( <span> <h1>{value}</h1> <select onChange={e => onChange(e.target.value)} ...

reactjsredux

Error: Unable to locate module: Could not find '@/styles/globals.scss'

I'm encountering an error message with my import statement for the SCSS file in my _app.tsx. Can someone help me find a solution? I'm working with Next.js and have already exhausted almost every resource available online to fix this issue. ...

javascriptnode.jsreactjsnext.jsfrontend

Tips for designing a horizontal sub-navigation menu using CSS?

I have limited experience with list menus and am struggling to create a horizontal submenu with its own styling. Despite multiple attempts, I have been unsuccessful in finding a solution and have put the project on hold for now. Here is what I currently h ...

cssmenudrop-down-menu

Exploring the World of React Variables

Recently, I've been diving into the world of React and encountered some challenges while styling my components. Personally, I find it more organized to style within the same JavaScript file instead of having a separate one. However, I'm curious a ...

cssreactjs

Retrieve the content of the 'div' element, but exclude certain text

I have a task to copy the content from a div into a textarea, allow for editing within the textarea, and ensure that any changes made are saved back to the original div. I also need to filter out an attribute, such as data-bind: "some stuff;", set for the ...

javascriptjqueryhtmlcss

When utilizing React, I generated an HTML page with a distinct .js file, however, encountered two unexpected errors

Update : Gratitude to everyone who has helped me in tackling this issue. One user suggested using a web server, but my intention was to find a solution using just a single HTML and JS file. Even though I tried following the steps from a similar question o ...

javascripthtmlreactjs

Passing multiple functions to child components in ReactJS as a single prop

I am utilizing the technique of passing multiple functions as individual props from the parent component to its child components. Everything is working correctly without any errors or problems, but I'm interested in exploring if there is a more effici ...

javascriptreactjsparent-childprop

React: executing function before fetch completes

Whenever I trigger the ShowUserPanel() function, it also calls the getUsers function to retrieve the necessary data for populating the table in the var rows. However, when the ShowUserPanel function is initially called, the table appears empty without an ...

javascriptreactjsmaterial-uifetch

Encountering a TypeError when trying to start the nextjs server

Every time I run my next server with npm run dev, I keep encountering the same error. After testing it on a fully functional project, I am convinced that the issue is not related to the code. I suspect that the problem may be caused by running: npm insta ...

node.jsreactjsnpmnext.js

Array of Ascending Progress Indicators

I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected: https://i.stack.imgur.com/Pw9AH.png & ...

javascriptjqueryhtmlcss

There seems to be an issue with the useReducer value not updating when logging it in a handleSubmit function

I'm currently incorporating useReducer into my Login and Register form. Interestingly, when I attempt to log the reducer value, it only displays the default value. However, if I log it within the useEffect hook, it functions correctly. Below is a sn ...

javascriptreactjstypescriptnext.jsreact-hooks

Display modal within a React list

I need to display a list of items with an edit button for each item, which should trigger a modal showing the details of that specific item. Initially, I had a single modal component in the parent element and passing the visible values to the parent state ...

javascriptreactjs

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

Is there a way to verify the presence of multiple array indices in React with TypeScript?

const checkInstruction = (index) => { if(inputData.info[index].instruction){ return ( <Text ref={instructionContainerRef} dangerouslySetInnerHTML={{ __html: replaceTextLinks(inputData.info[index].instruction) ...

javascriptreactjstypescript