Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front?

https://i.stack.imgur.com/m9N0k.png

Below is the code snippet for the DataGrid inside the Modal:

<Modal show={this.state.menu} dialogClassName='modal-width'>
    <div class='modal-content modal inmodal'>
        <Modal.Header>
            <Modal.Title></Modal.Title>
        </Modal.Header>
        <Modal.Body class='modal-body'>
            {HCPTable}
        </Modal.Body>

This is the section of HCP table variable that contains the Data Grid. Various if conditions are used to determine its visibility:

HCPTable = 
    <div class='row' style={{ marginTop: '15px' }}>
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid
                rows={this.state.advancedSearchResults} columns={columns} pageSize={5}
                onRowSelected={(rowSelection) => {
                    this.setState({
                        selectedRow: rowSelection.data,
                        HCPSelected: new Array(String('[' + rowSelection.data.npi + ']'))
                    }, () => {
                        let HCPSelected = new Array(String('[' + rowSelection.data.npi + ']'))
                        console.log(HCPSelected);
                        console.log(typeof(HCPSelected));
                        console.log('state inside DataGrid: ',this.state);
                    })
                }}
            />
        </div>
    </div>

I would like the filter dropdown to appear in front instead of behind. Adjusting the z-index in the mentioned class makes it visible, but I am unsure how to make this change permanent within my application.

Edit:

After some trial and error, I discovered that changing the z-index in the console brings the filter to the front. The specific class where the change was made is linked here:

https://i.stack.imgur.com/MbxfH.png

How can I access this class within my application to ensure the desired visibility at all times?

Edit2:

Shown below is a screenshot depicting the issue I aim to resolve:

https://i.stack.imgur.com/WFzG6.png

javascriptcssreactjsdatagridmaterial-ui

Answer №1

To customize the styling for this class, you can utilize the customization options of a component:


const useStyles() = makeStyles((theme) => ({
    root: {
        z-index: 500,
    }
}))

const yourComponent = () => {
    const classes = useStyles();
    return (
        <DataGrid
            ...
            classes={{
                root: classes.root
            }}
        />
    );
}

If you need to overwrite specific styles, here is a comprehensive list of available classes for the DataGrid component that you can target within your root class: https://material-ui.com/api/data-grid/#css

For instance, if you want the cells to be displayed in red color:

You should include the following code in your root object:


const useStyles() = makeStyles((theme) => ({
    root: {
        z-index: 500,
        '& .MuiDataGrid-cell': {
            color: 'red',
        },
    }
}))

Answer №2

After some trial and error, I managed to solve the issue by making modifications in the App.js file. Firstly, I imported StylesProvider and then added the materialStyles.css file.

   import { StylesProvider } from "@material-ui/core/styles";
   import './materialStyles.css';

    class App extends Component {

    render() {
return (
  <StylesProvider injectFirst>
  <div>
    <Layout />
  </div>
  </StylesProvider>
)
  }
  }

The contents of materialstyless.css are:

    .MuiDataGridMenu-root {
z-index: 3000
    }

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

Having multiple upload forms on a single page with PHP, AJAX, and jQuery is not functioning as expected

I'm on the hunt for a jQuery-AJAX image uploader that supports multiple instances of the form on a single page. Do you have any recommendations? Here's my scenario: I have a front-end page where users can update their profiles. Upon loading the ...

phpjavascriptjqueryajaxfile-upload

Changing opacity of background in Material UI when Drawer is open

Can someone inform me on the steps to adjust the background color and opacity when the Material UI drawer slides open? I have searched the documentation but couldn't find any relevant information. My project is based on React with TypeScript. ...

material-ui

Excess gap detected in dual-column design

Exploring HTML once again, I'm currently working on creating a 2 column layout that doesn't rely on floats in order to maintain the natural document flow. Most solutions I've come across involve floats or tables, which I want to avoid. I als ...

htmlcss

Shade the div if the name of the child element matches the location's hash

I am currently working on an AngularJS web project. My goal is to highlight a specific div when clicking on an anchor link. The structure of the HTML is as follows: <div interaction-list-item="" sfinx-interaction="interaction" class="ng-isolate-scope" ...

javascriptjqueryangularjs

Identifying the color category based on the color code in the props and displaying JSX output

I am in need of a solution to display colors in a table cell. The color codes are stored in mongodb along with their descriptions. I am looking for a library that can determine whether the color code provided is in RGB or hex format, and then render it acc ...

