[docs] Render a button over a custom emoji

mui · Oct 4, 2020 · 7349fc3 · 7349fc3
1 parent cedd986
commit 7349fc3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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>
     ),
   },