Vue Bootstrap Table Editable
Vue Table Editable - Bootstrap 4 & Material Design
With Vue 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 API 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>
<mdb-container>
<mdb-card>
<h3 class="card-header stylish-color white-text text-center font-weight-bold text-uppercase py-4">Editable table</h3>
<mdb-card-body>
<mdb-table-editable
:columns="columns"
:rows="rows"
class="text-center"
striped
bordered
responsive
pagination
:display="3"
:entries="5"
/>
</mdb-card-body>
</mdb-card>
</mdb-container>
</template>
<script>
import { mdbTableEditable, mdbCard, mdbCardBody, mdbContainer } from 'mdbvue';
export default {
name: 'TableEditablePage',
components: {
mdbTableEditable,
mdbCard,
mdbCardBody,
mdbContainer
},
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>
Basic example MDB Pro component
<template>
<mdb-container>
<mdb-card>
<h3 class="card-header stylish-color white-text text-center font-weight-bold text-uppercase py-4">Editable table</h3>
<mdb-card-body>
<mdb-table-editable
:columns="columns"
:rows="rows"
class="text-center"
striped
bordered
responsive
pagination
:display="3"
:entries="5"
/>
</mdb-card-body>
</mdb-card>
</mdb-container>
</template>
<script>
import { mdbTableEditable, mdbCard, mdbCardBody, mdbContainer } from 'mdbvue';
export default {
name: 'TableEditablePage',
components: {
mdbTableEditable,
mdbCard,
mdbCardBody,
mdbContainer
},
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>
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>
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
columns |
Array | - |
CSets table's columns | <mdb-editable :columns="columns"/> |
rows |
Array | |
Sets table's rows | <mdb-editable :rows="rows" /> |
bordered |
Boolean | false |
Displays border around table content | <mdb-editable bordered /> |
borderless |
Boolean | false |
Removes border styles | <mdb-editable borderless /> |
dark |
Boolean | false |
Changes table's style to dark background | <mdb-editable dark /> |
pagination |
Boolean | false |
If set to true enables pagination |
<mdb-editable pagination /> |
entries |
Number | 10 |
Determines maximum number of entries displayed on a page | <mdb-editable pagination :entries="20" /> |
display |
Number | 5 |
Sets number of page items in the pagination | <mdb-editable pagination :display="4" /> |
responsive |
Boolean | false |
Enables responsive behavior | <mdb-editable responsive /> |
responsiveSm |
Boolean | false |
Sets rensponsive breakpoint to small device | <mdb-editable responsiveSm /> |
responsiveMd |
Boolean | false |
Sets rensponsive breakpoint to medium device | <mdb-editable responsiveMd /> |
responsiveLg |
Boolean | false |
Sets rensponsive breakpoint to large device | <mdb-editable responsiveLg /> |
responsiveXl |
Boolean | false |
Sets rensponsive breakpoint to extra large device | <mdb-editable responsiveXl /> |
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