diff --git a/packages/builder/src/components/Form/array.js b/packages/builder/src/components/Form/array.js
new file mode 100644
index 000000000..5ea62acfc
--- /dev/null
+++ b/packages/builder/src/components/Form/array.js
@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react'
+
+import { FieldArray, useFormikContext, getIn } from 'formik'
+
+export const FormArray = ({
+ name, item: Item,
+ header: Header, footer: Footer,
+ wrapper: Wrapper=Fragment,
+ wrapperProps,
+ bodyWrapper: BodyWrapper=Fragment,
+ defaultItem={},
+}) => {
+ const { values } = useFormikContext()
+ const rows = getIn(values, name)
+
+ return (
+
+ {
+ arrayHelpers =>
+ { Header && }
+
+ {
+ (rows || []).map(
+ (data, index) =>
+
+ )
+ }
+
+ { Footer &&
+ }
+
+ )
+}
diff --git a/packages/builder/src/components/Form/table.js b/packages/builder/src/components/Form/table.js
index 6ce63dfa9..1012ee84d 100644
--- a/packages/builder/src/components/Form/table.js
+++ b/packages/builder/src/components/Form/table.js
@@ -1,48 +1,10 @@
-import React, { Fragment } from 'react'
+import React from 'react'
-import { FieldArray, useFormikContext, getIn } from 'formik'
import { Button } from 'reactstrap'
import Icon from '../Icon'
import './table.css'
-
-const FormArray = ({
- name, item: Item,
- header: Header, footer: Footer,
- wrapper: Wrapper=Fragment,
- wrapperProps,
- bodyWrapper: BodyWrapper=Fragment,
- defaultItem={},
-}) => {
- const { values } = useFormikContext()
- const rows = getIn(values, name)
-
- return (
-
- {
- arrayHelpers =>
- { Header && }
-
- {
- (rows || []).map(
- (data, index) =>
-
- )
- }
-
- { Footer &&
- }
-
- )
-}
+import { FormArray } from './array'
export const ButtonCell = ({ icon, onClick, style, disabled=false, type }) => {
const Wrapper = type ?? 'td'