Rate this docs

React Bootstrap Table Editable MDB Pro component

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


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 { Card, CardHeader, CardBody, TableEditable } 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 (
    <Card>
      <CardHeader
        tag="h3"
        className="text-center font-weight-bold text-uppercase py-4"
      >
        Table Editable
      </CardHeader>
      <CardBody>
        <TableEditable data={data} columns={columns} striped bordered />
      </CardBody>
    </Card>
  );
};

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