EditableTable

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.

Examples

Default EditableTable example.

import React from "react";
import { CDBEditableTable, CDBCard, CDBCardBody, CDBContainer } from "cdbreact";
export const EditableTable = () => {
  const columns = ["Fullname", "Age", "Company Name", "City", "Country"];
  const data = [
    ["Guerra Cortez", 45, "Insectus", "San Francisco", "USA"],
    ["Elisa Gallagher", 31, "Portica", "London", "United Kingdom"],
    ["Aurelia Vega", 30, "Deepends", "Madrid", "Spain"],
    ["Guadalupe House", 26, "Isotronic", "Berlin", "Germany"]
  ];
  return (
    <CDBContainer>
        <CDBCard>
          <CDBCardBody>
            <CDBEditableTable striped bordered data={data} columns={columns}/>
          </CDBCardBody>
        </CDBCard>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the EditableTable 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 to work with it.

Contrast EditableTable Import Statement

You need to import the Contrast EditableTable component first before using it.

import { CDBEditableTable } from "cdbreact";

API Reference: Contrast EditableTable Properties

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