feat(ui): add showPaginationLabel prop to TablePagination (#33552)

* feat(ui): add showPaginationLabel to type definitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* feat(ui): wire showPaginationLabel through useTable and Table

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* feat(ui): conditionally render pagination label based on showPaginationLabel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* chore(ui): add changeset and update API reports for showPaginationLabel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* Update .changeset/show-pagination-label.md

Co-authored-by: Johan Persson <johanopersson@gmail.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* docs(ui): document showPaginationLabel prop in docs-ui

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* fix(ui): wrap component names in backticks in changeset

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* fix(ui): move pagination display options to inner useMemo dependency array

Move showPageSizeOptions, getLabel, and showPaginationLabel from the
outer useMemo dependency array to the inner pagination useMemo
dependency array so that changes to these options correctly trigger
a new pagination object reference.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

* chore(ui): remove backticks from changeset

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* Revert "chore(ui): remove backticks from changeset"

This reverts commit 9b7f8bb6e83c28587219b7734676b1c062661a8a.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

---------

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Johan Persson <johanopersson@gmail.com>

.changeset/show-pagination-label.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added `showPaginationLabel` prop to `TablePagination` and `useTable` pagination options. When set to `false`, the pagination label (e.g., "1 - 20 of 150") is hidden while navigation controls remain visible. Defaults to `true`.
+
+**Affected components:** `TablePagination`, `useTable`

docs-ui/src/app/components/table/props-definition.tsx

@@ -50,7 +50,8 @@ export const useTableOptionsPropDefs: Record<string, PropDef> = {
     description: (
       <>
         Pagination configuration including <Chip>pageSize</Chip>,{' '}
-        <Chip>pageSizeOptions</Chip>, and <Chip>initialOffset</Chip>.
+        <Chip>pageSizeOptions</Chip>, <Chip>initialOffset</Chip>, and{' '}
+        <Chip>showPaginationLabel</Chip>.
       </>
     ),
   },
@@ -413,6 +414,12 @@ export const tablePaginationPropDefs: Record<string, PropDef> = {
     values: ['(props) => string'],
     description: 'Custom function to generate the pagination label text.',
   },
+  showPaginationLabel: {
+    type: 'boolean',
+    default: 'true',
+    description:
+      'Whether to display the pagination label (e.g., "1 - 20 of 150"). When false, only navigation controls are shown.',
+  },
 };
 
 // =============================================================================

packages/ui/report.api.md

@@ -1959,6 +1959,7 @@ export interface PaginationOptions
       | 'onPreviousPage'
       | 'showPageSizeOptions'
       | 'getLabel'
+      | 'showPaginationLabel'
     >
   > {
   // (undocumented)
@@ -2618,6 +2619,9 @@ export const TablePaginationDefinition: {
       readonly default: true;
     };
     readonly getLabel: {};
+    readonly showPaginationLabel: {
+      readonly default: true;
+    };
   };
 };
 
@@ -2638,6 +2642,7 @@ export type TablePaginationOwnProps = {
     offset?: number;
     totalCount?: number;
   }) => string;
+  showPaginationLabel?: boolean;
 };
 
 // @public (undocumented)

packages/ui/src/components/Table/components/Table.tsx

@@ -272,6 +272,7 @@ export function Table<T extends TableItem>({
           onPageSizeChange={pagination.onPageSizeChange}
           showPageSizeOptions={pagination.showPageSizeOptions}
           getLabel={pagination.getLabel}
+          showPaginationLabel={pagination.showPaginationLabel}
         />
       )}
     </div>

packages/ui/src/components/Table/hooks/types.ts

@@ -56,6 +56,7 @@ export interface PaginationOptions
       | 'onPreviousPage'
       | 'showPageSizeOptions'
       | 'getLabel'
+      | 'showPaginationLabel'
     >
   > {
   initialOffset?: number;

packages/ui/src/components/Table/hooks/useTable.ts

@@ -41,6 +41,7 @@ function useTableProps<T extends TableItem>(
     onNextPage: onNextPageCallback,
     onPreviousPage: onPreviousPageCallback,
     getLabel,
+    showPaginationLabel,
   } = paginationOptions;
 
   const previousDataRef = useRef(paginationResult.data);
@@ -74,6 +75,7 @@ function useTableProps<T extends TableItem>(
       },
       showPageSizeOptions,
       getLabel,
+      showPaginationLabel,
     }),
     [
       paginationResult.pageSize,
@@ -88,6 +90,9 @@ function useTableProps<T extends TableItem>(
       onNextPageCallback,
       onPreviousPageCallback,
       onPageSizeChangeCallback,
+      showPageSizeOptions,
+      getLabel,
+      showPaginationLabel,
     ],
   );
 
@@ -106,8 +111,6 @@ function useTableProps<T extends TableItem>(
       isStale,
       paginationResult.error,
       pagination,
-      showPageSizeOptions,
-      getLabel,
       sortState,
     ],
   );

packages/ui/src/components/TablePagination/TablePagination.tsx

@@ -66,6 +66,7 @@ export function TablePagination(props: TablePaginationProps) {
     onPageSizeChange,
     showPageSizeOptions,
     getLabel,
+    showPaginationLabel,
   } = ownProps;
 
   const labelId = useId();
@@ -90,6 +91,8 @@ export function TablePagination(props: TablePaginationProps) {
 
   const hasItems = totalCount !== undefined && totalCount !== 0;
 
+  const showLabel = hasItems && showPaginationLabel !== false;
+
   let label = `${totalCount} items`;
   if (getLabel) {
     label = getLabel({ pageSize: effectivePageSize, offset, totalCount });
@@ -121,7 +124,7 @@ export function TablePagination(props: TablePaginationProps) {
         )}
       </div>
       <div className={classes.right}>
-        {hasItems && (
+        {showLabel && (
           <Text as="p" variant="body-medium" id={labelId}>
             {label}
           </Text>
@@ -133,7 +136,7 @@ export function TablePagination(props: TablePaginationProps) {
           isDisabled={!hasPreviousPage}
           icon={<RiArrowLeftSLine />}
           aria-label="Previous table page"
-          aria-describedby={hasItems ? labelId : undefined}
+          aria-describedby={showLabel ? labelId : undefined}
         />
         <ButtonIcon
           variant="secondary"
@@ -142,7 +145,7 @@ export function TablePagination(props: TablePaginationProps) {
           isDisabled={!hasNextPage}
           icon={<RiArrowRightSLine />}
           aria-label="Next table page"
-          aria-describedby={hasItems ? labelId : undefined}
+          aria-describedby={showLabel ? labelId : undefined}
         />
       </div>
     </div>

packages/ui/src/components/TablePagination/definition.ts

@@ -52,5 +52,6 @@ export const TablePaginationDefinition =
       onPageSizeChange: {},
       showPageSizeOptions: { default: true },
       getLabel: {},
+      showPaginationLabel: { default: true },
     },
   });

packages/ui/src/components/TablePagination/types.ts

@@ -37,6 +37,7 @@ export type TablePaginationOwnProps = {
     offset?: number;
     totalCount?: number;
   }) => string;
+  showPaginationLabel?: boolean;
 };
 
 /** @public */