Hide paginationBar in EuiBasicTable when there is no data

CHANGELOG.md

@@ -6,6 +6,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))
+- 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)
 

src/components/basic_table/basic_table.tsx

@@ -388,7 +388,7 @@ export class EuiBasicTable<T = any> extends Component<
     );
 
     const table = this.renderTable();
-    const paginationBar = this.renderPaginationBar();
+    const paginationBar = this.renderPaginationBar(items.length);
 
     return (
       <div className={classes} {...rest}>
@@ -1092,9 +1092,9 @@ export class EuiBasicTable<T = any> 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`);

src/components/pagination/__snapshots__/pagination.test.tsx.snap

@@ -1,3 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiPagination is rendered 1`] = `<span />`;
+exports[`EuiPagination is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPagination testClass1 testClass2"
+  data-test-subj="test subject string"
+  role="group"
+>
+  <button
+    aria-label="Previous page"
+    class="euiButtonIcon euiButtonIcon--text"
+    data-test-subj="pagination-button-previous"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </button>
+  <button
+    aria-label="Page 1 of 1"
+    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+    data-test-subj="pagination-button-0"
+    type="button"
+  >
+    <span
+      class="euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        1
+      </span>
+    </span>
+  </button>
+  <button
+    aria-label="Next page"
+    class="euiButtonIcon euiButtonIcon--text"
+    data-test-subj="pagination-button-next"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </button>
+</div>
+`;

src/components/pagination/pagination.tsx

@@ -173,28 +173,23 @@ export const EuiPagination: FunctionComponent<Props> = ({
     </EuiI18n>
   );
 
-  if (pages.length > 1) {
-    const selectablePages = pages;
-    if (compressed) {
-      return (
-        <div className={classes} {...rest}>
-          {previousButton}
-          {nextButton}
-        </div>
-      );
-    }
-
+  const selectablePages = pages;
+  if (compressed) {
     return (
-      <div className={classes} role="group" {...rest}>
+      <div className={classes} {...rest}>
         {previousButton}
-        {firstPageButtons}
-        {selectablePages}
-        {lastPageButtons}
         {nextButton}
       </div>
     );
   }
 
-  // Don't render pagination if it isn't needed. Then span is here for a docs bug.
-  return <span />;
+  return (
+    <div className={classes} role="group" {...rest}>
+      {previousButton}
+      {firstPageButtons}
+      {selectablePages}
+      {lastPageButtons}
+      {nextButton}
+    </div>
+  );
 };