Edit these docs

Vue Bootstrap Table Editable

Vue Table Editable - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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>
Edit these docs

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) About

Setup

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&lt;/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 Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start".

5 min Quick Start

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial