Comments (6)
Hey @theobrasseurbentley
thanks for opening an issue for this.
I am not sure if we can support an improvement on this at the moment.
One way would be to render the editing component inside of a popper that anchors on the top-left corner of the cell.
Let me give this a shot.
from mui-x.
OK, so I did play around with this a bit and it is not possible with the current version. We would need a ref for the Popper to know where to render. We could actually do this when we would pass the cellRef
into the GridRenderEditCellParams
like this:
diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx
index 81a23061e..fb1cf8e9b 100644
--- a/packages/x-data-grid/src/components/cell/GridCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridCell.tsx
@@ -429,6 +429,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
row: updatedRow,
formattedValue,
...editCellStateRest,
+ ref: cellRef,
};
children = column.renderEditCell(params);
that way we would also be able to provide some more flexibility in rendering edit cells.
I am not sure if this might have some performance implications.
Thoughts @cherniavskii or @romgrk ?
from mui-x.
@theobrasseurbentley ... the best way would probably be to assign a minWidth
to the cols that have the date
or dateTime
type.
const columns: GridColDef[] = [
// ...
{
field: 'createdAt',
headerName: 'Created at',
type: 'date',
minWidth: 180,
editable: true,
},
// ...
];
from mui-x.
Hey @theobrasseurbentley ... I did find a solution with Popper that works: Example
Let me know what you think! 👍🏼
from mui-x.
Thank you @michelengelen !
I think these solutions have merit.
Going with the min width for now.
from mui-x.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@theobrasseurbentley: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
from mui-x.
Related Issues (20)
- [data grid] Page Size Options dropdown missing HOT 1
- [pickers] Refactor keyboard support for PageUp and PageDown
- [TreeView] Visually select the ancestors of a selected item HOT 3
- [data grid] Missing translation for key `headerFilterOperatorBetween` HOT 6
- [data grid] Row css class for striped rows HOT 20
- [data grid] Textfield with in renderCell not storing value HOT 7
- [data grid] Format row count numbers in pagination HOT 13
- [pickers] AdapterDateFnsV3: Wrong types generated HOT 1
- [data grid] useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component HOT 3
- [data grid] infinite loop occurs under certain circumstances HOT 10
- New component Barcode & QRCode & scanner HOT 1
- [pickers] DateBuilderReturnType provides wrong type with no arg HOT 3
- [data grid] Add support for async valueOptions callback HOT 1
- [pickers][DateTimePicker] page scrolls when mouse is moved outside of it when using hour/minute picker HOT 3
- [docs] Tree View: check children, uncheck parents HOT 3
- [data grid] Column resizing doesn't work from group HOT 1
- [pickers][Datepicker][AdapterDateFnsV3] unable to set single digit day of month format HOT 4
- [charts] LineChart doesn't draw graph on page load HOT 1
- [charts][LineChart] unwanted horizontal line when rendering 100 data points HOT 4
- [data grid] Improve localization dx for custom filters
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.