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

Introduction
Basic example

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

JS
Dependencies


        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={(...) => {...}} ... />`