CODEWITHSUNDEEP
reactjsreact-bootstrap-table
Alex Hueter
Alex Hueter

Reputation: 11

react-bootstrap-table-next - How do I add delete functionality to the table?

Anyone know how to make it so a react-bootstrap-table-next has a delete and add row functionality? I couldn't find anything in their docs: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html

Eventually hoping to use axios to import data to the table from a NoSQL database and then let someone edit the data in the table and push it to a database.

This is my first question on StackOverflow, any tips appreciated.

Here's what I got so far. It successfully renders a simple table.

 import BootstrapTable from "react-bootstrap-table-next";

import React, { Component } from "react";

const products = [
  {
    id: "1",
    name: "Banana",
    price: "1"
  },
  {
    id: "2",
    name: "Carrot",
    price: "5"
  },
  {
    id: "3",
    name: "Apple",
    price: "4"
  }
];

const columns = [
  {
    dataField: "id",
    text: "Product ID"
  },
  {
    dataField: "name",
    text: "Product Name"
  },
  {
    dataField: "price",
    text: "Product Price"
  }
];

class Table extends Component {
  render() {
    return (
      <div>
        <BootstrapTable
          keyField="id"
          striped
          hover
          data={products}
          columns={columns}
        />
      </div>
    );
  }
}

export default Table;

Hopefully it's pretty easy to do, just can't find it in the docs.

Upvotes: 1

Views: 2585

Answers (1)

trixn
trixn

Reputation: 16309

You do not need to add functionality to the table itself. The BootstrapTable component is already decoupled from its data source. That means that you need to write a component that handles fetching data and passing it as a prop to the BootstrapTable component. Then you can wrap your Table component into that component.

Upvotes: 1

Related Questions