[DataGrid] Allow for truncated and multiline content in grid cells

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -294,6 +294,7 @@
       "cell--textRight",
       "cell--withRenderer",
       "cell",
+      "cellContent",
       "cellCheckbox",
       "checkboxInput",
       "columnHeader--alignCenter",

docs/pages/api-docs/data-grid/data-grid.json

@@ -236,6 +236,7 @@
       "cell--textRight",
       "cell--withRenderer",
       "cell",
+      "cellContent",
       "cellCheckbox",
       "checkboxInput",
       "columnHeader--alignCenter",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -294,6 +294,7 @@
       "cell--textRight",
       "cell--withRenderer",
       "cell",
+      "cellContent",
       "cellCheckbox",
       "checkboxInput",
       "columnHeader--alignCenter",

docs/pages/x/api/data-grid/data-grid.json

@@ -236,6 +236,7 @@
       "cell--textRight",
       "cell--withRenderer",
       "cell",
+      "cellContent",
       "cellCheckbox",
       "checkboxInput",
       "columnHeader--alignCenter",

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -166,6 +166,10 @@
       "conditions": "the cell has a custom renderer"
     },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "cellContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the element that wraps the cell content"
+    },
     "cellCheckbox": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -166,6 +166,10 @@
       "conditions": "the cell has a custom renderer"
     },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "cellContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the element that wraps the cell content"
+    },
     "cellCheckbox": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -166,6 +166,10 @@
       "conditions": "the cell has a custom renderer"
     },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "cellContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the element that wraps the cell content"
+    },
     "cellCheckbox": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"

docs/translations/api-docs/data-grid/data-grid-pt.json

@@ -135,6 +135,10 @@
       "conditions": "the cell has a custom renderer"
     },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "cellContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the element that wraps the cell content"
+    },
     "cellCheckbox": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"

docs/translations/api-docs/data-grid/data-grid-zh.json

@@ -135,6 +135,10 @@
       "conditions": "the cell has a custom renderer"
     },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "cellContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the element that wraps the cell content"
+    },
     "cellCheckbox": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"

docs/translations/api-docs/data-grid/data-grid.json

@@ -135,6 +135,10 @@
       "conditions": "the cell has a custom renderer"
     },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "cellContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the element that wraps the cell content"
+    },
     "cellCheckbox": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"

packages/grid/_modules_/grid/components/cell/GridCell.tsx

@@ -73,6 +73,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       isEditable && 'cell--editable',
       showRightBorder && 'withBorder',
     ],
+    content: ['cellContent'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -227,7 +228,11 @@ function GridCell(props: GridCellProps) {
       {...other}
       onFocus={handleFocus}
     >
-      {children != null ? children : valueToRender?.toString()}
+      {children != null ? (
+        children
+      ) : (
+        <div className={classes.content}>{valueToRender?.toString()}</div>
+      )}
     </div>
   );
 }

packages/grid/_modules_/grid/components/containers/GridRootStyles.ts

@@ -15,6 +15,7 @@ export const GridRootStyles = styled('div', {
     // TODO: v6 - remove
     { [`& .${gridClasses['cell--withRenderer']}`]: styles['cell--withRenderer'] },
     { [`& .${gridClasses.cell}`]: styles.cell },
+    { [`& .${gridClasses.cellContent}`]: styles.cellContent },
     { [`& .${gridClasses.cellCheckbox}`]: styles.cellCheckbox },
     { [`& .${gridClasses.checkboxInput}`]: styles.checkboxInput },
     { [`& .${gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter'] },
@@ -226,10 +227,13 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses.cell}`]: {
       display: 'flex',
       alignItems: 'center',
+      overflow: 'hidden',
+      borderBottom: `1px solid ${borderColor}`,
+    },
+    [`& .${gridClasses.cellContent}`]: {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      borderBottom: `1px solid ${borderColor}`,
     },
     [`& .${gridClasses.cell}.${gridClasses['cell--editing']}`]: {
       padding: 1,

packages/grid/_modules_/grid/gridClasses.ts

@@ -37,6 +37,10 @@ export interface GridClasses {
    * Styles applied to the cell element.
    */
   cell: string;
+  /**
+   * Styles applied to the element that wraps the cell content.
+   */
+  cellContent: string;
   /**
    * Styles applied to the cell checkbox element.
    */
@@ -373,6 +377,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [
   'cell--textRight',
   'cell--withRenderer',
   'cell',
+  'cellContent',
   'cellCheckbox',
   'checkboxInput',
   'columnHeader--alignCenter',

packages/storybook/src/stories/grid-style.stories.tsx

@@ -177,3 +177,43 @@ export const ColumnCellRendererWithPadding = () => {
     </div>
   );
 };
+export const TruncatedCellTextSnap = () => {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGridPro
+        columns={[{ field: 'text' }]}
+        rows={[
+          {
+            id: 1,
+            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a accumsan lacus. Etiam faucibus fermentum ipsum. Integer bibendum diam quis est sagittis laoreet. Pellentesque finibus lacus vitae erat aliquet dignissim.',
+          },
+        ]}
+      />
+    </div>
+  );
+};
+export const MultilineCustomCellContentSnap = () => {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGridPro
+        columns={[
+          {
+            field: 'name',
+            renderCell: (params) => (
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <span>{params.value}</span>
+                <span>{params.value}</span>
+              </div>
+            ),
+          },
+        ]}
+        rows={[
+          {
+            id: 1,
+            name: 'MUI',
+          },
+        ]}
+      />
+    </div>
+  );
+};