diff --git a/CHANGELOG.md b/CHANGELOG.md index 3da36124c60..3350407635f 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index ce5d1c6be35..8b4b229ccbe 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/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 (