Edit these docs Rate these docs

React Table Editor

React Bootstrap table editable plugin - Bootstrap 4 & Material Design

React MDBootstrap Table Editor plugin is an extension that allows you to add and customize data in Datatables.


Basic example


          import React, { Component } from 'react';
          import { MDBDataTable } from 'mdbreact';
          import MDBTableEditor from 'mdb-react-table-editor';

          class App extends Component {
              state = {
                  data: {
                      columns: [
                          {
                              label: 'Name',
                              field: 'name',
                              sort: 'asc',
                              width: 150
                          },
                          {
                              label: 'Position',
                              field: 'position',
                              sort: 'asc',
                              width: 270
                          },
                          {
                              label: 'Office',
                              field: 'office',
                              sort: 'asc',
                              width: 200
                          },
                          {
                              label: 'Age',
                              field: 'age',
                              sort: 'asc',
                              width: 100
                          },
                          {
                              label: 'Start date',
                              field: 'date',
                              sort: 'asc',
                              width: 150
                          },
                          {
                              label: 'Salary',
                              field: 'salary',
                              sort: 'asc',
                              width: 100
                          }
                      ],
                      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'
                          },
                          {
                              name: 'Airi Satou',
                              position: 'Accountant',
                              office: 'Tokyo',
                              age: '33',
                              date: '2008/11/28',
                              salary: '$162'
                          },
                          {
                              name: 'Brielle Williamson',
                              position: 'Integration Specialist',
                              office: 'New York',
                              age: '61',
                              date: '2012/12/02',
                              salary: '$372'
                          },
                          {
                              name: 'Herrod Chandler',
                              position: 'Sales Assistant',
                              office: 'San Francisco',
                              age: '59',
                              date: '2012/08/06',
                              salary: '$137'
                          }
                      ]
                  }

              }

              render() {
                  return (
                      <MDBTableEditor rows={this.state.data.rows} columns={this.state.data.columns}>
                          <MDBDataTable
                              striped
                              bordered
                              hover
                              data={this.state.data}
                          />
                      </MDBTableEditor>
                  );
              }
          }

          export default App;
        

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

Table Editor - getting started : download & setup


Download

This plugin requires a purchase.

Buy table editor plugin

React MDBTableEditor - API

In this section you will find advanced information about the MDBTableEditor component.


MDBTableEditor import statement

In order to use MDBTableEditor component make sure you have imported proper module first.


        import MDBTableEditor from 'mdb-react-table-editor';
      

        "mdbreact": "^4.15.0",
        "react-router-dom": "^5.0.1"
      

API Reference: Table Editor Properties

The table below shows the configuration options of the MDBTableEditor component.

Name Type Default Description Example
addLabel String Add Sets label of Add button <MDBTableEditor addLabel="add" ... />
cancelLabel String Close Sets label of Close button <MDBTableEditor cancelLabel="close" ... />
columns Array(Object) Adds columns to show and edit in editor modal <MDBTableEditor columns=[{...}] ... />
deleteDesc String Are you sure you want to delete selected row? Sets description of warning when deleting a column <MDBTableEditor deleteDesc="Are you sure?" ... />
deleteLabel String Delete Sets label of Delete button <MDBTableEditor deleteLabel="delete" ... />
editLabel String Edit Sets label of Edit button <MDBTableEditor editLabel="add" ... />
no String No Sets label for deleting buttons <MDBTableEditor no="no" ... />
rows Array(Object) Adds rows to show and edit in editor modal <MDBTableEditor rows=[{...}] ... />
yes String Yes Sets label for deleting buttons <MDBTableEditor yes="yes" ... />

API Reference: Table Editor methods

The table below shows the methods for the MDBTableEditor component.

Name Type Default Description Example
onChange Function Calls callback after changing data <MDBTableEditor onChange={(...) => {...}} ... />