What problem does this feature solve?

In Ant Design tables with large datasets and pagination, the pagination component can appear:

• Misplaced: Ending with empty space below the table when there's room for more rows.
• Overflowing: Pushing content below the table viewport when space is limited.

What does the proposed API look like?

Proposed Solution:

Implement a new feature for the Table component that dynamically adjusts the number of displayed rows based on available space in the parent container. This can be achieved using the useRef hook in React to get the table's height and the parent container's viewport height.

Implementation:

• Introduce a new prop for the Table component, for example, dynamicRowAdjustment . This prop can be a boolean, by default it will be false
• Utilize useRef to create a reference to the table element. Within the component lifecycle methods (e.g., componentDidMount or componentDidUpdate), calculate the available space in the parent container by subtracting the table's height from the viewport height.
• Based on the available space and a configurable threshold (e.g., minimum row height), adjust the number of rows displayed in the table. This could involve modifying the pageSize prop of the pagination or manipulating the data source directly.