React Bootstrap Table Editor

React Table Editor - 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

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;

Table Editor - getting started : download & setup

Download

This plugin requires a purchase.

Buy table editor plugin

React Table Editor - 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={(...) => {...}} ... />