Vue Bootstrap Table editable
Vue Table editable - Bootstrap 4 & Material Design
With Editable Bootstrap Table, you can add and remove rows and change text and information within cells. In-place editing on your website - based on JavaScript - is now easier and quicker.
To start working with editable table see "Getting Started" tab on this page.
Note: Table editable integration is available from version 4.5.0 (released 30.07.2018).
Basic example MDB Pro component
<template>
<div class="container">
<div class="card">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
<div class="card-body">
<mdb-table-editable
:columns="columns"
:rows="rows"
class="text-center"
striped
bordered/>
</div>
</div>
</div>
</template>
<script>
import { mdbTableEditable } from 'mdbvue';
export default {
name: 'TableEditablePage',
components: {
mdbTableEditable
},
data() {
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Position',
field: 'position',
},
{
label: 'Office',
field: 'office',
},
{
label: 'Age',
field: 'age',
},
{
label: 'Start date',
field: 'date',
sort: 'asc'
},
{
label: 'Salary',
field: 'salary',
}
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$320'
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
age: '63',
date: '2011/07/25',
salary: '$170'
},
{
name: 'Ashton Cox',
position: 'Junior Technical Author',
office: 'San Francisco',
age: '66',
date: '2009/01/12',
salary: '$86'
},
{
name: 'Cedric Kelly',
position: 'Senior Javascript Developer',
office: 'Edinburgh',
age: '22',
date: '2012/03/29',
salary: '$433'
}
]
};
}
}
</script>
Advanced table options
For advanced options of the tables have a look at specific documentation pages listed below.
Tables with additional elements and customization options
Tables with buttons, checkboxes, icons, panels & more.
Table responsive
Advanced options of responsive tables
Datatables
MDBootstrap integration with the most popular plugin enhancing the possibilities of standard tables.
Table pagination
Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.
Table search
MDBootstrap search box enables super fast searching among all the data of the table.
Table sort
This functionality lets you sort the data of the tables according to any specific columns.
Table scroll
If your table is too long or too wide you can limit its size and enable scroll functionality.
Table editable
Table editable allows you to edit existing data within the table and add new data to the table.
Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download
Tables - getting started : download & setup
Download
All the components and features are part of MDBootstrap for Vue package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4 with Vue.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Vue version Download MDBootstrap (Vue version) AboutSetup
After downloading and extracting MDB package, import mdbTableEditable component in your App.vue file.
<script>
import { mdbTableEditable } from 'mdbvue';
export default {
name: 'TableEditablePage',
components: {
mdbTableEditable
},
//...
}
</script>
Next you have to fullfill data()
columns stands for header cells and rows contains your data objects.
<script>
import { mdbTableEditable } from 'mdbvue';
export default {
name: 'TableEditablePage',
components: {
mdbTableEditable
},
data() {
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Position',
field: 'position',
},
{
label: 'Office',
field: 'office',
},
{
label: 'Age',
field: 'age',
},
{
label: 'Start date',
field: 'date',
sort: 'asc'
},
{
label: 'Salary',
field: 'salary',
}
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$320'
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
age: '63',
date: '2011/07/25',
salary: '$170'
},
{
name: 'Ashton Cox',
position: 'Junior Technical Author',
office: 'San Francisco',
age: '66',
date: '2009/01/12',
salary: '$86'
},
{
name: 'Cedric Kelly',
position: 'Senior Javascript Developer',
office: 'Edinburgh',
age: '22',
date: '2012/03/29',
salary: '$433'
}
]
}
}
}
</script>
Last step: use mdb-datatable within template with props passed to it.
<template>
<div>
<h1>Datatable basic example</h1>
<br />
<mdb-table-editable
:columns="columns"
:rows="rows"
class="text-center"
striped
bordered
/>
</div>
</template>
MDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start".
5 min Quick StartCompilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorial