;
}
export interface EuiDataGridCellState {
@@ -918,12 +918,16 @@ export interface EuiDataGridPaginationProps {
/**
* How many rows should initially be shown per page.
* Pass `0` to display the selected "Show all" option and hide the pagination.
+ *
+ * @default 10
*/
- pageSize: number;
+ pageSize?: number;
/**
* An array of page sizes the user can select from.
* Pass `0` as one of the options to create a "Show all" option.
- * Leave this prop undefined or use an empty array to hide "Rows per page" select button.
+ * Pass an empty array to hide "Rows per page" select button.
+ *
+ * @default [10, 25, 50]
*/
pageSizeOptions?: number[];
/**
diff --git a/src/components/datagrid/utils/data_grid_pagination.test.tsx b/src/components/datagrid/utils/data_grid_pagination.test.tsx
index e84c6ca7349..2c176b702ed 100644
--- a/src/components/datagrid/utils/data_grid_pagination.test.tsx
+++ b/src/components/datagrid/utils/data_grid_pagination.test.tsx
@@ -7,7 +7,8 @@
*/
import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { render } from '../../../test/rtl';
import { DataGridFocusContext } from './focus';
import { mockFocusContext } from './__mocks__/focus_context';
@@ -27,134 +28,77 @@ describe('EuiDataGridPaginationRenderer', () => {
beforeEach(() => jest.clearAllMocks());
it('renders', () => {
- const component = shallow();
- expect(component).toMatchInlineSnapshot(`
-
-
-
- `);
+ const { container, getByText } = render(
+
+ );
+ expect(container.firstChild).toHaveClass('euiDataGrid__pagination');
+ fireEvent.click(getByText('Rows per page: 25'));
+ expect(getByText('25 rows')).toBeTruthy();
+ expect(getByText('Page 1 of 4')).toBeTruthy();
});
it('renders a detailed aria-label', () => {
- const component = shallow(
+ const { getAllByLabelText } = render(
);
- expect(component).toMatchInlineSnapshot(`
-
-
-
- `);
+ expect(
+ getAllByLabelText('Pagination for preceding grid: Test Grid')
+ ).toBeTruthy();
});
it('hides the page size selection if pageSizeOptions is empty', () => {
- const component = shallow(
+ const { queryByTestSubject, queryByText } = render(
);
- expect(component).toMatchInlineSnapshot(`
-
-
-
- `);
+ expect(queryByTestSubject('tablePaginationPopoverButton')).toBeFalsy();
+ expect(queryByText('Rows per page:')).toBeFalsy();
});
it('handles the "show all" page size option', () => {
- const component = shallow(
+ const { getByText } = render(
);
- expect(component).toMatchInlineSnapshot(`
-
-
-
- `);
+ expect(getByText('Showing all rows')).toBeTruthy();
});
it('does not render if there are fewer rows than the smallest page size option', () => {
- const component = shallow(
+ const { container } = render(
);
- expect(component.isEmptyRender()).toBe(true);
+ expect(container).toBeEmptyDOMElement();
});
it('focuses the first data cell on page change', () => {
- const component = mount(
+ const { getByTestSubject } = render(
);
- const onChangePage: Function = component
- .find('EuiTablePagination')
- .prop('onChangePage');
- onChangePage(3);
+ fireEvent.click(getByTestSubject('pagination-button-2'));
expect(mockFocusContext.setFocusedCell).toHaveBeenCalledWith([0, 0]);
});
+
+ describe('EuiProvider component defaults', () => {
+ it('falls back to EuiTablePagination defaults if pageSize and pageSizeOptions are undefined', () => {
+ const { getByText } = render(
+
+ );
+ fireEvent.click(getByText('Rows per page: 10'));
+ expect(getByText('10 rows')).toBeTruthy();
+ expect(getByText('25 rows')).toBeTruthy();
+ expect(getByText('50 rows')).toBeTruthy();
+ });
+ });
});
diff --git a/src/components/datagrid/utils/data_grid_pagination.tsx b/src/components/datagrid/utils/data_grid_pagination.tsx
index bbdcd21bad5..25ed1771b17 100644
--- a/src/components/datagrid/utils/data_grid_pagination.tsx
+++ b/src/components/datagrid/utils/data_grid_pagination.tsx
@@ -7,8 +7,12 @@
*/
import React, { useCallback, useContext } from 'react';
+
import { useEuiI18n } from '../../i18n'; // Note: this file must be named data_grid_pagination to match i18n tokens
-import { EuiTablePagination } from '../../table/table_pagination';
+import {
+ EuiTablePagination,
+ useEuiTablePaginationDefaults,
+} from '../../table/table_pagination';
import {
EuiDataGridPaginationProps,
EuiDataGridPaginationRendererProps,
@@ -17,14 +21,18 @@ import { DataGridFocusContext } from './focus';
export const EuiDataGridPaginationRenderer = ({
pageIndex,
- pageSize,
- pageSizeOptions,
+ pageSize: _pageSize,
+ pageSizeOptions: _pageSizeOptions,
onChangePage: _onChangePage,
onChangeItemsPerPage,
rowCount,
controls,
'aria-label': ariaLabel,
}: EuiDataGridPaginationRendererProps) => {
+ const defaults = useEuiTablePaginationDefaults();
+ const pageSize = _pageSize ?? defaults.itemsPerPage;
+ const pageSizeOptions = _pageSizeOptions ?? defaults.itemsPerPageOptions;
+
const detailedPaginationLabel = useEuiI18n(
'euiDataGridPagination.detailedPaginationLabel',
'Pagination for preceding grid: {label}',
@@ -46,8 +54,7 @@ export const EuiDataGridPaginationRenderer = ({
);
const pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1;
- const minSizeOption =
- pageSizeOptions && [...pageSizeOptions].sort((a, b) => a - b)[0];
+ const minSizeOption = [...pageSizeOptions].sort((a, b) => a - b)[0];
if (rowCount < (minSizeOption || pageSize)) {
/**
@@ -58,8 +65,8 @@ export const EuiDataGridPaginationRenderer = ({
return null;
}
- // hide select rows per page if pageSizeOptions is undefined or an empty array
- const hidePerPageOptions = !pageSizeOptions || pageSizeOptions.length === 0;
+ // Hide select rows per page if pageSizeOptions is an empty array
+ const hidePerPageOptions = pageSizeOptions.length === 0;
return (
diff --git a/src/components/datagrid/utils/focus.test.tsx b/src/components/datagrid/utils/focus.test.tsx
index a3ff7ec87bd..9b2e0db5d37 100644
--- a/src/components/datagrid/utils/focus.test.tsx
+++ b/src/components/datagrid/utils/focus.test.tsx
@@ -387,6 +387,7 @@ describe('createKeyDownHandler', () => {
const pagination = {
pageIndex: 0,
pageSize: 5,
+ pageSizeOptions: [5],
onChangePage: jest.fn(),
onChangeItemsPerPage: () => {},
};
@@ -433,6 +434,7 @@ describe('createKeyDownHandler', () => {
const pagination = {
pageIndex: 1,
pageSize: 5,
+ pageSizeOptions: [5],
onChangePage: jest.fn(),
onChangeItemsPerPage: () => {},
};
diff --git a/src/components/datagrid/utils/focus.ts b/src/components/datagrid/utils/focus.ts
index d896efff152..0dd226faa33 100644
--- a/src/components/datagrid/utils/focus.ts
+++ b/src/components/datagrid/utils/focus.ts
@@ -181,7 +181,7 @@ export const createKeyDownHandler = ({
visibleRowCount: number;
visibleRowStartIndex: number;
rowCount: EuiDataGridProps['rowCount'];
- pagination: EuiDataGridProps['pagination'];
+ pagination: Required;
hasFooter: boolean;
headerIsInteractive: boolean;
focusContext: DataGridFocusContextShape;
diff --git a/src/components/datagrid/utils/ref.test.ts b/src/components/datagrid/utils/ref.test.ts
index 8a00ed87c07..eaad811867f 100644
--- a/src/components/datagrid/utils/ref.test.ts
+++ b/src/components/datagrid/utils/ref.test.ts
@@ -72,8 +72,9 @@ describe('useSortPageCheck', () => {
describe('if the grid is paginated', () => {
const pagination = {
- pageSize: 20,
pageIndex: 0,
+ pageSize: 20,
+ pageSizeOptions: [20],
onChangePage: jest.fn(),
onChangeItemsPerPage: jest.fn(),
};
diff --git a/src/components/datagrid/utils/ref.ts b/src/components/datagrid/utils/ref.ts
index fa0f70be4a2..a63ef367dd6 100644
--- a/src/components/datagrid/utils/ref.ts
+++ b/src/components/datagrid/utils/ref.ts
@@ -23,7 +23,7 @@ interface Dependencies {
focusContext: DataGridFocusContextShape;
cellPopoverContext: DataGridCellPopoverContextShape;
sortingContext: DataGridSortingContextShape;
- pagination: EuiDataGridProps['pagination'];
+ pagination: Required;
rowCount: number;
visibleColCount: number;
}
@@ -144,7 +144,7 @@ export const useCellLocationCheck = (rowCount: number, colCount: number) => {
* paginating to that row.
*/
export const useSortPageCheck = (
- pagination: EuiDataGridProps['pagination'],
+ pagination: Required,
sortedRowMap: DataGridSortingContextShape['sortedRowMap']
) => {
const findVisibleRowIndex = useCallback(
diff --git a/src/components/datagrid/utils/row_count.ts b/src/components/datagrid/utils/row_count.ts
index 7db5ea90834..50ef33df9a5 100644
--- a/src/components/datagrid/utils/row_count.ts
+++ b/src/components/datagrid/utils/row_count.ts
@@ -12,7 +12,7 @@ export const computeVisibleRows = ({
pagination,
rowCount,
}: {
- pagination: EuiDataGridProps['pagination'];
+ pagination: Required;
rowCount: EuiDataGridProps['rowCount'];
}): EuiDataGridVisibleRows => {
const startRow =
diff --git a/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap b/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
index 585aafd24f9..7739a1b314d 100644
--- a/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
+++ b/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
@@ -42,22 +42,22 @@ exports[`EuiFocusTrap can be disabled 1`] = `
`;
-exports[`EuiFocusTrap is rendered 1`] = `
-Array [
+exports[`EuiFocusTrap renders 1`] = `
+
,
-]
+ />
+