[Data Grid] Add hidePerPageOptions prop into EuiDataGridPaginationPro…

…ps (#3700)

* Add hidePerPageOptions prop into EuiDataGridPaginationProps

* Use undefined or an empty array to hide per page select

* Fix typos

* Leave options if possible

* Add comments

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))
 - Added `returnKey` glyph to `EuiIcon` ([#3783](https://github.com/elastic/eui/pull/3783))
 

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
  */