Questions: Table Pagination buttons are rendering left-aligned

Polaris
1

Table Pagination Button Alignment

I’m using the s-table component with pagination, but the pagination buttons are rendering left-aligned.

Current Code

<s-table
  loading={navigation.state === "submitting" || navigation.state === "loading"}
  paginate={pageInfo.hasNextPage || pageInfo.hasPreviousPage}
  hasNextPage={pageInfo.hasNextPage}
  hasPreviousPage={pageInfo.hasPreviousPage}
  onNextPage={paginationHandlers.onNext}
  onPreviousPage={paginationHandlers.onPrevious}
>
  {/* table content */}
</s-table>

Screenshot

image
image3010×1934 353 KB

Questions

1. Is left-aligned pagination the intended behavior?
2. Is there a way to center-align the pagination buttons? (e.g., a specific property or CSS approach)

Expected Behavior

I would expect the pagination buttons to be centered below the table.

Reference:

2

This is the intended behavior, and isn’t able to be changed. This helps us keep the design of tables consistent for merchants.

3

@Anthony_Frehner

Thank you !

I’m glad to confirm that this layout is intentional.

1 Like