How to expand the table data on clicking on Show More button in Ant Design (React.js)?

Question

Are there any ways to expand the table data to show more rows. The official Ant design document was not very helpful for this requirement as they have the instance only for the row expansion. But I need to expand the whole table upon clicking on some sort of "Show More" like button. Really appreciate the help.

Table before expansion

Table After clicking on the Show More Button

Answer 1

1. First make hidden the part you want to show with clicking and use hooks for that, such as true and false.
2. You can add values to table and remove with toggle logic like vanilla js