[EuiBasicTable][EuiInMemoryTable][EuiDataGrid] Update to use EuiTablePagination component defaults

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-docs/src/views/datagrid/advanced/custom_renderer.tsx

@@ -168,7 +168,7 @@ export default () => {
   );
 
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) => {
       setPagination((pagination) => ({ ...pagination, pageIndex }));
@@ -294,7 +294,6 @@ export default () => {
         inMemory={{ level: 'sorting' }}
         pagination={{
           ...pagination,
-          pageSizeOptions: [10, 25, 50],
           onChangePage: onChangePage,
           onChangeItemsPerPage: onChangePageSize,
         }}

src-docs/src/views/datagrid/advanced/datagrid_memory_example.js

@@ -23,7 +23,6 @@ const inMemorySortingDataGridSource = require('!!raw-loader!./in_memory_sorting'
 
 import {
   EuiDataGridColumn,
-  EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridInMemory,
   EuiDataGridStyle,
@@ -32,6 +31,7 @@ import {
   EuiDataGridCellValueElementProps,
   EuiDataGridSchemaDetector,
 } from '!!prop-loader!../../../../../src/components/datagrid/data_grid_types';
+import { EuiDataGridPaginationProps } from '../basics/_props';
 
 export const DataGridMemoryExample = {
   sections: [

src-docs/src/views/datagrid/advanced/in_memory.js

@@ -130,7 +130,6 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       pagination={{
         ...pagination,
-        pageSizeOptions: [10, 50, 100],
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}

src-docs/src/views/datagrid/advanced/in_memory_enhancements.js

@@ -131,7 +131,6 @@ export default () => {
         sorting={{ columns: sortingColumns, onSort }}
         pagination={{
           ...pagination,
-          pageSizeOptions: [10, 50, 100],
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}

src-docs/src/views/datagrid/advanced/in_memory_pagination.js

@@ -52,7 +52,7 @@ for (let i = 1; i < 100; i++) {
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -115,7 +115,6 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       pagination={{
         ...pagination,
-        pageSizeOptions: [10, 50, 0],
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}

src-docs/src/views/datagrid/advanced/in_memory_sorting.js

@@ -52,7 +52,7 @@ for (let i = 1; i < 100; i++) {
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -101,7 +101,6 @@ export default () => {
       sorting={{ columns: sortingColumns, onSort }}
       pagination={{
         ...pagination,
-        pageSizeOptions: [10, 50, 100],
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}

src-docs/src/views/datagrid/advanced/ref.tsx

@@ -111,7 +111,7 @@ export default () => {
   );
 
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
     (pageIndex) => {
       setPagination((pagination) => ({ ...pagination, pageIndex }));
@@ -224,7 +224,6 @@ export default () => {
         }
         pagination={{
           ...pagination,
-          pageSizeOptions: [25, 50],
           onChangePage: onChangePage,
           onChangeItemsPerPage: onChangePageSize,
         }}

src-docs/src/views/datagrid/basics/_props.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import { EuiDataGrid } from '../../../../../src/components';
+import React, { FunctionComponent } from 'react';
+import {
+  EuiDataGrid,
+  EuiDataGridPaginationProps as _EuiDataGridPaginationProps,
+} from '../../../../../src/components';
 
 import { DataGridPropsTable } from '../_props_table';
 import { gridSnippets } from '../_snippets';
@@ -41,3 +44,8 @@ export const DataGridTopProps = () => {
     />
   );
 };
+
+// Loading `EuiDataGridPaginationProps` via !prop-loader doesn't correctly inherit @defaults
+export const EuiDataGridPaginationProps: FunctionComponent<
+  _EuiDataGridPaginationProps
+> = () => <div />;

src-docs/src/views/datagrid/basics/container.js

@@ -34,7 +34,7 @@ for (let i = 1; i < 20; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -74,7 +74,6 @@ export default () => {
         renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
         pagination={{
           ...pagination,
-          pageSizeOptions: [5, 10, 25],
           onChangeItemsPerPage: setPageSize,
           onChangePage: setPageIndex,
         }}

src-docs/src/views/datagrid/basics/datagrid.js

@@ -372,7 +372,7 @@ const trailingControlColumns = [
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -419,7 +419,6 @@ export default () => {
         sorting={{ columns: sortingColumns, onSort }}
         pagination={{
           ...pagination,
-          pageSizeOptions: [10, 50, 100],
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}

src-docs/src/views/datagrid/basics/datagrid_example.js

@@ -12,7 +12,7 @@ import {
 } from '../../../../../src/components';
 
 import DataGrid from './datagrid';
-import { DataGridTopProps } from './_props';
+import { DataGridTopProps, EuiDataGridPaginationProps } from './_props';
 const dataGridSource = require('!!raw-loader!./datagrid');
 
 import DataGridContainer from './container';
@@ -28,7 +28,6 @@ const dataGridVirtualizationConstrainedSource = require('!!raw-loader!./virtuali
 import {
   EuiDataGridColumn,
   EuiDataGridColumnCellAction,
-  EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridInMemory,
   EuiDataGridStyle,

src-docs/src/views/datagrid/basics/flex.js

@@ -40,7 +40,7 @@ for (let i = 1; i < 20; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -89,7 +89,6 @@ export default () => {
             }
             pagination={{
               ...pagination,
-              pageSizeOptions: [5, 10, 25],
               onChangeItemsPerPage: setPageSize,
               onChangePage: setPageIndex,
             }}

src-docs/src/views/datagrid/cells_popovers/column_cell_actions.js

@@ -120,7 +120,7 @@ for (let i = 1; i < 5; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -153,7 +153,6 @@ export default () => {
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}

src-docs/src/views/datagrid/schema_columns/column_actions.js

@@ -69,7 +69,7 @@ for (let i = 1; i < 5; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -102,7 +102,6 @@ export default () => {
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}

src-docs/src/views/datagrid/schema_columns/column_widths.js

@@ -46,7 +46,7 @@ for (let i = 1; i < 5; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
 
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -79,7 +79,6 @@ export default () => {
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}

src-docs/src/views/datagrid/schema_columns/control_columns.js

@@ -309,10 +309,7 @@ const trailingControlColumns = [
 ];
 
 export default function DataGrid() {
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 15,
-  });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const setPageIndex = useCallback(
     (pageIndex) =>
       setPagination((pagination) => ({ ...pagination, pageIndex })),
@@ -369,7 +366,6 @@ export default function DataGrid() {
           renderCellValue={renderCellValue}
           pagination={{
             ...pagination,
-            pageSizeOptions: [5, 15, 25],
             onChangeItemsPerPage: setPageSize,
             onChangePage: setPageIndex,
           }}

src-docs/src/views/datagrid/schema_columns/footer_row.js

@@ -130,7 +130,7 @@ const RenderFooterCellValue = ({ columnId, setCellProps }) => {
 
 export default () => {
   // Pagination
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -177,7 +177,6 @@ export default () => {
           }
           pagination={{
             ...pagination,
-            pageSizeOptions: [10, 15, 20],
             onChangeItemsPerPage: onChangeItemsPerPage,
             onChangePage: onChangePage,
           }}

src-docs/src/views/datagrid/styling/styling_grid.js

@@ -59,10 +59,7 @@ const DataGridStyle = ({
   header = 'underline',
   footer = 'overline',
 }) => {
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 5,
-  });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
   );
@@ -111,7 +108,6 @@ const DataGridStyle = ({
       renderFooterCellValue={renderFooterCellValue}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}

src-docs/src/views/datagrid/toolbar/_grid.js

@@ -55,10 +55,7 @@ const DataGridStyle = ({
   allowHideColumns,
   allowOrderingColumns,
 }) => {
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 5,
-  });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
   );
@@ -139,7 +136,6 @@ const DataGridStyle = ({
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
       pagination={{
         ...pagination,
-        pageSizeOptions: [5, 10, 25],
         onChangeItemsPerPage: setPageSize,
         onChangePage: setPageIndex,
       }}

src-docs/src/views/datagrid/toolbar/additional_controls.tsx

@@ -50,7 +50,7 @@ for (let i = 1; i < 20; i++) {
 }
 
 export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const flyoutTitleId = useGeneratedHtmlId({
     prefix: 'dataGridAdditionalControlsFlyout',
@@ -129,7 +129,6 @@ export default () => {
         renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
         pagination={{
           ...pagination,
-          pageSizeOptions: [5, 10, 25],
           onChangeItemsPerPage: setPageSize,
           onChangePage: setPageIndex,
         }}

src-docs/src/views/tables/basic/basic_section.js

@@ -7,7 +7,7 @@ import {
   Criteria,
   CriteriaWithPagination,
 } from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
-import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
   EuiTableComputedColumnType,

src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js

@@ -9,7 +9,7 @@ import {
   Criteria,
   CriteriaWithPagination,
 } from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
-import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
   EuiTableComputedColumnType,

src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js

@@ -9,7 +9,7 @@ import {
   Criteria,
   CriteriaWithPagination,
 } from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
-import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
   EuiTableComputedColumnType,

src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js

@@ -8,7 +8,7 @@ import {
   Criteria,
   CriteriaWithPagination,
 } from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
-import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
   EuiTableComputedColumnType,

src-docs/src/views/tables/in_memory/in_memory_search_external_section.js

@@ -8,7 +8,7 @@ import {
   Criteria,
   CriteriaWithPagination,
 } from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
-import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
   EuiTableComputedColumnType,

src-docs/src/views/tables/in_memory/in_memory_search_section.js

@@ -9,7 +9,7 @@ import {
   Criteria,
   CriteriaWithPagination,
 } from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
-import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
   EuiTableComputedColumnType,