diff --git a/src/components/provider/component_defaults/component_defaults.test.tsx b/src/components/provider/component_defaults/component_defaults.test.tsx
index ec186b896953..e61b4f1522ca 100644
--- a/src/components/provider/component_defaults/component_defaults.test.tsx
+++ b/src/components/provider/component_defaults/component_defaults.test.tsx
@@ -96,5 +96,7 @@ describe('EuiComponentDefaultsProvider', () => {
// NOTE: Components are in charge of their own testing to ensure that the props
// coming from `useEuiComponentDefaults()` were properly applied.
- // @see `src/components/portal/portal.spec.tsx` as an example
+ // Examples:
+ // @see src/components/portal/portal.spec.tsx
+ // @see src/components/table/table_pagination/table_pagination.test.tsx
});
diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx
index 04e8419bc2b0..a11a049f00d5 100644
--- a/src/components/table/table_pagination/table_pagination.test.tsx
+++ b/src/components/table/table_pagination/table_pagination.test.tsx
@@ -7,9 +7,12 @@
*/
import React from 'react';
+import { fireEvent } from '@testing-library/react';
import { render } from '../../../test/rtl';
import { requiredProps } from '../../../test/required_props';
+import { EuiProvider } from '../../provider';
+
import { EuiTablePagination } from './table_pagination';
describe('EuiTablePagination', () => {
@@ -51,4 +54,52 @@ describe('EuiTablePagination', () => {
expect(container.firstChild).toMatchSnapshot();
});
+
+ describe('configurable defaults', () => {
+ test('itemsPerPage', () => {
+ const { getByText } = render(
+
+
+ ,
+ { wrapper: undefined }
+ );
+
+ expect(getByText('Rows per page: 20')).toBeTruthy();
+ });
+
+ test('itemsPerPageOptions', () => {
+ const { getByTestSubject } = render(
+
+
+ ,
+ { wrapper: undefined }
+ );
+
+ fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
+ expect(getByTestSubject('tablePaginationRowOptions').textContent).toEqual(
+ '5 rows10 rows15 rows'
+ );
+ });
+
+ test('showPerPageOptions', () => {
+ const { queryByTestSubject } = render(
+
+
+ ,
+ { wrapper: undefined }
+ );
+
+ expect(queryByTestSubject('tablePaginationPopoverButton')).toBe(null);
+ });
+ });
});
diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx
index 19f944d80235..b0f38c473f26 100644
--- a/src/components/table/table_pagination/table_pagination.tsx
+++ b/src/components/table/table_pagination/table_pagination.tsx
@@ -20,6 +20,8 @@ import { EuiPagination, EuiPaginationProps } from '../../pagination';
import { EuiPopover } from '../../popover';
import { EuiI18n } from '../../i18n';
+import { useEuiComponentDefaults } from '../../provider/component_defaults';
+
export type PageChangeHandler = EuiPaginationProps['onPageClick'];
export type ItemsPerPageChangeHandler = (pageSize: number) => void;
@@ -27,16 +29,22 @@ export interface EuiTablePaginationProps
extends Omit {
/**
* Option to completely hide the "Rows per page" selector.
+ *
+ * @default true
*/
showPerPageOptions?: boolean;
/**
* Current selection for "Rows per page".
* Pass `0` to display the selected "Show all" option and hide the pagination.
+ *
+ * @default 50
*/
itemsPerPage?: number;
/**
* Custom array of options for "Rows per page".
* Pass `0` as one of the options to create a "Show all" option.
+ *
+ * @default [10, 20, 50, 100]
*/
itemsPerPageOptions?: number[];
/**
@@ -51,16 +59,21 @@ export interface EuiTablePaginationProps
'aria-label'?: string;
}
-export const EuiTablePagination: FunctionComponent = ({
- activePage,
- itemsPerPage = 50,
- itemsPerPageOptions = [10, 20, 50, 100],
- showPerPageOptions = true,
- onChangeItemsPerPage,
- onChangePage,
- pageCount,
- ...rest
-}) => {
+export const EuiTablePagination: FunctionComponent = (
+ props
+) => {
+ const { EuiTablePagination: defaults } = useEuiComponentDefaults();
+ const {
+ activePage,
+ itemsPerPage = defaults.itemsPerPage,
+ itemsPerPageOptions = defaults.itemsPerPageOptions,
+ showPerPageOptions = defaults.showPerPageOptions,
+ onChangeItemsPerPage,
+ onChangePage,
+ pageCount,
+ ...rest
+ } = props;
+
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const togglePopover = useCallback(() => {
@@ -134,7 +147,10 @@ export const EuiTablePagination: FunctionComponent = ({
panelPaddingSize="none"
anchorPosition="upRight"
>
-
+
);