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 */