diff --git a/index.html b/index.html
index 718db7c..78821fc 100644
--- a/index.html
+++ b/index.html
@@ -204,6 +204,86 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
           </button>
         </form>
       </section>
+
+      <section class="mt-16">
+        <form data-controller="nested-form" data-nested-form-position-value="beforeend">
+          <template data-nested-form-target="template">
+            <tr class="odd:bg-gray-100 nested-form-wrapper" data-new-record="true">
+              <td class="p-2">New todo</td>
+              <td class="p-2">
+                <input
+                  id="NEW_RECORD"
+                  name="user[todos_attributes][NEW_RECORD][description]"
+                  class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  placeholder="Your todo"
+                />
+              </td>
+              <td class="p-2">
+                <button
+                  class="cursor-pointer inline-flex items-center px-3 sm:text-sm"
+                  type="button"
+                  data-action="nested-form#remove"
+                  title="Remove todo"
+                >
+                  X
+                </button>
+                <input type="hidden" name="user[todos_attributes][NEW_RECORD][_destroy]" />
+              </td>
+            </tr>
+          </template>
+
+          <table class="table-auto border nested-form-wrapper">
+            <thead>
+              <tr>
+                <th class="p-2">Label</th>
+                <th class="p-2">Input</th>
+                <th class="p-2"></th>
+              </tr>
+            </thead>
+            <tbody id="nested-form-target" data-nested-form-target="target">
+              <tr class="odd:bg-gray-100 nested-form-wrapper" data-new-record="false">
+                <td class="p-2">Your todo</td>
+                <td class="p-2">
+                  <input
+                    id="todo-1"
+                    name="user[todos_attributes][0][description]"
+                    class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                    value="Pet the cat"
+                  />
+                </td>
+
+                <td class="p-2">
+                  <button
+                    class="cursor-pointer inline-flex items-center px-3 sm:text-sm"
+                    type="button"
+                    data-action="nested-form#remove"
+                    title="Remove todo"
+                  >
+                    X
+                  </button>
+                  <input type="hidden" name="user[todos_attributes][0][_destroy]" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <button
+            id="nested-form-button"
+            type="button"
+            data-action="nested-form#add"
+            class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
+          >
+            Add todo
+          </button>
+
+          <button
+            type="submit"
+            class="mt-4 bg-indigo-600 hover:bg-indigo-400 text-white font-semibold py-2 px-4 border rounded shadow"
+          >
+            Save todos
+          </button>
+        </form>
+      </section>
     </div>
 
     <!-- This example requires Tailwind CSS v2.0+ -->
diff --git a/spec/index.test.ts b/spec/index.test.ts
index 9c0ab07..9e0dec6 100644
--- a/spec/index.test.ts
+++ b/spec/index.test.ts
@@ -44,3 +44,46 @@ describe('#nestedForm', (): void => {
     expect(target.previousElementSibling.innerHTML).toContain('New todo')
   })
 })
+
+describe('#nestedForm tables', (): void => {
+  beforeEach((): void => {
+    startStimulus()
+
+    document.body.innerHTML = `
+      <form data-controller="nested-form" data-nested-form-position-value="beforeend">
+        <template data-nested-form-target="template">
+          <tr class="nested-form-wrapper" data-new-record="true">
+            <td>New todo</td>
+          </div>
+        </template>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Todo</th>
+            </tr>
+          </thead>
+          <tbody data-nested-form-target="target">
+            <tr>
+              <td>Your todo</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <button type="button" data-action="nested-form#add">Add todo</button>
+      </form>
+    `
+  })
+
+  it('should add new todo to end of table body', (): void => {
+    const target: HTMLElement = document.querySelector("[data-nested-form-target='target']")
+    const addButton: HTMLButtonElement = document.querySelector("[data-action='nested-form#add']")
+
+    // @ts-ignore
+    expect(target.lastElementChild.innerHTML.trim()).toContain('<td>Your todo</td>')
+
+    addButton.click()
+
+    expect(target.lastElementChild.innerHTML).toContain('<td>New todo</td>')
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ff9ee77..ca58b89 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,12 +4,17 @@ export default class extends Controller {
   targetTarget: HTMLElement
   templateTarget: HTMLElement
   wrapperSelectorValue: string
+  positionValue: InsertPosition
 
   static targets = ['target', 'template']
   static values = {
     wrapperSelector: {
       type: String,
       default: '.nested-form-wrapper'
+    },
+    position: {
+      type: String,
+      default: 'beforebegin'
     }
   }
 
@@ -17,7 +22,7 @@ export default class extends Controller {
     e.preventDefault()
 
     const content: string = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
-    this.targetTarget.insertAdjacentHTML('beforebegin', content)
+    this.targetTarget.insertAdjacentHTML(this.positionValue, content)
   }
 
   remove (e: Event): void {