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

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

csssafarifocusaccessibility

Is it considered poor practice to employ setTimeout to ensure that a function is executed after the useEffect hook has run?

Let's imagine I have the following code snippet: const [test, setTest] = useState(); const [test2, setTest2] = useState(); useEffect(() => { setTest2(undefined); }, [test]); const calledFunction => () { setTest(whatever); setTest2(this ...

javascriptreactjs

Using document.getElementById will only target a single item

Essentially, I am facing an issue where the document.getElementById() function only works for the first product when I click on the addToBasket button. It always changes the details of the first product, even if I click on a different one. Is there a way ...

javascriptreactjs

I am facing difficulty in getting React to recognize the third-party scripts I have added to the project

I am currently working my way through the React Tutorial and have encountered a stumbling block. Below is the HTML markup I am using: <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=devi ...

javascriptjquerynode.jsreactjs

Enhance your NextJS project with customizable SEO data!

In my current project using Next.js and static export, I am facing an issue with SEO options being retrieved from the CMS while rendering static pages. The page contains three different sets of SEO data: seo.header, seo.body, and seo.footer. While it&apos ...

reactjsnext.js

Deactivate the focus state when hovering over different items in the navigation bar

Currently facing an issue with my Navbar items having underline animation on hover. Once clicked, the animation persists. However, when hovering over a neighboring navbar item, the underlines appear next to each other, creating the illusion of one long lin ...

javascriptjquerycssnavbar

Unable to Upload File via API Routes in Next.js

I have encountered an issue while trying to upload a file to my server using the code provided below. Despite successfully uploading the file to the folder, I receive the following console output: API resolved without sending a response for /api/upload, ...

node.jsreactjsvideofile-uploadnext.js

Is there a way to personalize the title and text of a tooltip within Apexchart?

I am working on creating a scatter plot using Apexchart to demonstrate the correlation between two sets of data. I want to personalize the tooltip in the chart by adding a distinct title for each pair of x and y values. Here is my current JSX setup, where ...

reactjschartsjsxscatter-plotapexcharts

The issue arises when creating a button source code on Gatsby and Stripe, resulting in an error message: "Uncaught TypeError: Cannot read property 'configure' of undefined."

I've been working on developing an e-commerce platform following a tutorial I found here. However, when I check the source code for checkout.js, it throws these errors and the entire page becomes blank. Uncaught TypeError: Cannot read property &apos ...

javascriptreactjsstripe-paymentsgatsby

There are no baseThemes included in the 'material-ui' npm package

Recently, I decided to experiment with using Material-UI from http://www.material-ui.com/ in conjunction with the darkBaseTheme. However, after installing the package via npm with the command: npm i --save material-ui I realized that the styles/baseThem ...

reactjsthemesmaterial-designmaterial-ui

Why does my CSS attribute selector fail to update when the property's value changes?

Context: I'm working on a React-based web app that utilizes traditional CSS loaded through an import statement. In order to create a slider functionality, I have applied a CSS selector on the tab index attribute. Challenge: The issue I am facing is t ...

cssreactjs

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

htmlcss

Utilizing Header and Footer Components in React JS

I'm new to Reactjs(Nextjs) and I am looking to create a "header" and "footer" file that can be used on all pages. I would like to know the best approach to achieve this. Should I create a "Layout.js" file and then call the Header within it? Or should ...

javascriptreactjsnext.js

Implementing Server-Side API Response Caching in React-Query and Next JS

My server-side rendering setup with react-query is working smoothly. I am aware that react-query stores a cache on the client side to serve data if the query key is fresh and available. Here is the code snippet depicting this setup - // pages/_app.tsx imp ...

reactjstypescriptnext.jsserver-side-renderingreact-query

The close button on the modal vanishes on a real iPhone

The issue I am facing is that the Close Button appears when testing responsiveness in Chrome, but disappears on a real iPhone. When clicking on an image, the image gallery should appear. However, on an iPhone, only the previous and next buttons are visibl ...

htmlcssreactjsnext.jschakra-ui

Vertical alignment with flexbox not functioning properly in Internet Explorer 11

I am attempting to use flex to center an icon within two divs. Below is the code snippet: .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; } .div-2 { margin: auto; } i { color: #ffffff; } &l ...

htmlcssinternet-explorerinternet-explorer-11

What factors should you consider when selecting between Bootstrap and MDBootstrap for your class usage?

My CSS skills are not very advanced. I have been using MDBootstrap for most of the styling on my project, but I am not a fan of its table styling. I would prefer to use the table CSS class from regular Bootstrap instead of MDB. I have both dependencies inc ...

cssbootstrap-5mdbootstrap

Having trouble with @Mui and modularized scss conflicting sporadically. Is there a way to reliably overwrite @mui default styling using scss modules?

Currently, I am enhancing an existing React app that utilizes @mui/material components. The SCSS modules are linked to my JavaScript components, and I import them along with the material components like this. // STYLE IMPORT import styles from "./logi ...

reactjssassmaterial-uireact-css-modules

The Slider component in Material UI's API may not properly render when using decimal numbers as steps or marks in React

I am having trouble creating a Material UI slider in my React application. I can't figure out which property is missing. Below is the code for my React component: import * as React from 'react'; import Slider from '@material-ui/core/S ...

javascriptreactjsslidermaterial-ui

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...

javascripthtmlcsscanvas