diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md new file mode 100644 index 0000000000..98beaf89e0 --- /dev/null +++ b/.changeset/funny-papayas-tell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': minor +--- + +Show the pagination text for the offset-paginated catalog table, and remove the pagination bar from the top of the `CatalogTable` when pagination is enabled. diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 9b3a950ffd..464688c590 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -47,7 +47,7 @@ import { OffsetPaginatedCatalogTable } from './OffsetPaginatedCatalogTable'; import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable'; import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; -import { catalogTranslationRef } from '../../alpha/translation'; +import { catalogTranslationRef } from '../../alpha'; import { FavoriteToggleIcon } from '@backstage/core-components'; /** @@ -194,7 +194,7 @@ export const CatalogTable = (props: CatalogTableProps) => { .join(' '); const actions = props.actions || defaultActions; - const options = { + const options: TableProps['options'] = { actionsColumnIndex: -1, loadingType: 'linear' as const, showEmptyDataSourceMessage: !loading, diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx index e49ecf3cd9..1fcc2683be 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx @@ -35,7 +35,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) { columns={columns} data={data} options={{ - paginationPosition: 'both', ...options, // These settings are configured to force server side pagination pageSizeOptions: [], diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 96c81088ca..896cf0f8b6 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -47,7 +47,6 @@ export function OffsetPaginatedCatalogTable( columns={columns} data={data} options={{ - paginationPosition: 'both', pageSizeOptions: [5, 10, 20, 50, 100], pageSize: limit, emptyRowsWhenPaging: false, @@ -57,14 +56,9 @@ export function OffsetPaginatedCatalogTable( Toolbar: CatalogTableToolbar, }} page={page} - onPageChange={newPage => { - setPage(newPage); - }} - onRowsPerPageChange={pageSize => { - setLimit(pageSize); - }} + onPageChange={setPage} + onRowsPerPageChange={setLimit} totalCount={totalItems} - localization={{ pagination: { labelDisplayedRows: '' } }} {...restProps} /> );