Modifying the default hover color of a specific row in AgGridReact

How can I eliminate the row color changing behavior in AgGrid tables when a row is selected and hovered over using React? Currently, a default dark gray color is applied when I hover over certain elements of a selected row, which is not desired in my implementation.

The code in question is a combination of React, CSS, and Material design.

I'm unsure whether I should make modifications directly to my code or if changes need to be made in the gridoptions of the AgGrid table.

Thank you in advance for any guidance provided.

.ag-theme-material .ag-root-wrapper {
    border-radius: 20px;
}

.ag-theme-material .ag-cell:hover {
    background-color: #F3F9FB !important; 
}

.ag-theme-material .ag-row-selected::before {
    background-color: #E4F3F7 !important;
}

/* .ag-theme-material .ag-row-selected .ag-cell {
    background-color: #F3F9FB !important;
} */

.ag-theme-material .ag-header-cell:hover {
    background-color: #BDDAE2 !important;
}

.ag-row-hover .ag-row-selected::before {
    background-color: #BDDAE2 !important;
}

I've attempted to adjust the CSS of the AgGrid and explore the GridOptions without success.

cssreactjsmaterial-uiag-gridag-grid-react

Answer №1

Although I have yet to try AgGrid, their documentation provides some interesting insights:

// Disables row hover, which is enabled by default
const suppressRowHoverHighlight = true;
// Enables column hover, which is disabled by default
const columnHoverHighlight = true;

<AgGridReact
    suppressRowHoverHighlight={suppressRowHoverHighlight}
    columnHoverHighlight={columnHoverHighlight}
/>

https://www.ag-grid.com/react-data-grid/row-styles/#highlighting-rows-and-columns

Happy to help!

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 XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework

Converting PNG files to PDF format in Node.js using pdfkit library [with code example]

I'm currently working on server-side coding and I need to convert a file's extension to PDF before saving it in S3. Any advice or suggestions would be greatly appreciated. Please note that I am new to this area, so I apologize if my question is n ...

node.jsreactjsreact-nativenodejs-stream

Error: Could not locate an element containing the specified text: /discover react/i

✕ issue with rendering learn react link (36 ms) ● unable to render learn react link TestingLibraryElementError: The element containing the text /learn react/i could not be found. This may be due to the text being split up across multiple elements. Con ...

reactjsgithub-actionsgithub-pages

Utilizing identical elements on a single page can lead to glitches within Next.js

Update: A codesandbox has been created to demonstrate the issue. There are 3 components that allow file uploads, but the first component always gets updated regardless of which one is chosen. Check out the codesandbox here The latest version of Next.js is ...

reactjsnext.js

Implementing a 12-month display using material-ui components

Just starting out with ReactJs, TypeScript, and material-ui. Looking to display something similar to this design: https://i.stack.imgur.com/zIgUH.png Wondering if it's achievable with material-ui. If not, any suggestions for alternatives? Appreciate ...

typescriptreactjsmaterial-ui

Difficulty installing yarn for repositories using git+https on Jenkins leads to issues

I'm currently setting up my project on Jenkins to trigger an automatic build for every commit. However, I'm encountering an issue when trying to run yarn install using a NodeJS script in Jenkins. It fails to install the dependencies that are bein ...

node.jsreactjsjenkinsnpmyarnpkg

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

1# I need assistance in changing the CSS properties of a TD, Class, and div using a selector that specifies a specific number range. Specifically, I am looking to modify the css of torrent results with a seed count between 250-25000. Any torrents with a se ...

javascriptjquerycssselector

I developed a Node.js Express server that establishes a connection to a MongoDB database hosted on mLab. I am now looking to integrate CRUD operations with this server from my React application. Can anyone

I built one nodejs app that uses express routing to connect to a mongodb on mlab that listens on a local port. I built a React app with nodejs that is listening on another port. How can I have the React app read and write documents to the database? Any tu ...

node.jsreactjsmongodb

What is the best way to align my progress bar to the bottom of a button?

I've encountered a small issue that I'm struggling to resolve. My goal is to create a button with a Bootstrap progress bar at the bottom, but I can't seem to make it work as intended. Here's the current setup: https://jsfiddle.net/bob ...

htmlcssbootstrap-4vertical-alignment

Connect the CSS file in React index.html to the Flask backend

I am attempting to connect a CSS template that is serving static backend content through Flask with my React frontend. Here is the structure I am working with: client/ src/ components/ menu.jsx public/ ...

cssreactjsflask

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

htmlcssimage-scalingimage-extraction

JS causes the navigator to malfunction

UPDATE: Greetings! I have developed a navigation bar that loads various pages into a specific div. Here is the source code for the navigation bar: <div id="navBar"> <ul> <li><a href="#" onClick="document.getElementById('bott ...

javascripthtmlmysqlcss

Put a pause on CSS3 animations

I have created a unique CSS3 menu item and I am looking to showcase the articles item in a special way: By clicking on the 4th item, it should display the first one, followed by the second one, then the third with a slight delay of 0.5 seconds between them ...

jquerycsscss-transitions

Eliminating memory leaks in a React web application

I'm facing an issue in my ReactJS web application with the following code: useEffect(() => { const fetchInfo = async () => { const res = await fetch(`${api}&page=${page}`); setLoading(true); try { const x = awa ...

javascriptreactjsmemory-leaks

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

React-Select is experiencing issues when the options are missing labels or values

I am encountering an issue with react-select as it is not functioning properly for me. The options I am fetching from an API do not include the required value and label properties. Is there a way to work around this using my existing JSON Array? const awar ...

reactjsselectreact-select

How can I make columns with a max-width expand fluidly?

I am currently using a fluid/responsive column layout that looks like this: .row{ float:left; max-width:960px; width:100%; } .column{ float:left; margin:0 15px; } .column:first-child{ margin-left:0; } .column:last-child{ mar ...

htmlcssgridfluid-layout

Drawing graphics on an HTML5 Canvas with the power of React Native

How should html5 canvas be utilized in react native? Is it necessary to utilize webview, a plugin, or can plain html canvas be used in react native code? Appreciate your help! ...

javascriptreactjsmobilereact-native

Leverage the power of conditional fetching with useSWR in combination with the versatile React-

Attempting to integrate YouTube comments into an infinite loading component (using an npm package for it). The issue arises because the infinite load component is a child of the parent Accordion component (from react-bootstrap), and my objective is to fet ...

reactjsnext.jsreact-bootstrapinfinite-scrollswr

Issue with activating a Modal through a button inside a table row on React

I'm currently working on two files: Modal.js and Users.js. Users.js features a table with an API get query linked to it, and in the last column of the table, there's a dropdown for each row that contains three buttons: View, Edit, and Delete. My ...

javascriptreactjscore-ui