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

Question

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.

trixn · Accepted Answer · 2018-07-29 00:54:08Z

1

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.

answered Jul 29, 2018 at 0:54

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related