[data grid] Custom Columns: How to improve usability of the Date Picker in a narrow column

[theobrasseurbentley]

The problem in depth

Using the demo: https://mui.com/x/react-data-grid/custom-columns/#date-pickers

1. Make the date column resizable: true
2. Shrink the column until the date is only partially visible
3. Edit the date

It is hard to enter a date in full. How to make it easier?
The normal edit cell behaves better.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Custom Columns DatePicker
Order ID: 82553

[michelengelen]

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.

[michelengelen]

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 ?

[michelengelen]

@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,
  },
  // ...
];

[michelengelen]

Hey @theobrasseurbentley ... I did find a solution with Popper that works: Example

Let me know what you think! 👍🏼

[theobrasseurbentley]

Thank you @michelengelen !
I think these solutions have merit.
Going with the min width for now.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
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.