enter image description here
I need to remove this extra feature from data grid Mui. I've tried the root way also. But it's not working for me.
disableColumnMenu prop passed to DataGrid component will hide column menu icon (3 dots):
<DataGrid
disableColumnMenu
{...other props}
/>
Related
I created a data grid using MUI exact demo code and noticed that the "Go to next/previous page" buttons in the footer are laid out vertically rather than horizontally as seen below:
Any idea how can I fix this?
I don't think it is an MUI issue. My guess is that you are overriding all button styles in a global css file, causing the page navigation buttons in MUI DataGrid to be distorted.
I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
I have a custom component for my ag-grid header, of a clickable icon that opens a menu. This menu opens, but most of it appears behind the rows below the header. I know there is a solution for a custom cell that has a popup menu, where you add "overflow: visible" to the cell, and adjust z-indexes for the cell and the other cells. I tried that with the header cells but it still is not working. I couldn't find a similar question asked anywhere else. Does anyone know how to fix this?
This is what it looks like
Here is my AgGridColumn:
<AgGridColumn headerComponentFramework={(params) => renderKebabMenuHeader(params)} minWidth={160} headerName="" field="id" cellRenderer="kebabMenuRenderer" cellClass="kebab-menu-cell cell-vertical-align-text-right" headerClass="kebab-menu-cell cell-vertical-align-text-right"/>
renderKebabMenuHeader() simply returns a JSX element of my menu.
I ended up not using the ag-grid header at all for this. Instead I made a div with position: absolute instead
I'm working with Material UI to create the UI for the web application I'm designing. After placing some TextFields within a Grid using theme spacing, I'm having troubles with the inner text of the the TextField no longer being centered within its container. As soon as I remove the theme spacing from the style applied to the TextField, there's no problem anymore.
Here's a codesandbox that showcases the problem: https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js
Does anyone know how to recenter the text within its TextField? Thanks.
Try Moving the textInput class to Grid instead of TextField.
<Grid item xs={6} className={classes.textInput}>
<TextField
id="project-client"
label="Client"
variant="outlined"
/>
</Grid>
If you inspect and see the HTML, it seems that Material-UI doesn't apply that class to the label but only to the input. Moving the class at grid level should apply it to the entire container (label and input)
Here is a basic grid in CodeSandbox. When I define my columns object, for one of the columns I pass in the property headerRenderer as a simple React Component showing some text and a red background. I made the height 100 on this component so it would expand the header cell. That did not work.
I went into Chrome dev tools and tried changing a bunch of css properties on various parent elements, but to no avail: the displayed height of the header is always 35px.
Notice in the link I also defined override.css which is specifically defining the height of the .react-grid-HeaderCell class.
What am I missing that the height of this Header won't budge?
The prop name headerRowHeight can bed used to set height for the header cell.
In your example, it will be as
<ReactDataGrid
columns={columns}
rowGetter={i => this.state.rows[i]}
rowsCount={3}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect={true}
headerRowHeight={50}
/>