Expand component rendered at table construction?

[RichardYang2016]

Hi there,

So the scenario is, in my redux store I have a node for data of current expanded row, and all rows are expandable.

In debug I find that, such component are constructed for each and every row of the table, even if the row is not expanded. Plus, my redux node of current opened row are rendered to all components for the rows. Only difference is the components are hidden except the current selected row.

Is there a way to not render all those expand components at the construction of the table itself, but rather render it and destruct it every time I expand/collapse a row?

Thanks, Richard.

[AllenFang]

did you means you want to render the expanding content when the row is expanded? and destroy is when it collapse?

[RichardYang2016]

@AllenFang Hi Allen
Actually I did achieve my goal by moving the API call to onSelect event, and compare id of the row to the fetched id to only render subcomponent for the current expanded row.

but this brings another small issue, when click the row again to collapse, the API is triggered again. I don't see any information in the documentation that I can get indicators from any event to tell if a row is expanded or collapsed. for example, properties like row.expanded. This could be a good enhancement if currently not supported.

Thanks, Richard.

[AllenFang]

I think use onSelect is also a workaround, but not the best solution and maybe I can support a hook function for you, called onExpand or something. i think it's much intuitive for developer

[RichardYang2016]

That would be great Allen! Thanks a lot !

Regards, Richard.

[AllenFang]

hello @RichardYang2016, check this, I support the options .onExpand on v3.3.5.

[RichardYang2016]

Thank you so much Allen!

[zillerium]

I am getting a similar issue with the expand causing the expandComponent to be accessed for every row regardless of whether the user clicked expand or now. How is the onExpand implemented? Here is my code - https://github.com/zillerium/zmes/tree/master/zmes/src

[AllenFang]

Hey fork, I've no time to check your repo, it too big to me, give me the point or check this example, thanks

[zillerium]

Fork the entire repo for asking a question?

[RichardYang2016]

obviously he actually meant 'folk'... don't be panic.

anyway I do recommend you looking at the example provided. put a event handler for onExpand in place and put a debug point to look at the event itself you should be able to figure out how to use it. It does solve my problem earlier. pretty neat.

[eyalap]

@zillerium @RichardYang2016
I experienced the same thing and ended up doing something similar to what Allen suggested.
I had a heavy component rendered in my expanded component and with a table of 50 rows it already got slow.
This way I can have multiple expanded rows with data, and even tough I still have a component rendered to the DOM it's an empty component which is cheap.
I still think it should be the default behavior and managed internally in the component and not like this.

this.state = {
expanding: {},
}

handleExpand(rowKey, isExpand, e) {
if (isExpand) {
const newExpandingKeys = this.state.expanding;
newExpandingKeys[rowKey] = true;
this.setState({
expanding: newExpandingKeys,
})
} else {
const newExpandingKeys = this.state.expanding;
delete newExpandingKeys[rowKey];
this.setState({
expanding: newExpandingKeys,
})

}

}

expandComponent(row) {
return this.state.expanding[row._key] ? this.props.expandComponent(row) : null
}

const options = {
onExpand: this.handleExpand,
};

<BootstrapTable ...... expandComponent={this.expandComponent} >

[kevin-daniel-hunt]

Rendering every expanded column at table construction and not rendering the expansion when the row is expanded is incredibly unintuitive and will cause serious load-time issues for me as well. Is there still no workaround, implementation, or fix?