From b6b3e6342345601c4699fb96a93f6f3df72edf26 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 7 Jul 2020 12:54:49 +0300 Subject: [PATCH 1/5] Add hidePerPageOptions prop into EuiDataGridPaginationProps --- CHANGELOG.md | 1 + src-docs/src/views/datagrid/datagrid_example.js | 1 + src/components/datagrid/data_grid.tsx | 2 ++ src/components/datagrid/data_grid_types.ts | 4 ++++ 4 files changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 292062fa85c..8e918da00eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `hidePerPageOptions` prop into `EuiDataGridPaginationProps` ([#3700](https://github.com/elastic/eui/pull/3700)) - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638)) - Added `isClearable` and `placeholder` options to `EuiColorPicker` ([#3689](https://github.com/elastic/eui/pull/3689)) - Added SASS helper files for EUI theme globals ([#3691](https://github.com/elastic/eui/pull/3691)) diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js index d8dff34a1bc..c8cf1e2cb56 100644 --- a/src-docs/src/views/datagrid/datagrid_example.js +++ b/src-docs/src/views/datagrid/datagrid_example.js @@ -71,6 +71,7 @@ const gridSnippet = ` } // Optional. Add pagination. pagination={{ + hidePerPageOptions: true, pageIndex: 1, pageSize: 100, pageSizeOptions: [50, 100, 200], diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index ce5d1c6be35..c55f27fa411 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -210,6 +210,7 @@ function renderPagination(props: EuiDataGridProps, controls: string) { } const { + hidePerPageOptions, pageIndex, pageSize, pageSizeOptions, @@ -247,6 +248,7 @@ function renderPagination(props: EuiDataGridProps, controls: string) { Date: Wed, 15 Jul 2020 13:30:22 +0300 Subject: [PATCH 2/5] Use undefined or an empty array to hide per page select --- CHANGELOG.md | 2 +- src-docs/src/views/datagrid/datagrid_example.js | 1 - src/components/datagrid/data_grid.tsx | 6 ++++-- src/components/datagrid/data_grid_types.ts | 9 +++------ 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db50cd7a5ba..3430898e3aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `hidePerPageOptions` prop into `EuiDataGridPaginationProps` ([#3700](https://github.com/elastic/eui/pull/3700)) +- Added possibility to hide "Rows per page" select in `EuiDataGrid` ([#3700](https://github.com/elastic/eui/pull/3700)) - Updated `securityAnalyticsApp` app icon ([#3720](https://github.com/elastic/eui/pull/3720)) - Removed `src/test` and `@types/enzyme` references from `eui.d.ts` ([#3715](https://github.com/elastic/eui/pull/3715)) - Added `index.d.ts` file to `lib/test` and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715)) diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js index c8cf1e2cb56..d8dff34a1bc 100644 --- a/src-docs/src/views/datagrid/datagrid_example.js +++ b/src-docs/src/views/datagrid/datagrid_example.js @@ -71,7 +71,6 @@ const gridSnippet = ` } // Optional. Add pagination. pagination={{ - hidePerPageOptions: true, pageIndex: 1, pageSize: 100, pageSizeOptions: [50, 100, 200], diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index c55f27fa411..d0fad461680 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -210,7 +210,6 @@ function renderPagination(props: EuiDataGridProps, controls: string) { } const { - hidePerPageOptions, pageIndex, pageSize, pageSizeOptions, @@ -219,10 +218,13 @@ function renderPagination(props: EuiDataGridProps, controls: string) { } = pagination; const pageCount = Math.ceil(props.rowCount / pageSize); - if (props.rowCount < pageSizeOptions[0]) { + if (pageCount <= 1) { return null; } + // hide select rows per page if pageSizeOptions is undefined or an empty array + const hidePerPageOptions = !pageSizeOptions || pageSizeOptions.length === 0; + return ( Date: Wed, 15 Jul 2020 13:34:20 +0300 Subject: [PATCH 3/5] Fix typos --- src/components/datagrid/data_grid_types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index ffe90df9dfc..4c2a74e431d 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -176,7 +176,7 @@ export interface EuiDataGridPaginationProps { pageSize: number; /** * An array of page sizes the user can select from. - * Left this prop as an empty array or undefined to hide "Rows per page" select button + * Leave this prop undefined or use an empty array to hide "Rows per page" select button */ pageSizeOptions?: number[]; /** From fc4873f62457deaaa5005e32d31589b86341155b Mon Sep 17 00:00:00 2001 From: sulemanof Date: Fri, 17 Jul 2020 12:39:28 +0300 Subject: [PATCH 4/5] Leave options if possible --- src/components/datagrid/data_grid.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index d0fad461680..e7ba1d453cf 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -218,7 +218,10 @@ function renderPagination(props: EuiDataGridProps, controls: string) { } = pagination; const pageCount = Math.ceil(props.rowCount / pageSize); - if (pageCount <= 1) { + if ( + props.rowCount < + ((pageSizeOptions && pageSizeOptions.sort((a, b) => a - b)[0]) || pageSize) + ) { return null; } From b6e3a7e3e94e2791fb8864d8022b0f89c47854ac Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 23 Jul 2020 12:25:14 +0300 Subject: [PATCH 5/5] Add comments --- src/components/datagrid/data_grid.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index e7ba1d453cf..8b4b229ccbe 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -217,11 +217,15 @@ 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 && pageSizeOptions.sort((a, b) => a - b)[0]) || pageSize) - ) { + 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; }