diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js
index 1fcd8431c..5d2aa48e3 100644
--- a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js
@@ -5,9 +5,10 @@ import { InputGroupButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
import classnames from 'classnames'
import { useArrayContext } from '../../../../../Form/array'
-import { ButtonCell } from '../../../../../Form/table'
+import { ButtonCell, DefaultHeader } from '../../../../../Form/table'
import Icon from '../../../../../Icon'
import { FastField, useField } from 'formik'
+import { range } from 'lodash'
const CellTypeDropdown = ({ name, index, actions, disabled=false }) => {
const [field, , helpers] = useField(name)
@@ -100,32 +101,34 @@ export const HeaderCell = ({ index, actions }) =>
/>
-export default ({ name, columns }) => {
+export default ({ columns }) => {
const { addColumn, fillColumn, clearColumn, deleteColumn } = useArrayContext()
return (
-
-
- |
- { Array(columns).fill(null).map((_, i) =>
-
-
- |
- ) }
- addColumn('', { name: '', type: 'string' }) }
- disabled={ columns >= 12 }
- />
-
-
+
+
+
+ |
+ { range(columns).map((_, i) =>
+
+
+ |
+ ) }
+ addColumn('', { name: '', type: 'string' }) }
+ disabled={ columns >= 12 }
+ />
+
+
+
)
}
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 5ab79cf25..2138724a0 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
@@ -2,26 +2,26 @@ import React, { Fragment } from 'react'
import { FastField, useFormikContext } from 'formik'
import classnames from 'classnames'
+import { range } from 'lodash'
+import { Table, DefaultRow } from '../../../../../Form/table'
import Header from './header'
import Footer from './footer'
-import { Table, DefaultRow } from '../../../../../Form/table'
import './style.css'
-const Row = ({ index: rowIndex, name, data, arrayHelpers }) =>
+const Row = ({ index: rowIndex, name, columns, arrayHelpers }) =>
- { data.map(
- (_, columnIndex) =>
-
-
- |
+ { range(columns).map(columnIndex =>
+
+
+ |
) }
@@ -32,8 +32,8 @@ export default () => {
return useContext(ArrayContext)
export const FormArray = ({
name, item: Item,
- header: Header, footer: Footer,
- wrapper: Wrapper=Fragment,
- wrapperProps,
+ header: Header,
+ footer: Footer,
+ wrapper: Wrapper=Fragment, wrapperProps,
bodyWrapper: BodyWrapper=Fragment,
+ globalProps={},
defaultItem={},
}) => {
const { values, setFieldValue, setValues } = useFormikContext()
@@ -110,7 +111,7 @@ export const FormArray = ({
setValues={ setValues }
setFieldValue={ setFieldValue }
>
- { Header && }
+ { Header && }
{
(rows || []).map(
@@ -122,11 +123,12 @@ export const FormArray = ({
isLastItem={ index === rows.length - 1 }
data={ data }
arrayHelpers={ arrayHelpers }
+ { ...globalProps }
/>
)
}
- { Footer &&