Expandable Rows

[sugargreenbean]

Looking for a way to click on a row or an icon within a column and then it expands with more information about that row. Something similar to this: http://daviferreira.github.io/react-sanfona/ or this http://mandarinconlabarba.github.io/react-tree-menu/example/index.html

As the table seems to only expose columns, I have no idea how to customize rows. Thank you for any help!

[madeinfree]

Hi, @sugargreenbean I discussion this feature with @AllenFang recently, it sound a good idea,but we have to observation and plan this feature. maybe we can achieve it.

[AllenFang]

@sugargreenbean, I thinks it's a nice feature for react-bootstrap-table, but it actually need some time to do it. Hope we can support this feature in near future

[sugargreenbean]

Ok, good to hear! Meanwhile, I am working on this. I see that the rows are generated as
<tr className="foo" data-reactid="..."> Where is this being generated? I thought it was in TableRow.js, but can't seem to change what is in the tr tag, as in I want the tag to say <tr ClassName="foo" data-reactid="..." data-toggle="collapse">

[AllenFang]

@sugargreenbean, yes, it is in TableRow.js, I think it can be changed by some flag, for a roughly example:

const content = this.props.enableExpand ? this.renderExpandContent() : this.props.children;

However, I think expand row is a little hard to implement, maybe we can discuss more on it.

[sugargreenbean]

This is what I have currently tried:
Following this: http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
I am trying to add to a current selected row tr tag:
data-toggle="collapse" data-target="#foo"
And then be able to add a row underneath current selected row with handleAddRow. Then I want to customize this Row to not look like a row and populate with extra info about the row.

[sugargreenbean]

Sorry, I updated my 2nd comment with proper styling so you can see my code examples which were not previously viewable.

[AllenFang]

data-reactid is generated by React, className is generated by trCss, you can check here.

I thinks you can just render data-toggle="collapse" data-target="#foo" by some flag. Hope I answer your question. BTW, what's means for And then be able to add a row underneath current selected row with handleAddRow.
How about tell you plan for supporting this feature? Thanks :)

[sugargreenbean]

Currently in TableBody.js, for var tableRows, instead of
<TableRow>...</TableRow>, I return [<TableRow>....</TableRow>, <tr id="hiddenRow"><td class="hiddenData">...</td></tr>]. This creates a sibling row with the original row that can be populated with whatever you want to put in it. Then, in TableRow.js, I've added data-toggle="collapse" and data-target="#hiddenRow" class=accordion-toggle"> , which call a Jquery action. When clicked, it will show the hidden row.

[sugargreenbean]

This creates a desired accordion of expandable rows, however I still need to figure out how to give each row a unique identifier so that when they are clicked they only show/close the associated sibling row.

[sugargreenbean]

I'm also not sure how to wire it so that accordion is a flagged option with this table. The way I have written this, the accordion is mandatory.

[AllenFang]

@sugargreenbean, maybe be you can give me your repo and point where need to help, I think I can give some suggestion. BTW, we've plan to do this feature in near future. :)

[sugargreenbean]

Thank you for your help. The only thing I want to do is to use react bootstrap table inside my own project with my modifications, how can I do that? My project is pointing to this Github repo.

[AllenFang]

if you fork my repo to yours and modify on it. You can point to your repo by git repo link, likes: github:AllenFang/react-bootstrap-table. I dont try it on my project but just saw somebody used it

[lioralt]

@sugargreenbean ,
did you fork this repo in order to work on the expandable rows ?

thanks !

[sugargreenbean]

@lioralt Hi, I worked on this for a while, but trying to create 2 children from the same parent with an array where 1st element would be the row and the 2nd element would be the row details returned nondeterministic errors regarding the way React tries to assign its unique react ID's to each DOM. As such, I stopped working on it.

[kwent]

Also looking forward for this feature !

[thevangelist]

Any updates?

[AllenFang]

in v2.6.0, we support expand row, check example. We will update document in these day

[9005]

Row Expand is not working for me. I have v3,4,5.Below is code.
isExpandableRow(row){
if(row.paxNumber != "-"){
return true;
}else{
return false;
}
}
<BootstrapTable expandableRow={ this.isExpandableRow } />

Need help!!