Performance tip for big tables

[crowdwave]

For anyone wanting their table to perform faster!

TLDR: precalculate your dataFormat functions!

I have a complex table with hundreds or thousands of rows and most of the columns have a dataFormat function.

So when the bootstrap table is rendered, a huge number of function calls are executed whilst each row is rendered, and each row needs to go and recalculate the dataFormat function for each cell.

It is less work for the react bootstrap table if you create your table data first, transform all the data into the state that you want it to be, then give it to react-bootstrap-table to render, ideally with no dataFormat column functions.

If the table is rerendered alot this will make it much faster.

I have also asked Allen if it is possible to put JSX into the data field instead of a string. This will make it possible to prerender the component that goes into each cell and then bootstrap table just needs to render it. This would allow for further optimization.

[AllenFang]

The performance now is hard to solve in this repo so that I've plan to rebuild react-bootstrap-table, check this new repo: https://github.com/react-bootstrap-table/react-bootstrap-table2

it's still work in progress, but there's a workaround but I guess the improvement is not very significantly:

try to implement your custom cell as a React Component instead of a JSX/String and implement the shouldComponentUpdate

Anyway, I promise the performance will be solved on react-bootstrap-table2 but I need some time. thanks

[crowdwave]

Hi Allen,

I suggest you consider using immutablejs and redux in the rebuild. immutablejs is the only way to implement shouldComponentUpdate without great pain.

Regarding Redux, since many beginning ReactJS users are uncomfortable with it, suggest also that you do not expose any redux at all outside the component.

Andrew

[AllenFang]

About the immutable.js, I will consider to use it. thanks. But for redux, I think it's not good to integrate a UI component library with redux directly.

[prajapati-parth]

@AllenFang I'm building a UI component library using redux. Why is it not good to integrate it with redux directly?

[AllenFang]

For a UI component itself, it's not good to be aware of redux. I mean a open source UI component shouldn't know the detail of your state management(like: flux, redux, mobx etc), if there're other people who use mobx, he will be hard to use this UI component. You can check all the react component on the github, there're very few React UI components depends on redux.

My opinion is we should focus on component itself, dont care about user how to process their data(State management framework), The wrong thing in react-bootstrap-table is I make BootstrapTable more stateful and mixing too many data operation and remote handling in the component, so for now, BootstrapTable is hard to test and not a stateless component.

in the react-bootstrap-table2 design, you can have a clean stateless component(like remote) and a stateful component(data CRUD in internal). If you use redux or mbox, you can choose to use a stateless BootstrapTable component and I'll help you to handle some async operation too.

Anyway, some people will said I can consider to implement different container for redux or mobx or something, and user can depend on their implementation to chose different container, for example:

I can implement a react-bootstrap-table-redux-connect and mbox-bootstrap-table-redux-connect for all the people, but before those implementation, we should have a clean and stateless component, and it's just React and awareness of any state management technology. After that, it's possible to talk about "How to help user to more easier to connect react-bootstrap-table with redux or mobx".