diff --git a/CHANGELOG.md b/CHANGELOG.md index b127a8268d2..928d80fd0c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Fixed UX/focus bug in `EuiDataGrid` when using keyboard shortcuts to paginate ([#2602](https://github.com/elastic/eui/pull/2602)) - Fixed `EuiIcon` accessibility by adding a `title` prop and a default `aria-label` ([#2554](https://github.com/elastic/eui/pull/2554)) - Fixed `EuiDataGrid`'s in-memory sorting of numeric columns when the cell data contains multiple digit groups ([#2603](https://github.com/elastic/eui/pull/2603)) +- Improved pagination in `EuiBasicTable`. `paginationBar` is hidden when there is no data and `EuiPagination` is displayed even when there is only one page ([#2598](https://github.com/elastic/eui/pull/#2598)) ## [`17.0.0`](https://github.com/elastic/eui/tree/v17.0.0) diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 3723786b529..d21a0243a12 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -388,7 +388,7 @@ export class EuiBasicTable extends Component< ); const table = this.renderTable(); - const paginationBar = this.renderPaginationBar(); + const paginationBar = this.renderPaginationBar(items.length); return (
@@ -1092,9 +1092,9 @@ export class EuiBasicTable extends Component< return profile.align; } - renderPaginationBar() { + renderPaginationBar(itemsLength: number) { const { error, pagination, onChange } = this.props; - if (!error && pagination) { + if (!error && pagination && itemsLength > 0) { if (!onChange) { throw new Error(`The Basic Table is configured with pagination but [onChange] is not configured. This callback must be implemented to handle pagination changes`); diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap index 284ef9963a2..7bf338a5fcd 100644 --- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap +++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap @@ -1,3 +1,63 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiPagination is rendered 1`] = ``; +exports[`EuiPagination is rendered 1`] = ` +
+ + + +
+`; diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 0e0517d4573..c4ae11a58c0 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -173,28 +173,23 @@ export const EuiPagination: FunctionComponent = ({ ); - if (pages.length > 1) { - const selectablePages = pages; - if (compressed) { - return ( -
- {previousButton} - {nextButton} -
- ); - } - + const selectablePages = pages; + if (compressed) { return ( -
+
{previousButton} - {firstPageButtons} - {selectablePages} - {lastPageButtons} {nextButton}
); } - // Don't render pagination if it isn't needed. Then span is here for a docs bug. - return ; + return ( +
+ {previousButton} + {firstPageButtons} + {selectablePages} + {lastPageButtons} + {nextButton} +
+ ); };