javascriptreactjsmongodb

How can you reset the inner navigation stack in React-Native?

As someone who is new to react-native, I am currently creating an app with a bottom tab navigation. To achieve this, I have utilized the react-navigation-material-bottom-tabs library, which has been working flawlessly so far. My bottom tab navigator includ ...

reactjsreact-nativestack-navigator

Cease the execution within the promise.then block

Embarking on my nodejs journey has been an exciting experience. While I have a background in other programming languages, the concept of promises is new to me. In my nodejs environment, I am using expressjs + sequelize. I'm currently working on setti ...

javascriptnode.jsexpresssequelize.js

The hyperlink to a different webpage does not trigger any JavaScript functionalities or render any CSS styles

I am facing an issue with linking HTML pages that run Javascript and JQuery Mobile from another HTML page. My link setup is as follows: <a href="hours.html">Hours</a> The linking page and the linked pages are in the same directory. However, ...

javascripthtmlcsshyperlink

Access and retrieve data from a string using XPath with JavaScript

My HTML page content is stored as a string shown below: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </ ...

javascripthtmlxpath

Using Vue to Bring in External JavaScript Files

If I have 2 JavaScript files located in the 'resources/assets/js' directory, named 'app.js' and 'ext_app.js', what could be the issue? Within 'ext_app.js' file, there is a function defined like this: function testF ...

javascriptvue.js

What is the best way to extract data from a proxy in VUE3?

Currently, I am utilizing the ref() function to store data retrieved from Firebase. However, when attempting to filter and retrieve a single record, the outcome is not as expected. Instead of returning a single object, something different is being displaye ...

javascripttypescriptvue.jsvuejs3vite

Photo captured by camera is not stored in photo gallery

I am currently working on a basic image upload form that allows users to take photos using their phone camera and upload them. However, I have noticed that the pictures taken this way are not being saved to the gallery. Is there something missing in the H ...

javascriptangularhtmlandroid-cameramedia

Typescript HashMap implementation with Lists as values

Currently delving into TypeScript, I am attempting to generate a collection in a manner akin to the following Java example: HashMap<String, List<String>> hashMap = new HashMap<String,List<String>>(); Struggling to locate any releva ...

javascriptangulartypescript

Utilize React-router to display child components on the webpage

Recently, I've encountered some challenges with this code. I have a component that takes in a child as a prop, which is meant to serve as the foundation for all the pages I am hosting. Base.jsx : import React from 'react'; import PropTypes ...

javascriptreactjsreact-router

Simple methods for ensuring a minimum time interval between observable emittance

My RxJS observable is set to emit values at random intervals ranging from 0 to 1000ms. Is there a way to confirm that there is always a minimum gap of 200ms between each emission without skipping or dropping any values, while ensuring they are emitted in ...

javascripttypescriptrxjs

What steps do I need to take to successfully integrate Font Awesome 5 with React?

Here is an interesting scenario: the initial icon is displayed, but it fails to update when the class changes. const Circle = ({ filled, onClick }) => { const className = filled ? 'fas fa-circle' : 'far fa-circle'; return ( ...

javascriptreactjsfont-awesomefont-awesome-5

Error Message: Unexpected Type Error with axios in Vue 3

Trying to implement axios in my Vue3 project for fetching APIs. Here is the code snippet from my component: export default { name: "Step2", data() { return { loading: true; }; }, mounted() { this.loading = false; }, ...

javascriptvue.jsnpmaxios

Replace the default Material UI 5.0 typography theme with custom fonts on a global scale

My current challenge involves incorporating two personal fonts into the Material UI 5.0. My goal is to apply these fonts globally by overriding the theme settings. However, I have encountered issues with loading the fonts properly and modifying the typogra ...

reactjstypescriptmaterial-ui

Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript? I've attempted to override a CSS class of the embed iframe, but have not had any luck. Here is the URL to YouTube's stylesheet: ...

javascriptcssangulartypescriptangular5

Trouble with getting Tailwind CSS animations to function properly in ReactJs/NextJs

Recently, I delved into learning Tailwind and Nextjs by following a tutorial step by step. One interesting thing I encountered was trying to implement a bounce animation on an icon when it's hovered over. Surprisingly, it worked perfectly the first ti ...

reactjsnext.jstailwind-css