diff --git a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js
index 2b60ce56b392f..32ed01d22cdd1 100644
--- a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js
@@ -1,16 +1,23 @@
 import * as React from 'react';
+import Button from '@material-ui/core/Button';
 import { DataGrid } from '@material-ui/data-grid';
 
 const columns = [
   {
     field: 'date',
     headerName: 'Year',
+    width: 150,
     renderCell: (params) => (
       <strong>
-        {params.value.getFullYear()}{' '}
-        <span role="img" aria-label="birthday">
-          🎂
-        </span>
+        {params.value.getFullYear()}
+        <Button
+          variant="contained"
+          color="primary"
+          size="small"
+          style={{ marginLeft: 16 }}
+        >
+          Open
+        </Button>
       </strong>
     ),
   },
diff --git a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx
index 85822528d101c..f86fb12a04f38 100644
--- a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx
@@ -1,16 +1,23 @@
 import * as React from 'react';
+import Button from '@material-ui/core/Button';
 import { DataGrid, ColDef, ValueFormatterParams } from '@material-ui/data-grid';
 
 const columns: ColDef[] = [
   {
     field: 'date',
     headerName: 'Year',
+    width: 150,
     renderCell: (params: ValueFormatterParams) => (
       <strong>
-        {(params.value as Date).getFullYear()}{' '}
-        <span role="img" aria-label="birthday">
-          🎂
-        </span>
+        {(params.value as Date).getFullYear()}
+        <Button
+          variant="contained"
+          color="primary"
+          size="small"
+          style={{ marginLeft: 16 }}
+        >
+          Open
+        </Button>
       </strong>
     ),
   },
diff --git a/docs/src/pages/components/data-grid/rendering/rendering.md b/docs/src/pages/components/data-grid/rendering/rendering.md
index 65af84e4cbaf3..7757480557346 100644
--- a/docs/src/pages/components/data-grid/rendering/rendering.md
+++ b/docs/src/pages/components/data-grid/rendering/rendering.md
@@ -84,10 +84,15 @@ const columns: ColDef[] = [
     headerName: 'Year',
     renderCell: (params: ValueFormatterParams) => (
       <strong>
-        {(params.value as Date).getFullYear()}{' '}
-        <span role="img" aria-label="birthday">
-          🎂
-        </span>
+        {(params.value as Date).getFullYear()}
+        <Button
+          variant="contained"
+          color="primary"
+          size="small"
+          style={{ marginLeft: 16 }}
+        >
+          Open
+        </Button>
       </strong>
     ),
   },