react-bootstrap-table / react-bootstrap-table2

Next Generation of react-bootstrap-table
https://react-bootstrap-table.github.io/react-bootstrap-table2/
MIT License
1.27k stars 431 forks source link

Complete custom rendering #169

Open waynebrantley opened 6 years ago

waynebrantley commented 6 years ago

Any thoughts to really opening up how the table is rendered?

For example, the green blocks here https://allenfang.github.io/react-bootstrap-table/example.html are really just a grid. The grid is made of a div with certain styling and the rows may be a div or not while each item is a div. The result is a block layout.

If we could implement a visual display like that with your grid we could easily have <BlockGrid/> and <BootstrapGrid />, <Bootstrap4Grid/>, etc. Where each just provides custom renders for the different parts back to the base. Would give some nice flexibility.

Any thoughts?

AllenFang commented 6 years ago

@waynebrantley it's a good point but I think firstly, we may need to consider to use flex div instead of table element again.

Currently, react-bootstrap-table2 already separate some functionality to other module, I think it will be easier to achieve your requirement. Anyway, maybe you can describe more about the flexibility in your perspective.

thanks!

waynebrantley commented 6 years ago

If you think about it, the data presented on your example page could be in what you call a normal grid. If there were 100s of examples, you might be tempted to pick a grid - so you could get paging, searching ,etc. However, what if you still wanted the blocks? Why not just change how the grid renders so that you can deliver the blocks but still have paging, searching, etc?

If you have the very base grid flexible and do no rendering on its own, but delegate every piece - it would be easy to have a bootstrap-table that was using table elements....and another one bootstrap-blocks that was using flex div or anything else. This requires every part of the rendering to be plugable.

Those are my high level thoughts.