Improvise. Adapter. Overcome.

src/index.tsx

@@ -5,9 +5,12 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
 import Grid from 'web/visualizations/components/Grid';
-import { context } from './example_data';
+import { config, queryResponse } from './example_data';
+import { gridAdapter } from 'web/visualizations/components/Grid/adapters/grid_adapter';
 
-ReactDOM.render(<Grid options={context} />, document.getElementById('root'));
+const adapter = gridAdapter(config, queryResponse)
+
+ReactDOM.render(<Grid {...adapter} />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/web/visualizations/components/Grid/Grid.tsx

@@ -27,7 +27,7 @@ const GRID_LICENSE_KEY = 'Looker_Looker_4Devs_3000Deployment_24_April_2020__MTU4
 
 USSEnterprise.setLicenseKey(GRID_LICENSE_KEY)
 
-interface GridProps {
+export interface GridProps {
   options: GridContext
   trackRenderPerformance?: () => void
   firstDataRendered?: () => void

src/web/visualizations/components/Grid/adapters/grid_adapter.ts

@@ -0,0 +1,19 @@
+import { QueryResponse } from 'web/visualizations/types/query_response'
+import { VisConfig } from 'web/visualizations/types/vis_config'
+import { preprocessQueryResponse } from 'web/visualizations/components/Grid/utils/query_utils'
+import { gridMapper } from '../mappers/grid_mapper'
+import '../styles/grid_themes.scss'
+import { GridProps } from '../Grid'
+
+export const gridAdapter = (config: VisConfig, result: QueryResponse) => {
+  const processedResult = preprocessQueryResponse(result, config)
+  if (!processedResult) return {} as GridProps
+
+  const visTriggerCb = () => null
+  const done = () => null
+  const gridOptions = gridMapper(processedResult, config, visTriggerCb, done)
+
+  return {
+    options: gridOptions,
+  } as GridProps
+}