Table editor

Vue Bootstrap 5 Table editor plugin

Table Editor is a useful tool for displaying and managing data. The component works similarly to the Datatable (docs) with an additional column for action buttons.

Responsive interactive built with the latest Bootstrap 5 and Vue 3. Creates editable tables. Delete or edit rows directly or via modal editor.

Note: Read the API tab to find all available options and advanced customization

Basic example

You can initialize the component via MDBTableEditor.You can pass the data to the component in two ways. First is to bind the data with an array of columns and rows to the dataset property. Second way is to create a HTML markup for your table inside MDBDatatable component - you can customize your table later by adding props to the component. Some of the more advanced options for columns, can be also used by setting data-mdb-attributes directly to a th tag (f.e. <th data-mdb-sort="false">).

When edit mode is enabled, the user shouldn't be able to interact with other parts of your website, as it can lead to loss of unsaved changes. You can control disabled state with v-model:edit property binding or by listening to edit and exit events.

Note: search field and add button are not a build-in part of Table Editor.

Table Editor collects information from HTML markup to create a data structure - the <table> element will be replaced in the DOM with a different node after component initializes.

Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4 
        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput
                  v-model="basicSearch"
                  label="Search"
                  :disabled="basicEdit"
                />
                <MDBBtn
                  color="primary"
                  size="sm"
                  class="ms-3"
                  @click="basicEditorRef?.addRow()"
                  :disabled="basicEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor
                :search="basicSearch"
                :entries="5"
                :entriesOptions="[5, 10, 15]"
                v-model:edit="basicEdit"
                ref="basicEditorRef"
              >
                <table class="table">
                  <thead>
                    <tr>
                      <th class="th-sm" data-mdb-width="250">Company</th>
                      <th class="th-sm" data-mdb-width="250" data-mdb-sort="false">
                        Address
                      </th>
                      <th class="th-sm" data-mdb-width="250" data-mdb-sort="false">
                        Employees
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Smith & Johnson</td>
                      <td>Park Lane 2, London</td>
                      <td>30</td>
                    </tr>
                    <tr>
                      <td>P.J. Company</td>
                      <td>Oak Street 7, Aberdeen</td>
                      <td>80</td>
                    </tr>
                    <tr>
                      <td>Food & Wine</td>
                      <td>Netherhall Gardens 3, Hampstead</td>
                      <td>12</td>
                    </tr>
                    <tr>
                      <td>IT Service</td>
                      <td>Warwick Road 14, London</td>
                      <td>17</td>
                    </tr>
                    <tr>
                      <td>A. Jonson Gallery</td>
                      <td>Oaklands Avenue 2, London</td>
                      <td>4</td>
                    </tr>
                    <tr>
                      <td>F.A. Architects</td>
                      <td>Frognal Way 7, Hampstead</td>
                      <td>4</td>
                    </tr>
                  </tbody>
                </table>
              </MDBTableEditor>
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";
              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const basicEditorRef = ref(null);
                  const basicSearch = ref("");
                  const basicEdit = ref(false);

                  return {
                    basicEditorRef,
                    basicSearch,
                    basicEdit,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const basicEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const basicSearch = ref("");
              const basicEdit = ref(false);
            </script>

Modal

To change the default editing mode (inline) to the modal version, set option mode to "modal". 

        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput v-model="modalSearch" label="Search" :disabled="modalEdit" />
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  class="ms-3" 
                  @click="modalEditorRef?.addRow()" 
                  :disabled="modalEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor 
                mode="modal"
                v-model:dataset="modalData" 
                :search="modalSearch" 
                :entries="5"
                :entriesOptions="[5, 10, 15]" 
                v-model:edit="modalEdit" 
                ref="modalEditorRef" 
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";
              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const modalEditorRef = ref(null);
                  const modalSearch = ref("");
                  const modalEdit = ref(false);
                  const modalData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company",
                      },
                      {
                        width: 250,
                        sort: false,
                        defaultValue: "Warsaw",
                        options: ["London", "Warsaw", "New York"],
                        inputType: "select",
                        label: "Office",
                        field: "office",
                      },
                      {
                        width: 250,
                        inputType: "number",
                        defaultValue: 1,
                        label: "Employees",
                        field: "employees",
                      },
                      {
                        width: 100,
                        defaultValue: false,
                        inputType: "checkbox",
                        label: "International",
                        field: "international",
                      },
                    ],
                    rows: [
                      {
                        company: "Smith & Johnson",
                        office: "London",
                        employees: 30,
                        international: true,
                      },
                      {
                        company: "P.J. Company",
                        office: "London",
                        employees: 80,
                        international: false,
                      },
                      {
                        company: "Food & Wine",
                        office: "London",
                        employees: 12,
                        international: false,
                      },
                      {
                        company: "IT Service",
                        office: "London",
                        employees: 17,
                        international: false,
                      },
                      {
                        company: "A. Jonson Gallery",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                      {
                        company: "F.A. Architects",
                        office: "London",
                        employees: 4,
                        international: false,
                      }
                    ]
                  });
                  return {
                    modalEditorRef,
                    modalSearch,
                    modalEdit,
                    modalData,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const modalEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const modalSearch = ref("");
              const modalEdit = ref(false);
              const modalData = ref({
                columns: [
                  {
                    width: 250,
                    label: "Company",
                    field: "company",
                  },
                  {
                    width: 250,
                    sort: false,
                    defaultValue: "Warsaw",
                    options: ["London", "Warsaw", "New York"],
                    inputType: "select",
                    label: "Office",
                    field: "office",
                  },
                  {
                    width: 250,
                    inputType: "number",
                    defaultValue: 1,
                    label: "Employees",
                    field: "employees",
                  },
                  {
                    width: 100,
                    defaultValue: false,
                    inputType: "checkbox",
                    label: "International",
                    field: "international",
                  },
                ],
                rows: [
                  {
                    company: "Smith & Johnson",
                    office: "London",
                    employees: 30,
                    international: true,
                  },
                  {
                    company: "P.J. Company",
                    office: "London",
                    employees: 80,
                    international: false,
                  },
                  {
                    company: "Food & Wine",
                    office: "London",
                    employees: 12,
                    international: false,
                  },
                  {
                    company: "IT Service",
                    office: "London",
                    employees: 17,
                    international: false,
                  },
                  {
                    company: "A. Jonson Gallery",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                  {
                    company: "F.A. Architects",
                    office: "London",
                    employees: 4,
                    international: false,
                  }
                ]
              });
            </script>

Inputs example

Table Editor supports several input types - for example, if you wish to force a user to enter only Boolean values in one column, you can set its inputType to a checkbox.

Supported input types:

  • Text (default)
  • Number
  • Checkbox - displays a checkbox in edit mode and true/false value otherwise
  • Select - additionally requires an array of options
        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput v-model="inputsSearch" label="Search" :disabled="inputsEdit" />
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  class="ms-3" 
                  @click="inputsEditorRef?.addRow()" 
                  :disabled="inputsEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor 
                v-model:dataset="inputsData" 
                :search="inputsSearch" 
                :entries="5" 
                :entriesOptions="[5, 10, 15]"
                v-model:edit="inputsEdit" 
                ref="inputsEditorRef" 
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const inputsEditorRef = ref(null);
                  const inputsSearch = ref("");
                  const inputsEdit = ref(false);
                  const inputsData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company",
                      },
                      {
                        width: 250,
                        sort: false,
                        defaultValue: "Warsaw",
                        options: ["London", "Warsaw", "New York"],
                        inputType: "select",
                        label: "Office",
                        field: "office",
                      },
                      {
                        width: 250,
                        inputType: "number",
                        defaultValue: 1,
                        label: "Employees",
                        field: "employees",
                      },
                      {
                        width: 100,
                        defaultValue: false,
                        inputType: "checkbox",
                        label: "International",
                        field: "international",
                      },
                    ],
                    rows: [
                      {
                        company: "Smith & Johnson",
                        office: "London",
                        employees: 30,
                        international: true,
                      },
                      {
                        company: "P.J. Company",
                        office: "London",
                        employees: 80,
                        international: false,
                      },
                      {
                        company: "Food & Wine",
                        office: "London",
                        employees: 12,
                        international: false,
                      },
                      {
                        company: "IT Service",
                        office: "London",
                        employees: 17,
                        international: false,
                      },
                      {
                        company: "A. Jonson Gallery",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                      {
                        company: "F.A. Architects",
                        office: "London",
                        employees: 4,
                        international: false,
                      }
                    ]
                  });

                  return {
                    inputsEdit,
                    inputsEditorRef,
                    inputsSearch,
                    inputsData,
                  }
                }
              }
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const inputsEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const inputsSearch = ref("");
              const inputsEdit = ref(false);
              const inputsData = ref({
                columns: [
                  {
                    width: 250,
                    label: "Company",
                    field: "company",
                  },
                  {
                    width: 250,
                    sort: false,
                    defaultValue: "Warsaw",
                    options: ["London", "Warsaw", "New York"],
                    inputType: "select",
                    label: "Office",
                    field: "office",
                  },
                  {
                    width: 250,
                    inputType: "number",
                    defaultValue: 1,
                    label: "Employees",
                    field: "employees",
                  },
                  {
                    width: 100,
                    defaultValue: false,
                    inputType: "checkbox",
                    label: "International",
                    field: "international",
                  },
                ],
                rows: [
                  {
                    company: "Smith & Johnson",
                    office: "London",
                    employees: 30,
                    international: true,
                  },
                  {
                    company: "P.J. Company",
                    office: "London",
                    employees: 80,
                    international: false,
                  },
                  {
                    company: "Food & Wine",
                    office: "London",
                    employees: 12,
                    international: false,
                  },
                  {
                    company: "IT Service",
                    office: "London",
                    employees: 17,
                    international: false,
                  },
                  {
                    company: "A. Jonson Gallery",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                  {
                    company: "F.A. Architects",
                    office: "London",
                    employees: 4,
                    international: false,
                  }
                ]
              });
            </script>

Disable edit

You can disable editing for a column by setting its editable option to false. A user won't be able to change its value in the edit mode. 

        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput v-model="disabledSearch" label="Search" :disabled="disabledEdit" />
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  class="ms-3" 
                  @click="disabledEditorRef?.addRow()" 
                  :disabled="disabledEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor 
                v-model:dataset="disabledData" 
                :search="disabledSearch" 
                :entries="5" 
                :entriesOptions="[5, 10, 15]"
                v-model:edit="disabledEdit" 
                ref="disabledEditorRef" 
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";
              
              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const disabledEditorRef = ref(null);
                  const disabledSearch = ref("");
                  const disabledEdit = ref(false);
                  const disabledData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company",
                        editable: false
                      },
                      {
                        width: 250,
                        sort: false,
                        defaultValue: "Warsaw",
                        options: ["London", "Warsaw", "New York"],
                        inputType: "select",
                        label: "Office",
                        field: "office",
                        editable: false
                      },
                      {
                        width: 250,
                        inputType: "number",
                        defaultValue: 1,
                        label: "Employees",
                        field: "employees",
                        editable: false
                      },
                      {
                        width: 100,
                        defaultValue: false,
                        inputType: "checkbox",
                        label: "International",
                        field: "international",
                        editable: false
                      },
                    ],
                    rows: [
                      {
                        company: "Smith & Johnson",
                        office: "London",
                        employees: 30,
                        international: true,
                      },
                      {
                        company: "P.J. Company",
                        office: "London",
                        employees: 80,
                        international: false,
                      },
                      {
                        company: "Food & Wine",
                        office: "London",
                        employees: 12,
                        international: false,
                      },
                      {
                        company: "IT Service",
                        office: "London",
                        employees: 17,
                        international: false,
                      },
                      {
                        company: "A. Jonson Gallery",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                      {
                        company: "F.A. Architects",
                        office: "London",
                        employees: 4,
                        international: false,
                      }
                    ]
                  });
                  
                  return {
                    disabledEditorRef,
                    disabledSearch,
                    disabledEdit,
                    disabledData,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const disabledEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const disabledSearch = ref("");
              const disabledEdit = ref(false);
              const disabledData = ref({
                columns: [
                  {
                     width: 250,
                    label: "Company",
                    field: "company",
                    editable: false
                  },
                  {
                    width: 250,
                    sort: false,
                    defaultValue: "Warsaw",
                    options: ["London", "Warsaw", "New York"],
                    inputType: "select",
                    label: "Office",
                    field: "office",
                    editable: false
                  },
                  {
                    width: 250,
                    inputType: "number",
                    defaultValue: 1,
                    label: "Employees",
                    field: "employees",
                    editable: false
                  },
                  {
                    width: 100,
                    defaultValue: false,
                    inputType: "checkbox",
                    label: "International",
                    field: "international",
                    editable: false
                  },
                ],
                rows: [
                  {
                    company: "Smith & Johnson",
                    office: "London",
                    employees: 30,
                    international: true,
                  },
                  {
                    company: "P.J. Company",
                    office: "London",
                    employees: 80,
                    international: false,
                  },
                  {
                    company: "Food & Wine",
                    office: "London",
                    employees: 12,
                    international: false,
                  },
                  {
                    company: "IT Service",
                    office: "London",
                    employees: 17,
                    international: false,
                  },
                  {
                    company: "A. Jonson Gallery",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                  {
                    company: "F.A. Architects",
                    office: "London",
                    employees: 4,
                    international: false,
                  }
                ]
              });
            </script>

Confirm delete

If you want to prevent data from being accidentally removed, you can set a confirm option to true. In this case, Table Editor will show a Popconfirm element before removing an entry. 

        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput v-model="confirmSearch" label="Search" :disabled="confirmEdit" />
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  class="ms-3" 
                  @click="confirmEditorRef?.addRow()" 
                  :disabled="confirmEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor 
                confirm 
                v-model:dataset="confirmData" 
                :search="confirmSearch" 
                :entries="5" 
                :entriesOptions="[5, 10, 15]"
                v-model:edit="confirmEdit" 
                ref="confirmEditorRef" 
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const confirmEditorRef = ref(null);
                  const confirmSearch = ref("");
                  const confirmEdit = ref(false);
                  const confirmData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company"
                      },
                      {
                        width: 250,
                        sort: false,
                        defaultValue: "Warsaw",
                        options: ["London", "Warsaw", "New York"],
                        inputType: "select",
                        label: "Office",
                        field: "office"
                      },
                      {
                        width: 250,
                        inputType: "number",
                        defaultValue: 1,
                        label: "Employees",
                        field: "employees"
                      },
                      {
                        width: 100,
                        defaultValue: false,
                        inputType: "checkbox",
                        label: "International",
                        field: "international"
                      },
                    ],
                    rows: [
                      {
                        company: "Smith & Johnson",
                        office: "London",
                        employees: 30,
                        international: true,
                      },
                      {
                        company: "P.J. Company",
                        office: "London",
                        employees: 80,
                        international: false,
                      },
                      {
                        company: "Food & Wine",
                        office: "London",
                        employees: 12,
                        international: false,
                      },
                      {
                        company: "IT Service",
                        office: "London",
                        employees: 17,
                        international: false,
                      },
                      {
                        company: "A. Jonson Gallery",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                      {
                        company: "F.A. Architects",
                        office: "London",
                        employees: 4,
                        international: false,
                      }
                    ]
                  });
                  
                  return {
                    confirmEditorRef,
                    confirmSearch,
                    confirmEdit,
                    confirmData,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const confirmEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const confirmSearch = ref("");
              const confirmEdit = ref(false);
              const confirmData = ref({
                columns: [
                  {
                    width: 250,
                    label: "Company",
                    field: "company"
                  },
                  {
                    width: 250,
                    sort: false,
                    defaultValue: "Warsaw",
                    options: ["London", "Warsaw", "New York"],
                    inputType: "select",
                    label: "Office",
                    field: "office"
                  },
                  {
                    width: 250,
                    inputType: "number",
                    defaultValue: 1,
                    label: "Employees",
                    field: "employees"
                  },
                  {
                    width: 100,
                    defaultValue: false,
                    inputType: "checkbox",
                    label: "International",
                    field: "international"
                  },
                ],
                rows: [
                  {
                    company: "Smith & Johnson",
                    office: "London",
                    employees: 30,
                    international: true,
                  },
                  {
                    company: "P.J. Company",
                    office: "London",
                    employees: 80,
                    international: false,
                  },
                  {
                    company: "Food & Wine",
                    office: "London",
                    employees: 12,
                    international: false,
                  },
                  {
                    company: "IT Service",
                    office: "London",
                    employees: 17,
                    international: false,
                  },
                  {
                    company: "A. Jonson Gallery",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                  {
                    company: "F.A. Architects",
                    office: "London",
                    employees: 4,
                    international: false,
                  }
                ]
              });
            </script>

Async data

While awaiting data from API, you can prevent a user from interacting with Table Editor by setting loading option to true. 

        
            
            <template>
              <div class="d-flex justify-content-between mb-4">
                <MDBBtn color="primary" size="sm" @click="loadAsyncData">Load data</MDBBtn>
                <div class="d-flex justify-content-end">
                  <MDBInput v-model="asyncSearch" label="Search" :disabled="asyncEdit" />
                  <MDBBtn 
                    color="primary" 
                    size="sm" 
                    class="ms-3" 
                    @click="asyncEditorRef?.addRow()" 
                    :disabled="asyncEdit"
                  >
                    <MDBIcon icon="plus"/>
                  </MDBBtn>
                </div>
              </div>
              <hr />
              <MDBTableEditor 
                v-model:dataset="asyncData" 
                :search="asyncSearch" 
                :loading="loadingAsync" 
                v-model:edit="asyncEdit"
                ref="asyncEditorRef" 
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const asyncEditorRef = ref(null);
                  const asyncSearch = ref("");
                  const asyncEdit = ref(false);
                  const asyncData = ref({
                    columns: [
                      { label: "Company", field: "company" },
                      { label: "Email", field: "email" },
                      { label: "Name", field: "name" },
                      { label: "Phone", field: "phone" },
                    ],
                    rows: [],
                  });
                  const loadingAsync = ref(false);
                  const loadAsyncData = () => {
                    asyncData.value.rows = [];
                    loadingAsync.value = true;
                    fetch("https://jsonplaceholder.typicode.com/users")
                      .then((response) => response.json())
                      .then((data) => {
                        asyncData.value.rows = data.map((user) => ({
                          ...user,
                          address: `${user.address.city}, ${user.address.street}`,
                          company: user.company.name,
                        }));
                        loadingAsync.value = false;
                      });
                  }
                  
                  return {
                    asyncEditorRef,
                    asyncSearch,
                    asyncEdit,
                    asyncData,
                    loadingAsync,
                    loadAsyncData,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const asyncEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const asyncSearch = ref("");
              const asyncEdit = ref(false);
              const asyncData = ref({
                columns: [
                  { label: "Company", field: "company" },
                  { label: "Email", field: "email" },
                  { label: "Name", field: "name" },
                  { label: "Phone", field: "phone" },
                ],
                rows: [],
              });
              const loadingAsync = ref(false);
              const loadAsyncData = () => {
                asyncData.value.rows = [];
                loadingAsync.value = true;
                fetch("https://jsonplaceholder.typicode.com/users")
                  .then((response) => response.json())
                  .then((data) => {
                    asyncData.value.rows = data.map((user) => ({
                      ...user,
                      address: `${user.address.city}, ${user.address.street}`,
                      company: user.company.name,
                    }));
                    loadingAsync.value = false;
                  });
              };
            </script>

Custom rows

The add() method takes an optional argument - a row which values will be preloaded into a new entry.

Note: for this particular use, a row has to be an object.

Note: as adding buttons are initialized manually, they won't be automatically disabled in the edit mode.

M.B.

(5 Avenue 26, New York)

Berkley & Clark

(43th Street 12, New York)

D&D Inc.

(14 Street 67, New York)

Thomas & Co.

(2 Avenue 54, New York)

        
            
            <template>
            <MDBRow>
              <MDBCol md="3" sm="6" class="p-3">
                <h4>M.B.</h4>
                <p>(5 Avenue 26, New York)</p>
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  @click="
                    customRowsEditorRef?.addRow({
                      company: 'M.B.',
                      address: '5 Avenue 26',
                      city: 'New York'
                    })
                  "
                >
                  Load into table
                </MDBBtn>
              </MDBCol>
              <MDBCol md="3" sm="6" class="p-3">
                <h4>Berkley & Clark</h4>
                <p>(43th Street 12, New York)</p>
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  @click="
                    customRowsEditorRef?.addRow({
                      company: 'Berkley & Clark',
                      address: '43th Street 12',
                      city: 'New York'
                    })
                  "
                >
                  Load into table
                </MDBBtn>
              </MDBCol>
              <MDBCol md="3" sm="6" class="p-3">
                <h4>D&D Inc.</h4>
                <p>(14 Street 67, New York)</p>
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  @click="
                    customRowsEditorRef?.addRow({
                      company: 'D&D Inc.',
                      address: '14 Street 67',
                      city: 'New York'
                    })
                  "
                >
                  Load into table
                </MDBBtn>
              </MDBCol>
              <MDBCol md="3" sm="6" class="p-3">
                <h4>Thomas & Co.</h4>
                <p>(2 Avenue 54, New York)</p>
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  @click="
                    customRowsEditorRef?.addRow({
                      company: 'Thomas & Co.',
                      address: '2 Avenue 54',
                      city: 'New York'
                    })
                  "
                >
                  Load into table
                </MDBBtn>
              </MDBCol>
            </MDBRow>
            <hr class="mt-3" />
            <MDBTableEditor 
              v-model:dataset="customRowsData" 
              :search="customRowsSearch" 
              v-model:edit="customRowsEdit"
              ref="customRowsEditorRef" 
            />
            </template>
          
        
    
        
            
            <script>
              import { MDBBtn, MDBCol, MDBRow } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";
              
              export default {
                components: {
                  MDBBtn, MDBCol, MDBRow, MDBTableEditor
                },
                setup() {
                  const customRowsEditorRef = ref(null);
                  const customRowsSearch = ref("");
                  const customRowsEdit = ref(false);
                  const customRowsData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company",
                      },
                      {
                        width: 250,
                        label: "Address",
                        field: "address",
                      },
                      {
                        width: 250,
                        label: "City",
                        field: "city",
                      },
                    ],
                    rows: [
                      { company: "Smith & Johnson", address: "Park Lane 2", city: "London" },
                      { company: "P.J. Company", address: "Oak Street 7", city: "Aberdeen" },
                      {
                        company: "Food & Wine",
                        address: "Netherhall Gardens 3",
                        city: "Hampstead",
                      },
                      { company: "IT Service", address: "Warwick Road 14", city: "London" },
                      {
                        company: "A. Jonson Gallery",
                        address: "Oaklands Avenue 2",
                        city: "London",
                      },
                      {
                        company: "F.A. Architects",
                        address: "Frognal Way 7",
                        city: "Hampstead",
                      },
                    ],
                  });
                  return {
                    customRowsEditorRef,
                    customRowsSearch,
                    customRowsEdit,
                    customRowsData,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBBtn, MDBCol, MDBRow } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const customRowsEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const customRowsSearch = ref("");
              const customRowsEdit = ref(false);
              const customRowsData = ref({
                columns: [
                  {
                    width: 250,
                    label: "Company",
                    field: "company",
                  },
                  {
                    width: 250,
                    label: "Address",
                    field: "address",
                  },
                  {
                    width: 250,
                    label: "City",
                    field: "city",
                  },
                ],
                rows: [
                  { company: "Smith & Johnson", address: "Park Lane 2", city: "London" },
                  { company: "P.J. Company", address: "Oak Street 7", city: "Aberdeen" },
                  {
                    company: "Food & Wine",
                    address: "Netherhall Gardens 3",
                    city: "Hampstead",
                  },
                  { company: "IT Service", address: "Warwick Road 14", city: "London" },
                  {
                    company: "A. Jonson Gallery",
                    address: "Oaklands Avenue 2",
                    city: "London",
                  },
                  {
                    company: "F.A. Architects",
                    address: "Frognal Way 7",
                    city: "Hampstead",
                  },
                ],
              });
            </script>

Notifications

In this example, handlers for custom events trigger notifications after adding/deleting/updating an entry. 

        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput v-model="notificationsSearch" label="Search" :disabled="notificationsEdit" />
                <MDBBtn 
                  color="primary" 
                  size="sm" 
                  class="ms-3" 
                  @click="notificationsEditorRef?.addRow()"
                  :disabled="notificationsEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor 
                v-model:dataset="notificationsData" 
                :search="notificationsSearch" 
                v-model:edit="notificationsEdit"
                ref="notificationsEditorRef" 
                @add="showNotification('success', 'New entry: ', $event)"
                @delete="showNotification('danger', 'Deleted entry: ', $event)" 
                @updateEntry="showNotification('primary', 'Updated entry: ', $event)"
              />
              <MDBAlert 
                v-model="alert" 
                :color="alertColor" 
                position="top-right" 
                width="360px" 
                :delay="2000" 
                autohide
              >
                <div v-html="alertMessage" />
              </MDBAlert>
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon, MDBAlert } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";
              
              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBAlert, MDBTableEditor
                },
                setup() {
                  const notificationsEditorRef = ref(null);
                  const notificationsSearch = ref("");
                  const notificationsEdit = ref(false);
                  const notificationsData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company",
                      },
                      {
                        width: 250,
                        sort: false,
                        defaultValue: "Warsaw",
                        options: ["London", "Warsaw", "New York"],
                        inputType: "select",
                        label: "Office",
                        field: "office",
                      },
                      {
                        width: 250,
                        inputType: "number",
                        defaultValue: 1,
                        label: "Employees",
                        field: "employees",
                      },
                      {
                        width: 100,
                        defaultValue: false,
                        inputType: "checkbox",
                        label: "International",
                        field: "international",
                      },
                    ],
                    rows: [
                      {
                        company: "Smith & Johnson",
                        office: "London",
                        employees: 30,
                        international: true,
                      },
                      {
                        company: "P.J. Company",
                        office: "London",
                        employees: 80,
                        international: false,
                      },
                      {
                        company: "Food & Wine",
                        office: "London",
                        employees: 12,
                        international: false,
                      },
                      {
                        company: "IT Service",
                        office: "London",
                        employees: 17,
                        international: false,
                      },
                      {
                        company: "A. Jonson Gallery",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                      {
                        company: "F.A. Architects",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                    ]
                  });
                  const alert = ref(false);
                  const alertColor = ref("primary");
                  const alertMessage = ref("");
                  const showNotification = (type, message, event) => {
                    const { company, office } = event.row;
                    alertMessage.value = `<strong>${message}</strong> ${company} ${office}`;
                    alertColor.value = type;
                    alert.value = true;
                  };
                  return {
                    showNotification,
                    notificationsEditorRef,
                    notificationsSearch,
                    notificationsEdit,
                    notificationsData,
                    alert,
                    alertColor,
                    alertMessage,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon, MDBAlert } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const notificationsEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const notificationsSearch = ref("");
              const notificationsEdit = ref(false);
              const notificationsData = ref({
                columns: [
                  {
                    width: 250,
                    label: "Company",
                    field: "company",
                  },
                  {
                    width: 250,
                    sort: false,
                    defaultValue: "Warsaw",
                    options: ["London", "Warsaw", "New York"],
                    inputType: "select",
                    label: "Office",
                    field: "office",
                  },
                  {
                    width: 250,
                    inputType: "number",
                    defaultValue: 1,
                    label: "Employees",
                    field: "employees",
                  },
                  {
                    width: 100,
                    defaultValue: false,
                    inputType: "checkbox",
                    label: "International",
                    field: "international",
                  },
                ],
                rows: [
                  {
                    company: "Smith & Johnson",
                    office: "London",
                    employees: 30,
                    international: true,
                  },
                  {
                    company: "P.J. Company",
                    office: "London",
                    employees: 80,
                    international: false,
                  },
                  {
                    company: "Food & Wine",
                    office: "London",
                    employees: 12,
                    international: false,
                  },
                  {
                    company: "IT Service",
                    office: "London",
                    employees: 17,
                    international: false,
                  },
                  {
                    company: "A. Jonson Gallery",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                  {
                    company: "F.A. Architects",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                ]
              });
              const alert = ref(false);
              const alertColor = ref("primary");
              const alertMessage = ref("");
              const showNotification = (type: string, message: string, event: Event) => {
                const { company, office } = event.row;
                alertMessage.value = `<strong>${message}</strong> ${company} ${office}`;
                alertColor.value = type;
                alert.value = true;
              };
            </script>

Dark

Dark mode can be applied to both modal and inline versions - firstly, add a CSS class which changes the background color to your page. Secondly, pass the same class name to the color option of your Table Editor (f.e. 'bg-dark'). Now change the font to light by setting dark attribute to true.

Tip: add form-white class to your search input's wrapper.

Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4 
        
            
            <template>
              <div class="d-flex justify-content-end mb-4">
                <MDBInput v-model="darkSearch" label="Search" :disabled="darkEdit" white />
                <MDBBtn 
                  color="primary" 
                  size="sm"
                   class="ms-3" 
                  @click="darkEditorRef?.addRow()" 
                  :disabled="darkEdit"
                >
                  <MDBIcon icon="plus"/>
                </MDBBtn>
              </div>
              <hr />
              <MDBTableEditor 
                v-model:dataset="darkData" 
                :search="darkSearch" 
                v-model:edit="darkEdit" 
                color="bg-dark" 
                dark
                ref="darkEditorRef" 
                @add="showNotification('success', 'New entry: ', $event)"
                @delete="showNotification('danger', 'Deleted entry: ', $event)" 
                @updateEntry="showNotification('primary', 'Updated entry: ', $event)"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";
              
              export default {
                components: {
                  MDBInput, MDBBtn, MDBIcon, MDBTableEditor
                },
                setup() {
                  const darkEditorRef = ref(null);
                  const darkSearch = ref("");
                  const darkEdit = ref(false);
                  const darkData = ref({
                    columns: [
                      {
                        width: 250,
                        label: "Company",
                        field: "company"
                      },
                      {
                        width: 250,
                        sort: false,
                        defaultValue: "Warsaw",
                        options: ["London", "Warsaw", "New York"],
                        inputType: "select",
                        label: "Office",
                        field: "office"
                      },
                      {
                        width: 250,
                        inputType: "number",
                        defaultValue: 1,
                        label: "Employees",
                        field: "employees"
                      },
                      {
                        width: 100,
                        defaultValue: false,
                        inputType: "checkbox",
                        label: "International",
                        field: "international"
                      },
                    ],
                    rows: [
                      {
                        company: "Smith & Johnson",
                        office: "London",
                        employees: 30,
                        international: true,
                      },
                      {
                        company: "P.J. Company",
                        office: "London",
                        employees: 80,
                        international: false,
                      },
                      {
                        company: "Food & Wine",
                        office: "London",
                        employees: 12,
                        international: false,
                      },
                      {
                        company: "IT Service",
                        office: "London",
                        employees: 17,
                        international: false,
                      },
                      {
                        company: "A. Jonson Gallery",
                        office: "London",
                        employees: 4,
                        international: false,
                      },
                      {
                        company: "F.A. Architects",
                        office: "London",
                        employees: 4,
                        international: false,
                      }
                    ]
                  });
                  const showNotification = (type: string, message: string, event: Event) => {
                  const { company, office } = event.row;
                  alertMessage.value = `<strong>${message}</strong> ${company} ${office}`;
                  alertColor.value = type;
                  alert.value = true;
                };

                  return {
                    darkEditorRef,
                    darkSearch,
                    darkEdit,
                    darkData,
                    showNotification
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              import { MDBTableEditor } from "mdb-vue-table-editor";
              import { ref } from "vue";

              const darkEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
              const darkSearch = ref("");
              const darkEdit = ref(false);
              const darkData = ref({
                columns: [
                  {
                    width: 250,
                    label: "Company",
                    field: "company"
                  },
                  {
                    width: 250,
                    sort: false,
                    defaultValue: "Warsaw",
                    options: ["London", "Warsaw", "New York"],
                    inputType: "select",
                    label: "Office",
                    field: "office"
                  },
                  {
                    width: 250,
                    inputType: "number",
                    defaultValue: 1,
                    label: "Employees",
                    field: "employees"
                  },
                  {
                    width: 100,
                    defaultValue: false,
                    inputType: "checkbox",
                    label: "International",
                    field: "international"
                  },
                ],
                rows: [
                  {
                    company: "Smith & Johnson",
                    office: "London",
                    employees: 30,
                    international: true,
                  },
                  {
                    company: "P.J. Company",
                    office: "London",
                    employees: 80,
                    international: false,
                  },
                  {
                    company: "Food & Wine",
                    office: "London",
                    employees: 12,
                    international: false,
                  },
                  {
                    company: "IT Service",
                    office: "London",
                    employees: 17,
                    international: false,
                  },
                  {
                    company: "A. Jonson Gallery",
                    office: "London",
                    employees: 4,
                    international: false,
                  },
                  {
                    company: "F.A. Architects",
                    office: "London",
                    employees: 4,
                    international: false,
                  }
                ]
              });
              const showNotification = (type: string, message: string, event: Event) => {
                const { company, office } = event.row;
                alertMessage.value = `<strong>${message}</strong> ${company} ${office}`;
                alertColor.value = type;
                alert.value = true;
              };
            </script>

Table editor - API

Import

        
            
          <script>
            import { MDBTableEditor } from "mdb-vue-table-editor";
          </script>

Properties

Property Type Default Description
actionHeader String 'Actions' Header for action buttons
actionPosition String 'end' Decides where to render an action column (start/end)
bordered Boolean false Adds borders to a datatable
borderless Boolean false Removes all borders from a datatable
borderColor String Changes a border color to one of main colors
cancelText String 'Cancel' Text displayed in cancel buttons
confirm Boolean false Displays a Popconfirm element before removing an entry
confirmText String 'Cancel' Text displayed in confirm buttons (Popconfirm)
confirmMessage String 'Are you sure you want to delete this entry?' Text displayed in a Popconfirm element
color String Adds a color class to a datatable (f.e 'bg-dark')
dark Boolean false Changes a font color to white
defaultValue String "-" This string will be used as a placeholder if a row doesn't have a defined value for a column
dataset Object { columns: [], rows: [] } Main data object
v-model:edit Boolean false Keeps information about edit mode
entries Number 10 Number of visible entries (pagination)
entriesOptions Array [10, 25, 50, 200] Options available to choose from in a pagination select (rows per page)
fixedHeader Boolean false When it's set to true, the table's header will remain visible while scrolling
fullPagination Boolean false Displays additional buttons for the first and last pages
hover Boolean false Changes the background color of a hovered row
loaderClass String "bg-primary" The class name for a loader (loading mode)
loading Boolean false Sets the loading mode - disables interactions and displays a loader
loadingMessage String "Loading results..." A message displayed while loading data
maxHeight [Number, String] Sets a maximum height of a datatable - can be either a string ("10%") or a number of pixels.
maxWidth [Number, String] "100%" Sets a maximum width of a datatable - can be either a string ("10%") or a number of pixels.
mode String 'inline' Changes edit mode - available options: 'inline', 'modal'
multi Boolean false Allows selecting multiple rows (selectable mode)
newItemHeader String 'New item' A header of modal
noFoundMessage String "No matching results found" A message displayed when a table is empty
pagination Boolean true Shows/hides the pagination panel
rowsText String "Rows per page:" A text indicating a number of rows per page
saveText String 'Save Text displayed in the save button (modal)
search String Search phrase
searchColumns Array [] Columns to include while searching. All columns included for an empty array
selectable Boolean false Enables selecting rows with checkboxes
sm Boolean false Decreases a row's paddings
sortField String Default sorted column enabled by a field name
sortOrder String Default sorting order. Available values: "asc" or "desc".
striped Boolean false Slightly changes the background's color in every other row
tag String "div" Defines wrapper tag

Column properties

Name Type Default Description
editable Boolean true Enables/disabled editing fields in this column
label String '' A displayed header of a column
field String label.toLowerCase() A field's name - will be used as a key for values in rows
fixed [Boolean, String] false When set to true, makes a column stick on the left while scrolling. Changing its value to right will do the same on the other side. For this option to work, you need to define width as well.
inputType String 'text' Input type for a column. Available options: 'text', 'number', 'checkbox', 'select'
options Array [] Array of options (for column with a "select" input type)
width Number A column's width in pixels
sort Boolean true Enables/disables sorting for this column
format Array Cell formatting array of objects for each cell.

Methods

Name Description
addRow Adds a new row (default values are optional). 
        
            
        <template>
          <div class="d-flex justify-content-end mb-4">
            <MDBInput
              v-model="basicSearch"
              label="Search"
              :disabled="basicEdit"
            />
            <MDBBtn
              color="primary"
              size="sm"
              class="ms-3"
              @click="basicEditorRef?.addRow()"
              :disabled="basicEdit"
            >
              <MDBIcon icon="plus"/>
            </MDBBtn>
          </div>
          <hr />
          <MDBTableEditor
            :search="basicSearch"
            :entries="5"
            :entriesOptions="[5, 10, 15]"
            v-model:edit="basicEdit"
            ref="basicEditorRef"
          >
            <table class="table">
              <thead>
                <tr>
                  <th class="th-sm" data-mdb-width="250">Company</th>
                  <th class="th-sm" data-mdb-width="250" data-mdb-sort="false">
                    Address
                  </th>
                  <th class="th-sm" data-mdb-width="250" data-mdb-sort="false">
                    Employees
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Smith & Johnson</td>
                  <td>Park Lane 2, London</td>
                  <td>30</td>
                </tr>
                <tr>
                  <td>P.J. Company</td>
                  <td>Oak Street 7, Aberdeen</td>
                  <td>80</td>
                </tr>
                <tr>
                  <td>Food & Wine</td>
                  <td>Netherhall Gardens 3, Hampstead</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td>IT Service</td>
                  <td>Warwick Road 14, London</td>
                  <td>17</td>
                </tr>
                <tr>
                  <td>A. Jonson Gallery</td>
                  <td>Oaklands Avenue 2, London</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>F.A. Architects</td>
                  <td>Frognal Way 7, Hampstead</td>
                  <td>4</td>
                </tr>
              </tbody>
            </table>
          </MDBTableEditor>
        </template>
        
        
    
        
            
        <script>
          import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
          import { MDBTableEditor } from "mdb-vue-table-editor";
          import { ref } from "vue";
          export default {
            components: {
              MDBInput, MDBBtn, MDBIcon, MDBTableEditor
            },
            setup() {
              const basicEditorRef = ref(null);
              const basicSearch = ref("");
              const basicEdit = ref(false);
        
              return {
                basicEditorRef,
                basicSearch,
                basicEdit,
              }
            }
          };
        </script>
        
        
    
        
            
        <script setup lang="ts">
          import { MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
          import { MDBTableEditor } from "mdb-vue-table-editor";
          import { ref } from "vue";
        
          const basicEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null);
          const basicSearch = ref("");
          const basicEdit = ref(false);
        </script>

Events

Name Description
add This event fires after adding a new row.
delete This event fires after deleting a row.
edit This event fires when user enters edit mode.
exit This event fires when user exits edit mode.
render Event emitted after the component renders/updates rows.
update This event fires in an editable mode when a user updates values. 
        
            
          <template>
            <MDBTableEditor @add="doSomething" >...</MDBTableEditor>
          </template>