React Table Editable

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

Basic example

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 
        
            
            import React from "react";
            import { MDBCard, MDBCardHeader, MDBCardBody, MDBTableEditable } from "mdbreact";
  
            const columns = ["Person Name", "Age", "Company Name", "Country", "City"];
  
            const data = [
              ["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"]
            ];
  
            const TableEditablePage = props => {
              return (
                <MDBCard>
                  <MDBCardHeader tag="h3" className="text-center font-weight-bold text-uppercase py-4">
                    Table Editable
                  </MDBCardHeader>
                  <MDBCardBody>
                    <MDBTableEditable data={data} columns={columns} striped bordered />
                  </MDBCardBody>
                </MDBCard>
              );
            };
  
            export default TableEditablePage;

React Table Editable - API

In this section you will find advanced information about the Table Editable component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Table Editable import statement

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

        
            
            import { MDBTableEditable } from 'mdbreact';

Table Editable PropTypes

The table below shows the configuration options of the Table Editable component.

Name Type Default Description Example
bordered Boolean false Adds borders on all sides of the table and cells. <MDBTableEditable bordered ... />
className String Adds custom class to TableEditable component <MDBTableEditable className="myClass" ... />
columns Array Specify headers and number of columns <MDBTableEditable columns={['Person Name', 'Age', 'Company Name']} ... />
data Array Binds your data into the component. <MDBTableEditable data = {['Aurelia Vega', 30, 'Deepends']} ... />
hover Boolean Enables a hover state on table rows within a table body. <MDBTableEditable hover ... />
small Boolean Makes tables more compact by cutting cell padding in half. <MDBTableEditable small ... />
striped Boolean Adds zebra-striping to any table row within the table body <MDBTableEditable striped ... />
responsive Boolean Makes table responsive across all viewports <MDBTableEditable responsiveLg ... />
responsiveLg Boolean Makes table responsive up to the lg brakepoint <MDBTableEditable responsiveLg ... />
responsiveMd Boolean Makes table responsive up to the medium brakepoint <MDBTableEditable responsiveMd ... />
responsiveSm Boolean Makes table responsive up to the small brakepoint <MDBTableEditable responsiveSm ... />
responsiveXl Boolean Makes table responsive up to the xl brakepoint <MDBTableEditable responsiveXl ... />

API Reference: TableEditable Methods

Name Parameters Description Example
getValue event Method called on input change event; returns value of edited table. <MDBTableEditable getValue={ value => console.log(value) } ... />
onChange event This method returns a object with changed data of MDBTableEditable element <MDBTableEditable onChange={ value => console.log(value) } ... />