EuiDataGrid: fixed Rows per page controls disappear when there's only a single page

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 No public interface changes since `20.1.0`.
 
+- Fixed `EuiDataGrid` to render page sizes which are less than current number of rows ([#2978](https://github.com/elastic/eui/pull/2978))
+
 ## [`20.1.0`](https://github.com/elastic/eui/tree/v20.1.0)
 
 - Added `theme` prop to `EuiCodeEditor` in support of `AceEditor` themes ([#2970](https://github.com/elastic/eui/pull/2970))

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

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