[EuiDataGrid] Automatic column schema detection

src-docs/src/views/datagrid/datagrid.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, useEffect } from 'react';
 import { fake } from 'faker';
 
 import {
@@ -124,10 +124,25 @@ export default class DataGridContainer extends Component {
 
     return (
       <EuiDataGrid
-        aria-label="Top EUI contributors"
+        aria-label="Data grid demo"
         columns={columns}
         rowCount={data.length}
-        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        renderCellValue={({ rowIndex, columnId, setCellProps }) => {
+          useEffect(() => {
+            if (columnId === 'amount') {
+              const numeric = parseFloat(
+                data[rowIndex][columnId].match(/\d+\.\d+/)[0],
+                10
+              );
+              setCellProps({
+                style: {
+                  backgroundColor: `rgba(0, ${(numeric / 1000) * 255}, 0, 0.2)`,
+                },
+              });
+            }
+          }, [rowIndex, columnId, setCellProps]);
+          return data[rowIndex][columnId];
+        }}
         sorting={{ columns: sortingColumns, onSort: this.setSorting }}
         pagination={{
           ...pagination,

src-docs/src/views/datagrid/datagrid_example.js

@@ -17,9 +17,13 @@ import DataGridStyling from './styling';
 const dataGridStylingSource = require('!!raw-loader!./styling');
 const dataGridStylingHtml = renderToHtml(DataGridStyling);
 
+import DataGridSchema from './schema';
+const dataGridSchemaSource = require('!!raw-loader!./schema');
+const dataGridSchemaHtml = renderToHtml(DataGridSchema);
+
 import InMemoryDataGrid from './in_memory';
 const inMemoryDataGridSource = require('!!raw-loader!./in_memory');
-const inMemoryDataGridHtml = renderToHtml(DataGridStyling);
+const inMemoryDataGridHtml = renderToHtml(InMemoryDataGrid);
 
 export const DataGridExample = {
   title: 'Data grid',
@@ -88,6 +92,24 @@ export const DataGridExample = {
       demo: <DataGridStyling />,
       props: { EuiDataGrid },
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridSchemaSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridSchemaHtml,
+        },
+      ],
+      title: 'Schema',
+      text: (
+        <p>Column type information can be included on the column definition.</p>
+      ),
+      components: { DataGridSchema },
+      demo: <DataGridSchema />,
+    },
     {
       source: [
         {