Vue Bootstrap Table Editable

Vue Table Editable - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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