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 theAPI tab to find all available options and advanced customization
Basic example
You can initialize the component viaMDBTableEditor.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 thedataset 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 withv-model:edit property binding or by listening toedit andexit 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 optionmode 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 itsinputType 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
- Autocomplete - additionally requires a filter method inside the
filterproperty. Check the autocomplete page to see how it should look like - Datepicker - add
propsproperty to provide additional options to the datepicker - Timepicker - add
propsproperty to provide additional options to the datepicker
<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 itseditable option tofalse. 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 aconfirm option totrue. 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>Advanced Search
You can create more advanced searching functionality and allow a user to specify in which column to search for a given phrase.
Search fields need to be disabled manually in the edit mode.
in:
<template> <div class="d-flex justify-content-between mb-4"> <div class="d-flex"> <MDBInput v-model="advancedSearchQuery" label="Search" :disabled="advancedSearchEdit" /> <div class="px-3 mt-1">in:</div> <MDBSelect v-model:options="advancedSearchQueryCols" v-model:selected="advancedSearchSelectedValue" :disabled="advancedSearchEdit" multiple /> <MDBBtn outline="primary" size="sm" class="ms-3" @click="searchAdvanced"> <MDBIcon icon="search" /> </MDBBtn> </div> <MDBBtn color="primary" size="sm" class="ms-3" @click="advancedSearchEditorRef?.addRow()" :disabled="advancedSearchEdit" > <MDBIcon icon="plus"/> </MDBBtn> </div> <hr /> <MDBTableEditor v-model:dataset="advancedSearchData" :search="advancedSearchQueryPhrase" :searchColumns="advancedSearchSelectedCols" :entries="5" :entriesOptions="[5, 10, 15]" v-model:edit="advancedSearchEdit" ref="advancedSearchEditorRef" /> </template> <script> import { MDBInput, MDBBtn, MDBIcon, MDBSelect } from "mdb-vue-ui-kit"; import { MDBTableEditor } from "mdb-vue-table-editor"; import { ref } from "vue"; export default { components: { MDBInput, MDBSelect, MDBBtn, MDBIcon, MDBTableEditor }, setup() { const advancedData = 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 advancedSearchEditorRef = ref(null); const advancedSearchQuery = ref(""); const advancedSearchEdit = ref(false); const advancedSearchData = ref(advancedData.value); const advancedSearchQueryCols = ref([ { text: "Company", value: "company" }, { text: "Office", value: "office" }, ]); const advancedSearchSelectedValue = ref(""); const advancedSearchQueryPhrase = ref(""); const advancedSearchSelectedCols = ref([]); const searchAdvanced = () => { advancedSearchQueryPhrase.value = advancedSearchQuery.value; advancedSearchSelectedCols.value = advancedSearchSelectedValue.value.split(","); }; return { advancedData, advancedSearchEditorRef, advancedSearchEdit, advancedSearchData, advancedSearchQuery, advancedSearchQueryCols, advancedSearchSelectedValue, advancedSearchSelectedCols, advancedSearchQueryPhrase, searchAdvanced, } } }; </script> <script setup lang="ts"> import { MDBInput, MDBBtn, MDBIcon, MDBSelect } from "mdb-vue-ui-kit"; import { MDBTableEditor } from "mdb-vue-table-editor"; import { ref } from "vue"; const advancedData = 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 advancedSearchEditorRef = ref<InstanceType<typeof MDBTableEditor> | null>(null); const advancedSearchQuery = ref(""); const advancedSearchEdit = ref(false); const advancedSearchData = ref(advancedData.value); const advancedSearchQueryCols = ref([ { text: "Company", value: "company" }, { text: "Office", value: "office" }, ]); const advancedSearchSelectedValue = ref(""); const advancedSearchQueryPhrase = ref(""); const advancedSearchSelectedCols = ref([]); const searchAdvanced = () => { advancedSearchQueryPhrase.value = advancedSearchQuery.value; advancedSearchSelectedCols.value = advancedSearchSelectedValue.value.split(","); }; </script>Async data
While awaiting data from API, you can prevent a user from interacting with Table Editor by settingloading option totrue.
<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
Theadd() 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>Related resources
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) |
allowEmptyCells | Boolean | false | Allows to add empty cells inaddRow method |
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') |
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 totrue, makes a column stick on the left while scrolling. Changing its value toright will do the same on the other side. For this option to work, you need to definewidth 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. Allows to get the current edited row via parameter. |
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>