Search code examples
javascriptcssreactjsdatagridmaterial-ui

Filter functionality of Material UI Datagrid not working correctly

I'm using Material UI Data Grid to show a table. By default, it's showing an additional filter for every column for sorting purposes. However, when I click on the filter, it's going behind my Bootstrap Modal. Is there a way to fix it? Here's how it looks when I click on the ID filter (the three vertical dots).

enter image description here

Here's the code for the DataGrid which is inside my Modal. Removed the html inside header, title, etc which is irrelevant. The return statement looks like this:

  <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>

And this is the HCP table variable inside the render which contains the Data Grid. I'm using a few if conditions to show it which aren't important so haven't included them.

   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 + "]" + rowSelection.data.first_name))
                            }, ()=> {
                                let HCPSelected = new Array(String('[' + rowSelection.data.npi + "]" + rowSelection.data.first_name))
                                console.log(HCPSelected);
                                console.log(typeof(HCPSelected));
                                console.log('state inside DataGrid: ',this.state);
                            })}}
                        />
                    </div>
                </div>

I want the filter dropdown to come in front instead of it going behind. I know it should be a small css change but don't know where to make it.

Edit:

So I found that changing the z-index in the console is enabling it to come in the front. I change the z-index in this class:

enter image description here

But how to access that class inside my application to make it a permanent change.

Edit2:

Here's a screenshot of what I want to change:

enter image description here

Solution

  • You can apply styles to this classs through the customization points of a comoponent:

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

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

    So if you want to override some other stuff, here is a list of available classes for the DataGrid component, which you can then target inside your root class: https://material-ui.com/api/data-grid/#css

    Example: You want your cells to be red

    Then you would add the following code to your root object:

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