[Data Grid] Add hidePerPageOptions prop into EuiDataGridPaginationProps

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added possibility to hide "Rows per page" select in `EuiDataGrid` ([#3700](https://github.com/elastic/eui/pull/3700))
 - Updated lodash to `v4.17.19` ([#3764](https://github.com/elastic/eui/pull/3764))
 
 ## [`27.2.0`](https://github.com/elastic/eui/tree/v27.2.0)

src/components/datagrid/data_grid.tsx

@@ -217,11 +217,21 @@ function renderPagination(props: EuiDataGridProps, controls: string) {
     onChangeItemsPerPage,
   } = pagination;
   const pageCount = Math.ceil(props.rowCount / pageSize);
+  const minSizeOption =
+    pageSizeOptions && [...pageSizeOptions].sort((a, b) => a - b)[0];
 
-  if (props.rowCount < pageSizeOptions[0]) {
+  if (props.rowCount < (minSizeOption || pageSize)) {
+    /**
+     * Do not render the pagination when:
+     * 1. Rows count is less than min pagination option (rows per page)
+     * 2. Rows count is less than pageSize (the case when there are no pageSizeOptions provided)
+     */
     return null;
   }
 
+  // hide select rows per page if pageSizeOptions is undefined or an empty array
+  const hidePerPageOptions = !pageSizeOptions || pageSizeOptions.length === 0;
+
   return (
     <EuiI18n
       token="euiDataGrid.ariaLabelGridPagination"
@@ -247,6 +257,7 @@ function renderPagination(props: EuiDataGridProps, controls: string) {
                   <EuiTablePagination
                     aria-controls={controls}
                     activePage={pageIndex}
+                    hidePerPageOptions={hidePerPageOptions}
                     itemsPerPage={pageSize}
                     itemsPerPageOptions={pageSizeOptions}
                     pageCount={pageCount}

src/components/datagrid/data_grid_types.ts

@@ -175,9 +175,10 @@ export interface EuiDataGridPaginationProps {
    */
   pageSize: number;
   /**
-   * An array of page sizes the user can select from
+   * An array of page sizes the user can select from.
+   * Leave this prop undefined or use an empty array to hide "Rows per page" select button
    */
-  pageSizeOptions: number[];
+  pageSizeOptions?: number[];
   /**
    * A callback for when the user changes the page size selection
    */