From 8e3fd6e665bbb462c7724f4dc1be6c567cd248e9 Mon Sep 17 00:00:00 2001
From: Felix Henninger <mailbox@felixhenninger.com>
Date: Sun, 9 Aug 2020 18:49:51 +0200
Subject: [PATCH] Enable grid cells

---
 .../components/Content/Loop/Grid/index.js     | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
index 8dc311e6e..0db634406 100644
--- a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
@@ -1,3 +1,33 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 
-export default () => <p>Foo bar</p>
+import { FastField, useFormikContext } from 'formik'
+
+import { Table, DefaultRow } from '../../../../../Form/table'
+
+const Row = ({ index: rowIndex, name, data, arrayHelpers }) =>
+  <DefaultRow
+    index={ rowIndex } arrayHelpers={ arrayHelpers }
+    wrapper={ Fragment }
+  >
+    { data.map(
+      (_, columnIndex) =>
+        <td key={ `${ name }[${ columnIndex }]` }>
+          <FastField
+            name={ `${ name }[${ columnIndex }]` }
+            className="form-control text-monospace"
+          />
+        </td>
+    ) }
+  </DefaultRow>
+
+export default () => {
+  const { values } = useFormikContext()
+  const { templateParameters } = values
+
+  return <Table
+    name="templateParameters.rows"
+    row={ Row }
+    columns={ templateParameters.columns.length }
+    className="border-top-0"
+  />
+}