From 8ffafee9229d817735462891d9d5ec4ab35542fd Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 16 Apr 2024 05:45:16 -0400 Subject: [PATCH] [docs] Add grid cell display example to the migration guide (#12793) --- .../migration-data-grid-v6.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 6f52bc1d05abd..cdfd95277d1f5 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/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 }) => ( +
+ {value} +
+ ), + }, + ``` + - 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.