From d0f055f9499514a828c14db2e9ae335f0d8592b4 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Wed, 25 Mar 2026 09:21:55 +0000 Subject: [PATCH] feat(ui): add showPaginationLabel prop to TablePagination (#33552) * feat(ui): add showPaginationLabel to type definitions Co-Authored-By: Claude Opus 4.6 (1M context) Signed-off-by: Jonathan Roebuck * feat(ui): wire showPaginationLabel through useTable and Table Co-Authored-By: Claude Opus 4.6 (1M context) Signed-off-by: Jonathan Roebuck * feat(ui): conditionally render pagination label based on showPaginationLabel Co-Authored-By: Claude Opus 4.6 (1M context) Signed-off-by: Jonathan Roebuck * chore(ui): add changeset and update API reports for showPaginationLabel Co-Authored-By: Claude Opus 4.6 (1M context) Signed-off-by: Jonathan Roebuck * Update .changeset/show-pagination-label.md Co-authored-by: Johan Persson Signed-off-by: Jonathan Roebuck * docs(ui): document showPaginationLabel prop in docs-ui Co-Authored-By: Claude Opus 4.6 (1M context) Signed-off-by: Jonathan Roebuck * fix(ui): wrap component names in backticks in changeset Co-Authored-By: Claude Opus 4.6 (1M context) Signed-off-by: Jonathan Roebuck * 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) Signed-off-by: Jonathan Roebuck * chore(ui): remove backticks from changeset Signed-off-by: Johan Persson * Revert "chore(ui): remove backticks from changeset" This reverts commit 9b7f8bb6e83c28587219b7734676b1c062661a8a. Signed-off-by: Johan Persson --------- Signed-off-by: Jonathan Roebuck Signed-off-by: Johan Persson Co-authored-by: Claude Opus 4.6 (1M context) Co-authored-by: Johan Persson --- .changeset/show-pagination-label.md | 7 +++++++ docs-ui/src/app/components/table/props-definition.tsx | 9 ++++++++- packages/ui/report.api.md | 5 +++++ packages/ui/src/components/Table/components/Table.tsx | 1 + packages/ui/src/components/Table/hooks/types.ts | 1 + packages/ui/src/components/Table/hooks/useTable.ts | 7 +++++-- .../src/components/TablePagination/TablePagination.tsx | 9 ++++++--- packages/ui/src/components/TablePagination/definition.ts | 1 + packages/ui/src/components/TablePagination/types.ts | 1 + 9 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 .changeset/show-pagination-label.md diff --git a/.changeset/show-pagination-label.md b/.changeset/show-pagination-label.md new file mode 100644 index 0000000000..6470390d71 --- /dev/null +++ b/.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` diff --git a/docs-ui/src/app/components/table/props-definition.tsx b/docs-ui/src/app/components/table/props-definition.tsx index 6d35cb3350..77254ae0a1 100644 --- a/docs-ui/src/app/components/table/props-definition.tsx +++ b/docs-ui/src/app/components/table/props-definition.tsx @@ -50,7 +50,8 @@ export const useTableOptionsPropDefs: Record = { description: ( <> Pagination configuration including pageSize,{' '} - pageSizeOptions, and initialOffset. + pageSizeOptions, initialOffset, and{' '} + showPaginationLabel. ), }, @@ -413,6 +414,12 @@ export const tablePaginationPropDefs: Record = { 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.', + }, }; // ============================================================================= diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index c329059ad9..0ba2d175bf 100644 --- a/packages/ui/report.api.md +++ b/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) diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx index 2376760b69..81b336afcc 100644 --- a/packages/ui/src/components/Table/components/Table.tsx +++ b/packages/ui/src/components/Table/components/Table.tsx @@ -272,6 +272,7 @@ export function Table({ onPageSizeChange={pagination.onPageSizeChange} showPageSizeOptions={pagination.showPageSizeOptions} getLabel={pagination.getLabel} + showPaginationLabel={pagination.showPaginationLabel} /> )} diff --git a/packages/ui/src/components/Table/hooks/types.ts b/packages/ui/src/components/Table/hooks/types.ts index 163ec7741f..1c69cc7591 100644 --- a/packages/ui/src/components/Table/hooks/types.ts +++ b/packages/ui/src/components/Table/hooks/types.ts @@ -56,6 +56,7 @@ export interface PaginationOptions | 'onPreviousPage' | 'showPageSizeOptions' | 'getLabel' + | 'showPaginationLabel' > > { initialOffset?: number; diff --git a/packages/ui/src/components/Table/hooks/useTable.ts b/packages/ui/src/components/Table/hooks/useTable.ts index b8f5b8bd13..de70534280 100644 --- a/packages/ui/src/components/Table/hooks/useTable.ts +++ b/packages/ui/src/components/Table/hooks/useTable.ts @@ -41,6 +41,7 @@ function useTableProps( onNextPage: onNextPageCallback, onPreviousPage: onPreviousPageCallback, getLabel, + showPaginationLabel, } = paginationOptions; const previousDataRef = useRef(paginationResult.data); @@ -74,6 +75,7 @@ function useTableProps( }, showPageSizeOptions, getLabel, + showPaginationLabel, }), [ paginationResult.pageSize, @@ -88,6 +90,9 @@ function useTableProps( onNextPageCallback, onPreviousPageCallback, onPageSizeChangeCallback, + showPageSizeOptions, + getLabel, + showPaginationLabel, ], ); @@ -106,8 +111,6 @@ function useTableProps( isStale, paginationResult.error, pagination, - showPageSizeOptions, - getLabel, sortState, ], ); diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx index 745088bf2f..b17286e262 100644 --- a/packages/ui/src/components/TablePagination/TablePagination.tsx +++ b/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) { )}
- {hasItems && ( + {showLabel && ( {label} @@ -133,7 +136,7 @@ export function TablePagination(props: TablePaginationProps) { isDisabled={!hasPreviousPage} icon={} aria-label="Previous table page" - aria-describedby={hasItems ? labelId : undefined} + aria-describedby={showLabel ? labelId : undefined} /> } aria-label="Next table page" - aria-describedby={hasItems ? labelId : undefined} + aria-describedby={showLabel ? labelId : undefined} />
diff --git a/packages/ui/src/components/TablePagination/definition.ts b/packages/ui/src/components/TablePagination/definition.ts index 516f05cdda..d71c221e44 100644 --- a/packages/ui/src/components/TablePagination/definition.ts +++ b/packages/ui/src/components/TablePagination/definition.ts @@ -52,5 +52,6 @@ export const TablePaginationDefinition = onPageSizeChange: {}, showPageSizeOptions: { default: true }, getLabel: {}, + showPaginationLabel: { default: true }, }, }); diff --git a/packages/ui/src/components/TablePagination/types.ts b/packages/ui/src/components/TablePagination/types.ts index 3fde662d8c..9d575a6b46 100644 --- a/packages/ui/src/components/TablePagination/types.ts +++ b/packages/ui/src/components/TablePagination/types.ts @@ -37,6 +37,7 @@ export type TablePaginationOwnProps = { offset?: number; totalCount?: number; }) => string; + showPaginationLabel?: boolean; }; /** @public */