[Feature Request]: Allow smaller pagination component outside of just narrow screens

[ghost]

The problem

I'm working on embedding the data-table and pagination component into our product watsonx Assistant chat. The pagination component has a smaller form factor, but it only appears when the screen size is close to mobile size.

For our use case our chat width is often quite narrow so it would be nice to use the smaller form factor of the component, however there is no good way to switch to the smaller form factor when it's only enabled by using a small screen.

(I'm marking this as high priority because we do have an upcoming release - however I can get around this by using my own css to hide parts of the components just like you guys do at this more narrow breakpoint, I just don't want to rely on that solution long term since it's brittle.)

The solution

Add a prop to the pagination component that can be used to dynamically switch to the smaller form factor. The component could still operate as it does today when this prop is not set in order to not break people who are relying on the screen size breakpoint behavior. With this prop I could make the chat look like this, or if the chat window is larger I could use the original pagination component view:

Examples

I don't have examples but I'm surprised Carbon is taking this approach here. For most components it seems functionality is exposed through props or breakpoints are made based off the parent components width. Setting break points off the screensize may be unexpected by consumers of Carbon if it's not a common pattern.

Application/PAL

watsonx Assistant

Business priority

High Priority = pressing release

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[rsimpso1]

This was opened by me through the wrong account. Commenting here so I will get notified about updates, and so yall have someone to reach out to if you have questions. Thanks!

[sstrubberg]

We need to add a container query. This will need to be done on React and Web Components.