[EuiDataGrid] Convert pagination to use EuiProvider componentDefaults

+ update props documentation

src-docs/src/views/datagrid/_snippets.tsx

@@ -69,8 +69,8 @@ renderCustomDataGridBody={({ visibleColumns, visibleRowData, Cell }) => (
 )}`,
   pagination: `pagination={{
   pageIndex: 1,
-  pageSize: 100,
-  pageSizeOptions: [50, 100, 200],
+  pageSize: 100, // If not specified, defaults to EuiTablePagination.itemsPerPage
+  pageSizeOptions: [50, 100, 200], // If not specified, defaults to EuiTablePagination.itemsPerPageOptions
   onChangePage: () => {},
   onChangeItemsPerPage: () => {},
 }}`,

src/components/datagrid/data_grid_types.ts

@@ -300,7 +300,7 @@ export type CommonGridProps = CommonProps &
      */
     inMemory?: EuiDataGridInMemory;
     /**
-     * A #EuiDataGridPagination object. Omit to disable pagination completely.
+     * A #EuiDataGridPaginationProps object. Omit to disable pagination completely.
      */
     pagination?: EuiDataGridPaginationProps;
     /**
@@ -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[];
   /**

src/components/datagrid/utils/data_grid_pagination.test.tsx

@@ -8,6 +8,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';
@@ -157,4 +159,20 @@ describe('EuiDataGridPaginationRenderer', () => {
     onChangePage(3);
     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(
+        <EuiDataGridPaginationRenderer
+          {...props}
+          pageSize={undefined}
+          pageSizeOptions={undefined}
+        />
+      );
+      fireEvent.click(getByText('Rows per page: 10'));
+      expect(getByText('10 rows')).toBeTruthy();
+      expect(getByText('25 rows')).toBeTruthy();
+      expect(getByText('50 rows')).toBeTruthy();
+    });
+  });
 });

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 (
     <div className="euiDataGrid__pagination">