Rate this docs

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

Editable table

Person Name Age Company Name Country City Sort Remove
Aurelia Vega 30 Deepends Spain Madrid
Guerra Cortez 45 Insectus USA San Francisco
Guadalupe House 26 Isotronic Germany Frankfurt am Main
Elisa Gallagher 31 Portica United Kingdom London

        <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>
        
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
        
        </style>

      

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

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.

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.


      import { mdbTableEditable } from 'mdbvue';

      export default {
        name: 'TableEditablePage',
        components: {
          mdbTableEditable
        },
        ...
      }
  

Next you have to fullfill data()

columns stands for header cells and rows contains your data objects.


    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'
          }
        ]
      }
    }
  

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