Expose 'Add' and 'Delete' button through refs.

[invalidred]

Hi Allen,

Is it possible to access 'Add' and 'Delete' buttons through refs?

This would be really useful to add custom events and interactions with the button.

[AllenFang]

@invalidred, I thinks its ok, but these button is a little deep in component hierarchy. so how about just give you a click callback hook for you?
btw, what's custom events or interaction did you expect on it?

[invalidred]

As for the custom events that I had in mind, Add button click for example, I dont want to use the default Add UI that comes up, rather load some other page when it's clicked.

[AllenFang]

@invalidred, if you want a customize UI for adding new row. I suggest dont use embedded insertRow, just custom one by yourself, include button and popup modal.

[invalidred]

Hi Allen,

How about a compromise. Just like you have a handleConfirmDeleteRow() that has next parameter passed to it, where if you call next() then the row is deleted. Similarly can we have handleConfirmAddRow() that has next parameter, and if we call next() then it shows the add UI.

This would be a big help.

[AllenFang]

@invalidred, I've already consider this solution at before.
Because you hope click the insert button will popup a custom modal, but I can't give you a handleConfirmAddRow to let you achieve it. Why?

Because the insert modal popup by data-toggle & data-target, not listen a click event. So I can't control it, it controlled by bootstrap. Even if I provide a handleConfirmAddRow for you, the modal still popup always. So that's why I suggest you if you want to use a custom modal for insertion, custom a insert button and modal by yourself is best solution

Anyway, I can control the popup modal programmatic, but It's necessary to use jQuery in react-bootstrap-table directly, But I don't want to do that, it'll break something and it's not a good pattern in React.js

BTW, that's why I can support handleConfirmDeleteRow, because there's no any modal pop which controlled by bootstrap.

Hope I can answer your question, feel free to discuss with me for the other solution 👍
Thanks :)

[martinpinto]

Hi @AllenFang I just upgraded to the 3.0.0 dev branch. Main reason: I need a custom add button without a modal popup. This button would simply insert a new empty row. I've seen you crossed out the "Insert button customizable" and "Insert modal customizable" checkboxes. Could you please show us a concrete example how to implement a custom button that just inserts a new empty row? Thanks :)

[AllenFang]

Hi @martinpinto, in my opinion, if you want a add button without a modal popup, I'll suggest you add this button in your component render:

render() {
  return(
    <div>
         <button>add</button>
         <BootstrapTable>
            //...
         </BootstrapTable>
    </div>
  );
}

Above example it a very simple case, but you you enable the search, deleteRow, exportCSV etc., the above case will not be good, because there will be a toolbar(div) uppon the table.

so in this case, if you use the branch of v3.0.0-dev, you can check this example.

watch out, if you dont want the popup, just dont call the onClick callback function!

[martinpinto]

Hi @AllenFang thanks so much for the reply! such a quick response, that is awesome! I tried the examples out and unfortunately they don't seem to be working. I still get the modal window.

[invalidred]

Hi @martinpinto

I had a similar problem and here is how i solved the issue. Let me know if you want me to explain this code with more details, or how to use it.

import ReactDOM from 'react-dom';
import { BootstrapTable as bt, TableHeaderColumn } from 'react-bootstrap-table';

// The class below is a wrapper around react-bootstrap-table library and overrides
// the Add button click event in the toolbar which launches a form.
// We want to override that behaviour by calling props.options.onAdd event handler
class BootstrapTable extends bt {
  componentDidMount() {
    super.componentDidMount();
    const { onAdd } = this.props.options || {};
    const dom = ReactDOM.findDOMNode(this);
    const addButton = dom.getElementsByClassName('react-bs-table-add-btn')[0];
    if (addButton) {
      addButton.onclick = function onclick(event) {
        event.stopPropagation();
        onAdd();
      };
    }
  }

  render() {
    return super.render({ ...this.props });
  }
}

export {
  BootstrapTable,
  TableHeaderColumn
};

[martinpinto]

Thank you! That did help and the onAdd() function (in the example it's the createCustomInsertButton function) gets called. However I get a

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

when calling the createCustomInsertButton as in the example.

[AllenFang]

@martinpinto, how about showing your example? Make it as simple as possible so that I can test on my local :)

[martinpinto]

Hi, yes of course :) This is the code: https://gist.github.com/martinpinto/5acc1cf47b761eb2be57a30479f92996
As you can see this is a basically copy paste of the example.

[invalidred]

@martinpinto left you a comment in your gist. The code sample I provided was to override the onAdd() method triggered by the default addButton. I am not sure about replacing the add Button with your own custom button. However the suggestion on your gist may help you out regardless.

[AllenFang]

@martinpinto https://gist.github.com/martinpinto/5acc1cf47b761eb2be57a30479f92996#gistcomment-1916642

BTW, thank @invalidred's helping 👍