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

What are the steps to access ember paper icons without an internet connection?

I'm currently working on a web module using Ember Paper that I need to be able to use offline. However, when in offline mode, the Ember Paper icons are not displaying and only text is visible. Can someone assist me in making Ember Paper work properly ...

ember.jsmaterial-uiember-paper

Is there a way to effortlessly generate a mini-website from Markdown files?

Can a tool be found that creates a mini-website from locally-stored Markdown files complete with automatically generated navigation? I'm hoping for a service that can sync with my Dropbox, analyze the file structure, read the Markdown files, and effo ...

cssmarkdowndropboxwikijekyll

What is the best way to create a vertical connector line between Material UI icons in a list of list items?

How can I add a vertical connector line between avatar images in a React Material UI list item icons? Please see the sandbox URL for reference: https://codesandbox.io/s/9z2x527y6r [Please refer to the attached image below for an example of the desired ve ...

reactjsmaterial-ui

Encountering an error when attempting to assign a value within the onChange callback of a React dropdown component

I have implemented a Dropdown component using react-dropdown to show a list of options. I am facing an issue where, upon selecting an option from the list for the first time, the value changes successfully. However, upon selecting a second option, it thr ...

reactjsdropdownonchange

Issue encountered: React build fails to load without including index.html in URL during deployment on AWS S3 and Cloudfront

Currently, I am working on a React JS application that utilizes Hash Routing. Everything works perfectly fine in the local environment. For example, when I try to access , the URL does not work as expected. Instead, I have to use for it to function corre ...

reactjsamazon-s3amazon-cloudfront

Securing API endpoints in a React/Redux application using proxy techniques

Ensuring the security of my react/redux application is a top priority for me. I've noticed that my api url is exposed to the public inside the bundled app.js file, which raises some concerns. After doing some research, I discovered that some developer ...

javascriptnode.jsexpressreactjsredux

Error Message: Unable to access 'map' property of undefined in TSX file

Component for displaying attendees in an activity interface IProps { attendees: IAttendee[] } export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => { return ( <List horizontal> {attendees.ma ...

reactjstypescriptasp.net-core-webapireact-tsx

The self-made <Tab/> element is not functioning properly with the ".Mui-selected" class

I have customized a <Tab/> element and I want to change its selected color using Sandbox demo code export const Tab = styled(MuiTab)({ "&.Mui-selected": { color: "red" } }); However, I've noticed that: 1. Apply ...

javascriptreactjsmaterial-ui

help with coding in html and css

Hey there, I’m currently working on creating a loading page for my website, but I seem to be facing an issue with a white line appearing along the top and one running down the left side. If anyone could provide me with some assistance on this matter, I ...

htmlcss

Issue with Moment.js incorrectly formatting date fields to a day prior to the expected date

Currently, I am attempting to resolve a small issue in my code related to a tiny bug. In my React component, I have set an initial state as follows: const initialFormData = Object.freeze({ date: Moment(new Date()).format('YYYY-MM-DD'), pr ...

javascriptreactjsmaterial-uimomentjs

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9

After creating a CSS3 gradient using ColorZilla, I noticed an issue with the DATA URI that seems to be causing problems. Check out my fiddle link here: http://jsfiddle.net/cY7Lp/. In WebKit & Firefox browsers, the rounded corners display correctly. Ho ...

internet-explorer-9gradientcss

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: Th ...

htmltwitter-bootstrapcss

Unleashing the power of creativity: Crafting distinctive keys for React elements

I have been working on a React application that enables users to create and save lists. However, I am encountering a warning from React stating that my elements (List/ListForm) do not have a unique key prop. How can I generate a unique key prop for user-ge ...

reactjs

Issue with retaining entered text in SearchBar results while using React.js

I am encountering some issues with my searchBar.jsx file Currently, when I type a word into the SearchBar, it displays the relevant search results correctly. However, if I delete the entered text, the displayed results revert to their original state. My g ...

reactjssearchbar

Issue encountered when attempting to locate the file path within the getStaticProps function of an internal page in Next Js

I'm currently implementing a multi-language feature on my Next JS app. Below is the folder structure of my project. https://i.stack.imgur.com/5tD2G.png On the Home page (index page), I successfully retrieved the locales module using getStaticProps: ...

javascriptreactjsnext.jsreact-intl

Getting data from an API with authorization in Next.js using axios - a step-by-step guide

click here to view the image user = Cookies.get("user") I'm having trouble accessing this pathway. I stored user data, including the token, using cookies. Please assist me with this issue. ...

javascriptreactjsnext.jsauthorizationserver-side-rendering

What is the functionality of the Material-UI theme light and dark mode feature?

I am having trouble understanding how the light/dark feature in this theme operates. I have noticed that changing the main color affects the components, but adjusting the light/dark value in type does not seem to have any effect. const customizedTheme = ...

reactjsmaterial-ui

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

cssangular

When the action "X" was executed, reducer "Y" resulted in an undefined value

I'm encountering an issue with Redux in React. Despite searching through related questions, I haven't found a solution that fits my specific case. Here are the files involved: Index.JS import snackbarContentReducer from '../src/shared/red ...

javascriptreactjsredux

Issue encountered when updating npm to version 5.4.2: Unable to locate modules in ./node_modules/react-router-dom

When attempting to update my npm version from 3.10.10 to 5.4.2 and migrate react from 15.3.0 to 16.0, I deleted the node_modules folder and re-ran npm install. However, upon trying to run my application again, I encountered the following error: ERROR in ./ ...

javascriptnode.jsnpmmaterial-uireact-router-dom