EuiDataGrid: Fixed pagination visibility when changing the rows per page

Fixed `EuiDataGrid`'s pagination visibility when changing rows per page

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978))
 - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957))
 - Added `showOnFocus` prop to `EuiScreenReaderOnly` to force display on keyboard focus ([#2976](https://github.com/elastic/eui/pull/2976))
 - Added `EuiSkipLink` component ([#2976](https://github.com/elastic/eui/pull/2976))

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

@@ -59,7 +59,7 @@ export default class DataGridContainer extends Component {
 
   setPageSize = pageSize =>
     this.setState(({ pagination }) => ({
-      pagination: { ...pagination, pageSize },
+      pagination: { ...pagination, pageSize, pageIndex: 0 },
     }));
 
   setVisibleColumns = visibleColumns => this.setState({ visibleColumns });

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

@@ -66,7 +66,7 @@ export default class DataGrid extends Component {
 
   setPageSize = pageSize =>
     this.setState(({ pagination }) => ({
-      pagination: { ...pagination, pageSize },
+      pagination: { ...pagination, pageSize, pageIndex: 0 },
     }));
 
   setVisibleColumns = visibleColumns => this.setState({ visibleColumns });

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

@@ -55,7 +55,7 @@ export default class DataGridContainer extends Component {
 
   setPageSize = pageSize =>
     this.setState(({ pagination }) => ({
-      pagination: { ...pagination, pageSize },
+      pagination: { ...pagination, pageSize, pageIndex: 0 },
     }));
 
   setVisibleColumns = visibleColumns => this.setState({ visibleColumns });

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

@@ -317,7 +317,7 @@ export default function DataGrid() {
     [pagination, setPagination]
   );
   const setPageSize = useCallback(
-    pageSize => setPagination({ ...pagination, pageSize }),
+    pageSize => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
     [pagination, setPagination]
   );
 

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

@@ -153,7 +153,8 @@ export default () => {
   // ** Pagination config
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const onChangeItemsPerPage = useCallback(
-    pageSize => setPagination(pagination => ({ ...pagination, pageSize })),
+    pageSize =>
+      setPagination(pagination => ({ ...pagination, pageSize, pageIndex: 0 })),
     [setPagination]
   );
   const onChangePage = useCallback(

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

@@ -57,7 +57,8 @@ export default () => {
   // ** Pagination config
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const onChangeItemsPerPage = useCallback(
-    pageSize => setPagination(pagination => ({ ...pagination, pageSize })),
+    pageSize =>
+      setPagination(pagination => ({ ...pagination, pageSize, pageIndex: 0 })),
     [setPagination]
   );
   const onChangePage = useCallback(

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

@@ -56,7 +56,8 @@ export default () => {
   // ** Pagination config
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const onChangeItemsPerPage = useCallback(
-    pageSize => setPagination(pagination => ({ ...pagination, pageSize })),
+    pageSize =>
+      setPagination(pagination => ({ ...pagination, pageSize, pageIndex: 0 })),
     [setPagination]
   );
   const onChangePage = useCallback(

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

@@ -56,7 +56,8 @@ export default () => {
   // ** Pagination config
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const onChangeItemsPerPage = useCallback(
-    pageSize => setPagination(pagination => ({ ...pagination, pageSize })),
+    pageSize =>
+      setPagination(pagination => ({ ...pagination, pageSize, pageIndex: 0 })),
     [setPagination]
   );
   const onChangePage = useCallback(

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

@@ -56,7 +56,8 @@ export default () => {
   // ** Pagination config
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const onChangeItemsPerPage = useCallback(
-    pageSize => setPagination(pagination => ({ ...pagination, pageSize })),
+    pageSize =>
+      setPagination(pagination => ({ ...pagination, pageSize, pageIndex: 0 })),
     [setPagination]
   );
   const onChangePage = useCallback(

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

@@ -145,7 +145,7 @@ export default class DataGridSchema extends Component {
 
   setPageSize = pageSize =>
     this.setState(({ pagination }) => ({
-      pagination: { ...pagination, pageSize },
+      pagination: { ...pagination, pageSize, pageIndex: 0 },
     }));
 
   setVisibleColumns = visibleColumns => this.setState({ visibleColumns });

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

@@ -328,7 +328,7 @@ export default class DataGrid extends Component {
 
   setPageSize = pageSize =>
     this.setState(({ pagination }) => ({
-      pagination: { ...pagination, pageSize },
+      pagination: { ...pagination, pageSize, pageIndex: 0 },
     }));
 
   setVisibleColumns = visibleColumns => this.setState({ visibleColumns });

src/components/datagrid/data_grid.tsx

@@ -198,9 +198,10 @@ function renderPagination(props: EuiDataGridProps) {
     onChangePage,
     onChangeItemsPerPage,
   } = pagination;
+
   const pageCount = Math.ceil(props.rowCount / pageSize);
 
-  if (pageCount === 1) {
+  if (props.rowCount < pageSizeOptions[0]) {
     return null;
   }