diff --git a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx index f47b5bfc073..6998fc2e5be 100644 --- a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx +++ b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx @@ -5,7 +5,7 @@ import { ResponsiveActions, SkeletonTableBody, } from '@patternfly/react-component-groups'; -import { Bullseye, Pagination, Tooltip } from '@patternfly/react-core'; +import { Bullseye, Pagination, PaginationVariant, Tooltip } from '@patternfly/react-core'; import { DataView, DataViewState, @@ -151,6 +151,19 @@ export const ConsoleDataView = < return undefined; }, [filteredData.length, loaded]); + const paginationTitles = React.useMemo( + () => ({ + ofWord: t('public~of'), + itemsPerPage: t('public~Items per page'), + perPageSuffix: t('public~per page'), + toFirstPageAriaLabel: t('public~Go to first page'), + toPreviousPageAriaLabel: t('public~Go to previous page'), + toNextPageAriaLabel: t('public~Go to next page'), + toLastPageAriaLabel: t('public~Go to last page'), + }), + [t], + ); + const dataViewFilterNodes = React.useMemo(() => { const basicFilters: React.ReactNode[] = []; @@ -225,15 +238,7 @@ export const ConsoleDataView = < ) } pagination={ - + } /> @@ -247,6 +252,16 @@ export const ConsoleDataView = < data-test="data-view-table" /> + + } + /> ); diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json index 1c8c279d686..3fee354fe27 100644 --- a/frontend/public/locales/en/public.json +++ b/frontend/public/locales/en/public.json @@ -1754,6 +1754,10 @@ "Admission Webhook Warning": "Admission Webhook Warning", "{{kind}} {{name}} violates policy {{warning}}": "{{kind}} {{name}} violates policy {{warning}}", "Learn more": "Learn more", + "Go to first page": "Go to first page", + "Go to previous page": "Go to previous page", + "Go to next page": "Go to next page", + "Go to last page": "Go to last page", "Filter by name": "Filter by name", "{{label}} table": "{{label}} table", "Filter by label": "Filter by label",