Modal insertRow

[khaledbk]

Hi, Is there any other options for adding rows without using a modal ? actually im using the table on a modal where i have already a form to add rows on it , but i would like to keep using the 'insertRow' prop also to add a custom default rows only ? ... And for : <TableHeaderColumn width='100' dataField='target' editable={ { type: 'select', options: { values: targets } } }>Target</TableHeaderColumn> <TableHeaderColumn width='100' dataField='condition' editable={ { type: 'select', options: { values: conditions } } }>Condition</TableHeaderColumn> I m looking for a conditional select , if i select a target[x] i had to select only conditions for this current target selected ? because now i can show all these conditions and not only conditions for target[x] selected for example ..

[AllenFang]

Is there any other options for adding rows without using a modal

we only have modal as built-in solution, but you can just update the state by yourself to insert a new row. I mean, don't use insertRow, you can custom anything on your modal and update state when new row coming,

I m looking for a conditional select , if i select a target[x] i had to select only conditions for this current target selected ? because now i can show all these conditions and not only conditions for target[x] selected for example ..

sorry, we dont have ability to do this, we only have this kind of feature for cell edit. I can try to improve it but need some time, thanks

[khaledbk]

Thanks for the answers

[janpauldahlke]

Hello Allen, and thanks for all the afford you put into this project. Its great to use and well documented.

I stumpled upon this, because i am looking for a way to add/insertRow with a button, BUT without opening a modal or else. My User-Storie tells me:

add new Row -> adds new editable Row for items

how can this possibly be achieved? i read https://github.com/AllenFang/react-bootstrap-table/blob/v3.0.0-dev/examples/js/custom/insert-button/default-custom-insert-button.js but iam missing the function call // add newRow. Can you provide a little hint or example on this. Would be so great.

best regards from hamburg

edit: i forked your repo and now trying to use the handleSaveBtnClick from /toolbar/InsertModal on the InsertButton itself. wish me luck :-)

[AllenFang]

@janpauldahlke good question, but unfortunately, there's no way to append a new editable row in the last when clicking the insert row button.

However, I'll implement this kind of feature on react-bootstrap-table2, for you case, I know there're hundred way that people ask me if change a way to insert row lol

I can promise this feature can be implement on react-bootstrap-table2. thanks 👍

[janpauldahlke]

hi Allen, and thanks for replying. I decided to go the way with some 'fake' element right below your table. Iam just copying the css and applying changes to state. collect state -> action to props -> rerender shows the item in your table.

<BootstrapTable
  data={//usual foo_}
  cellEdit={this.cellEditProp as any}
>
  <TableHeaderColumn dataField="id" isKey>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="description">Beschreibung</TableHeaderColumn>
  <TableHeaderColumn dataField="quantity">Menge</TableHeaderColumn>
  <TableHeaderColumn dataField="price">Preis</TableHeaderColumn>
  <TableHeaderColumn dataField="discountValue">DiscountValue</TableHeaderColumn>
  <TableHeaderColumn dataField="action" dataFormat={this.removeItemRow} width="80" editable={false}>action</TableHeaderColumn>
</BootstrapTable>

<AddRowElement counter={counter} handleClick={this.getDropDownValue.bind(this)} itemDesc={this.state.itemDescription} />

Have fun coding the table2 and best wishes ;-)

[zeusbangayan]

Hi @AllenFang , what is the function to insert a row? I need to insert a row manually without the modal amd the insertRow props. I wanted to trigger the insert in my own button.. thanks!

[mferilight]

Hi @AllenFang @zeusbangayan
is the function already available to insert the row without modal in react-bootstrap-table2. If so please let met know what the function is