Display column header row divider for pinned columns in v5 DataGrid

I'm attempting to customize the appearance of pinned columns in MUI's DataGrid by adding a column header-row divider.

The official demo by MUI for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx] displays the pinned column header without a bottom outline similar to this, but I want it to resemble the header-row divider seen on other non-pinned columns like this (Please note the faint gray divider line near the bottom of the screenshot).

If anyone can provide guidance on which CSS classes and properties to modify, it would be greatly appreciated!

UPDATE: For further clarification, you can view a side-by-side comparison picture here. enter image description here

UPDATE: Success! Please refer to my response below. Any suggestions or feedback are also welcome.

cssreactjsmaterial-ui

Answer №1

After making some adjustments, I believe the border for the Email section in the center should have a height of 420:

    export default function BasicColumnPinning() {
  return (
    <div style={{ height: 420, width: "100%" }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ["name"], right: ["actions"] 

} }}
          />
        </div>
      );
    }

Previously, the height was set to 400. This adjustment takes care of the header-row divider. For the "tables" and "action" sections, there is a specific border-bottom property on the row below that hides the top border. To fix this, inspect the padding around "Virginia Herr..." in the developer tools and change the border-bottom to simply "border". Hopefully, this solution resolves the issue.

Answer №2

Solved the issue by customizing the borderTop property for the .MuiDataGrid-virtualScroller class. Appreciate all the assistance provided!

const CustomizedColumnPinning = () => {
  return (
    <div style={{ height: 420, width: "100%" }}>
      <DataGridPro
        sx={{
          ".MuiDataGrid-virtualScroller": {
            borderTop: "1px solid rgba(224, 224, 224, 1)"
          }
        }}
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ["name"], right: ["actions"] } }}
      />
    </div>
  );
}

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 Netlify deployment encountered an error: Module not found - Unable to resolve 'react-icons/SI'

When I deploy my app to Netlify, I encounter a 'Module not found' error even though it works fine on desktop. Do I need to push my Node_modules to GitHub for this to work, or is Netlify supposed to download all the dependencies from package.json? ...

reactjsnetlify

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

htmlcss

Is there a way to eliminate spaces from a string using react-native?

As a user of react-native, I've encountered an issue with inconsistent line breaks when inputting long strings on the screen. For example: I aim to achieve consistent string wrapping as shown in the image below: Here is my code. How can I address t ...

javascriptnode.jsreactjsreact-nativestyled-components

The alignment of my text appears to be off

I am facing an issue with the second <ul> on my webpage, which contains more content compared to the first one. In this second <ul>, the last line is appearing floated to the left and does not appear below the penultimate line as expected. Li ...

htmlcss

Exploring the Usage of Sass in Next.js

Can Next.js log the Sass rules like @debug, @error, @warn? I attempted: $base-color: #c6538c; @debug "base color: #{$base-color}"; However, I'm not getting any output in the terminal. I'm unsure if I'm checking the incorrect location or if ...

reactjssassnext.js

Reset checkboxes in Material UI data grid

Currently, I am immersed in a React Js project that involves various tabs, each containing a unique data grid table with rows featuring checkboxes. Issue: Whenever I select a row from Table 1 and navigate to Tab 2 before returning to Tab 1, the checkboxes ...

javascriptreactjsdatagridmaterial-ui

The font from the server is not displaying correctly in the local HTML file

After uploading the ttf font file to the server, I utilized the following CSS code: @font-face { font-family: "fontname"; src: url("http://www.mywebsite.com/Fonts/fontname.ttf"); } body { font-family: "fontname", sans-serif; } Within the loc ...

htmlcss

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Having trouble with the side borders on my navbar. I've used a background image for the border (blue line) in the list item of the navbar. Is there a way to move down two specific list items slightly, like shown in my screenshot? I need to bring down ...

htmlcss

Leveraging an external React library to utilize .ogg files for audio playback specifically in the Safari

Hey there! I'm currently working on incorporating ogg-opus audio playback in a react app on Safari (since it doesn't support .ogg format). My project was initialized using create-react-app. I came across the "ogv.js" library, which supposedly h ...

javascriptreactjssafariogg

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

I am experiencing an issue with centering the thumbnails of products on my e-commerce website. Despite successful centering in IE, FF, and Opera, Chrome and Safari are not aligning the thumbnails properly – they remain at the top of the div instead of be ...

phpjqueryhtmlcss

Converting a C# Dictionary<string,string> to a TypeScript Map<string,string>

Struggling to find the best approach for handling key:value pairs in TypeScript when receiving a dictionary object from the C# backend. Everything attempted so far has not yielded the expected results. This is the C# code snippet: var displayFields = ...

c#reactjstypescript

Choose a label that will consistently appear over the component, even if a value has already been selected

Utilizing Material UI v5 with emotion, I am in need of the component label to consistently cover the select, regardless of whether any values have been selected. Upon reviewing their documentation and conducting a Google search, it appears there is no str ...

reactjsmaterial-ui

Utilize the react-router Link in your Chip component

The Chip component allows for creating a link using component="a" clickable href="/", but is there a method to generate it as a react-router <Link>? Any suggestions? ...

material-ui

Step-by-step guide on incorporating a hyperlink within a row using @material-ui/data-grid

I am currently using @material-ui/data-grid to showcase some data on my webpage. Each row in the grid must have a link that leads to the next page when clicked. I have all the necessary data ready to be passed, however, I am facing difficulty in creating a ...

javascriptreactjsdatagridmaterial-ui

How can state be efficiently communicated from a parent component to a child component in React?

As I embark on my first React project, I have encountered a recurring issue that has left me scratching my head. Whenever I pass state to a child component within an empty-dependency useEffect and then update the state, the child fails to reflect those cha ...

javascriptreactjs

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Recently, an error message has been popping up in Vue 3 regarding the use of ::v-deep. The warning states that using ::v-deep as a combinator is deprecated. Instead, it recommends using ::v-deep(<inner-selector>) Here is an example of the CSS ...

cssvue.jsvuejs3

Tips for avoiding the persistence of an old array on the screen after refreshing and showing the new, updated array

Currently, my task involves displaying array values on a webpage. The array data is sourced from a real-time database in Firebase. After adding new values to the array or inputting another value into the database on the previous page, we are redirected to ...

javascriptreactjsfirebasereact-nativefirebase-realtime-database

Tips for stopping an accordion from toggling in Bootstrap when a user clicks on a specific section of the toggle button

I am currently utilizing bootstrap for my project. The accordion feature I have implemented is standard, but I am looking for a way to customize its behavior. Specifically, when a user clicks on elements with the class 'option', I want it to sele ...

javascriptcsssassbootstrap-5

Unable to align text in the middle of the header

Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribut ...

htmlcssresponsive-designsemantic-ui

"Enhance your audio experience across all browsers with the revolutionary

I am looking for a way to play an mp3 file endlessly when the user opens my website. I need a lightweight crossbrowser solution that works in all browsers, including IE. Any suggestions? ...

javascriptjqueryhtmlcssmp3