Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Data Grid] Add hidePerPageOptions prop into EuiDataGridPaginationProps #3700

Merged
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
13 changes: 12 additions & 1 deletion src/components/datagrid/data_grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -247,6 +257,7 @@ function renderPagination(props: EuiDataGridProps, controls: string) {
<EuiTablePagination
aria-controls={controls}
activePage={pageIndex}
hidePerPageOptions={hidePerPageOptions}
itemsPerPage={pageSize}
itemsPerPageOptions={pageSizeOptions}
pageCount={pageCount}
Expand Down
5 changes: 3 additions & 2 deletions src/components/datagrid/data_grid_types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down