[docs] Add grid cell display example to the migration guide (#12793)

docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

@@ -510,7 +510,20 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
 - The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed.
 - The `.MuiDataGrid-cell--withRenderer` class has been removed.
 - The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior.
-  NOTE: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis;`.
+
+  **NOTE**: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis`.
+
+  ```tsx
+  {
+    display: 'flex',
+    renderCell: ({ value }) => (
+      <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        {value}
+      </div>
+    ),
+  },
+  ```
+
 - The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
 - The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
 - The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.