insertRow and deleteRow features for react-bootstrap-table2

[AKokkalas]

trafficstars

Hi I used the previous version of react-bootstrap-table and in the BootstrapTable Props you could add deleteRow={ true } and insertRow ={true} and 2 buttons for each function would appear and could be used.

Does the newest version has these features? I couldn't find anything like that in the examples, docs or storybook .

Although in issue #37 you mention it as it exists and in the main page it seems as they are included

[AllenFang]

@AKokkalas We will implement it soon, sorry that I'm quite busy for my job, so already have delay on react-bootstrap-table2's schedule. Sorry :)

[chrisvoo]

Hi @AllenFang , I'm trying to make it by myself (without modifying your module), so I've just added a button that onClick triggers this function:

    newRow() {
      this.setState((prevState) => {
        const { rows } = prevState;
        const newRows = update(rows, { $push: [{ ssid: '', password: '' }] });
        return { rows: newRows };
      });
    }

The first blank row is correctly inserted into the table, but if I click it again I get a warning and the second blank row isn't added: Warning: flattenChildren(...): Encountered two children with the same key, ``. Child keys must be unique; when two children share a key, only the first child will be used. Do you know how I can overcome this problem? thanks

[chrisvoo]

Ok, I guess I got this because I specified as keyField a column (ssid). I think that if I want to allow the user to add multiple blank lines, I can add an hidden id column with random values to be used as keys. Thanks for your work!

[rub256]

Are some preview about when bootstrap-table2 will have this functionally?

Thanks for your work, you did an awesome module!

[apchandr]

Any update on "insertRow and deleteRow features for react-bootstrap-table2" ?

[NataEn]

Hi, this is my (no redux) suggestion for a table with adding and deleting row functionality. It has some small bugs (that can be easily fixed) but it is simple, and it works. Hope you'll find it useful!

you can also access the code via: https://github.com/NataEn/small_projects

import React, { Component } from "react"; import BootstrapTable from "react-bootstrap-table-next"; import cellEditFactory from "react-bootstrap-table2-editor"; import ToolkitProvider, { CSVExport } from "react-bootstrap-table2-toolkit"; import "./App.css";

const { ExportCSVButton } = CSVExport; const pricesData = [ { id: "1", fruit: "banana", price: "10" }, { id: "2", fruit: "apple", price: "20" }, { id: "3", fruit: "orange", price: "15" } ];

class App extends Component { constructor(props) { super(props); this.state = { data: [...pricesData] }; this.prices = this.prices.bind(this); }

prices = action => { if (!action) { return this.state.data; } else { switch (action.actionType) { case "addRow": let newRow = {}; newRow.id = this.state.data.length + 1; newRow.fruit = " "; newRow.price = " "; this.setState({ data: [...this.state.data, newRow] }); return this.state.data; case "deleteRow": //this delets different rows only let new_state = this.state.data.filter( row => row.id !== action.row || row.fruit !== action.fruit );

      this.setState({ data: [...new_state] });
      return this.state.data;
    default:
      return this.state.data; }}};

render() { return ( <div className="App"> <RenderExpenseTable data={this.state.data} prices={this.prices} /> ); }}

class RenderExpenseTable extends Component { constructor(props) { super(props); this.state = { data: [...this.props.data] }; } componentWillMount() { if (!this.state.data.length) { this.setState({ data: [...this.props.prices({ action: "data" })] }); } }

render() { let tableData = this.state.data; if (JSON.stringify(this.props.data) === JSON.stringify(tableData)) { console.log("in rendered table components the new data is: updated "); } else { console.log("in rendered table components the new data is: not updated "); tableData = this.props.data;} const columns = [ {dataField: "id", text: "Id"}, { dataField: "fruit", text: "Fruit Name" }, { dataField: "price", text: "Fruit Price" }, {dataField: "databasePkey", text: "", editable: false, formatter: (cell, row) => { if (row) return ( <button className="btn btn-danger btn-xs border-secondary rounded" onClick={() => { this.setState(this.state.data, () => { this.props.prices({ actionType: "deleteRow", row: row.id, fruit: row.fruit });});}}> Delete Row ); return null;}} ];

return (
  <div xs={12} className="col form">
    <ToolkitProvider
      keyField="id"
      data={tableData}
      columns={columns}
      exportCSV>
      {props => (
        <div>
          <div className="d-flex justify-content-around p-2">
            <ExportCSVButton
              className="text-light btn bg-success border-secondary rounded"
              {...props.csvProps}>
              <span>Export CSV</span>
            </ExportCSVButton>
            <button
              className="btn bg-success text-light rounded"
              onClick={() =>
                this.setState(tableData, () => {
                  this.props.prices({ actionType: "addRow" });
                }) }  >
              Add Row
            </button>
          </div>
          <BootstrapTable
            {...props.baseProps}
            keyField="id"
            data={tableData}
            columns={columns}
            cellEdit={cellEditFactory({
              mode: "click",
              onStartEdit: (row, column, rowIndex, columnIndex) => {},
              beforeSaveCell: (oldValue, newValue, row, column) => {
                if (column.dataField === "price") {
                  if (isNaN(Number(newValue))) {
                    alert(
                      "You entered " +
                        newValue +
                        " Please Enter numbers Only!!"
                    ); } } },
              afterSaveCell: (oldValue, newValue, row, column) => {}
            })} />
        </div>
      )}
    </ToolkitProvider>
  </div>); }}

export default App;

[mferilight]

Hi @AllenFang

I am also in need of a option to insert rows with in table. I don't want to use the modal way of inserting rows. is this feature currently available in react-bootstrap-table2

[MathijsHaas]

Inserting and deleting rows would be really helpful :).

[SafiaNuzhath]

@AllenFang Would definitely love a delete and add functionality

[HZSamir]

Any news on this feature?

[luizabentivoglio]

any news @AllenFang about this part? Can I ask you, is not a problem if I install the previous version of react-bootstrap-table for doing this feature? Thank you

[yenicelik]

same need here

[haseebsaif]

Any update on this?

[boldham31]

Any updates?