Pagination: Component is hidden when itemCount is lower than pageSize

sjbur · aleksei-semikozov · web-flow · commit a0b85fef37c8 · 2025-09-11T10:46:56.000+02:00
Co-authored-by: Aleksey Semikozov &lt;alwexy@gmail.com&gt;
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/pager.ts b/packages/devextreme-angular/src/ui/card-view/nested/pager.ts
@@ -82,10 +82,10 @@ export class DxoCardViewPagerComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get showPageSizeSelector(): boolean {
+    get showPageSizeSelector(): boolean | Mode {
         return this._getOption('showPageSizeSelector');
     }
-    set showPageSizeSelector(value: boolean) {
+    set showPageSizeSelector(value: boolean | Mode) {
         this._setOption('showPageSizeSelector', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/pager.ts b/packages/devextreme-angular/src/ui/data-grid/nested/pager.ts
@@ -82,10 +82,10 @@ export class DxoDataGridPagerComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get showPageSizeSelector(): boolean {
+    get showPageSizeSelector(): boolean | Mode {
         return this._getOption('showPageSizeSelector');
     }
-    set showPageSizeSelector(value: boolean) {
+    set showPageSizeSelector(value: boolean | Mode) {
         this._setOption('showPageSizeSelector', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/pager.ts b/packages/devextreme-angular/src/ui/nested/base/pager.ts
@@ -54,10 +54,10 @@ export abstract class DxoPager extends NestedOption {
         this._setOption('showNavigationButtons', value);
     }
 
-    get showPageSizeSelector(): boolean {
+    get showPageSizeSelector(): Mode | boolean {
         return this._getOption('showPageSizeSelector');
     }
-    set showPageSizeSelector(value: boolean) {
+    set showPageSizeSelector(value: Mode | boolean) {
         this._setOption('showPageSizeSelector', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pagination/index.ts b/packages/devextreme-angular/src/ui/pagination/index.ts
@@ -20,7 +20,7 @@ import {
 } from '@angular/core';
 
 
-import { DisplayMode } from 'devextreme/common';
+import { DisplayMode, Mode } from 'devextreme/common';
 import { EventInfo } from 'devextreme/common/core/events';
 
 import DxPagination from 'devextreme/ui/pagination';
@@ -300,10 +300,10 @@ export class DxPaginationComponent extends DxComponent implements OnDestroy, OnC
     
      */
     @Input()
-    get showPageSizeSelector(): boolean {
+    get showPageSizeSelector(): boolean | Mode {
         return this._getOption('showPageSizeSelector');
     }
-    set showPageSizeSelector(value: boolean) {
+    set showPageSizeSelector(value: boolean | Mode) {
         this._setOption('showPageSizeSelector', value);
     }
 
@@ -509,7 +509,7 @@ export class DxPaginationComponent extends DxComponent implements OnDestroy, OnC
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() showPageSizeSelectorChange: EventEmitter<boolean>;
+    @Output() showPageSizeSelectorChange: EventEmitter<boolean | Mode>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/pager.ts b/packages/devextreme-angular/src/ui/tree-list/nested/pager.ts
@@ -82,10 +82,10 @@ export class DxoTreeListPagerComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get showPageSizeSelector(): boolean {
+    get showPageSizeSelector(): boolean | Mode {
         return this._getOption('showPageSizeSelector');
     }
-    set showPageSizeSelector(value: boolean) {
+    set showPageSizeSelector(value: boolean | Mode) {
         this._setOption('showPageSizeSelector', value);
     }
 
diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts
@@ -1985,7 +1985,7 @@ type IPagerProps = React.PropsWithChildren<{
   label?: string;
   showInfo?: boolean;
   showNavigationButtons?: boolean;
-  showPageSizeSelector?: boolean;
+  showPageSizeSelector?: boolean | Mode;
   visible?: boolean | Mode;
 }>
 const _componentPager = (props: IPagerProps) => {
diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts
@@ -2178,7 +2178,7 @@ type IPagerProps = React.PropsWithChildren<{
   label?: string;
   showInfo?: boolean;
   showNavigationButtons?: boolean;
-  showPageSizeSelector?: boolean;
+  showPageSizeSelector?: boolean | Mode;
   visible?: boolean | Mode;
 }>
 const _componentPager = (props: IPagerProps) => {
diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts
@@ -1854,7 +1854,7 @@ type IPagerProps = React.PropsWithChildren<{
   label?: string;
   showInfo?: boolean;
   showNavigationButtons?: boolean;
-  showPageSizeSelector?: boolean;
+  showPageSizeSelector?: boolean | Mode;
   visible?: boolean | Mode;
 }>
 const _componentPager = (props: IPagerProps) => {
diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts
@@ -2409,7 +2409,7 @@ const DxPagerConfig = {
     label: String,
     showInfo: Boolean,
     showNavigationButtons: Boolean,
-    showPageSizeSelector: Boolean,
+    showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
     visible: [Boolean, String] as PropType<boolean | Mode>
   }
 };
diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts
@@ -2727,7 +2727,7 @@ const DxPagerConfig = {
     label: String,
     showInfo: Boolean,
     showNavigationButtons: Boolean,
-    showPageSizeSelector: Boolean,
+    showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
     visible: [Boolean, String] as PropType<boolean | Mode>
   }
 };
diff --git a/packages/devextreme-vue/src/pagination.ts b/packages/devextreme-vue/src/pagination.ts
@@ -5,6 +5,7 @@ import Pagination, { Properties } from "devextreme/ui/pagination";
 import  DOMComponent from "devextreme/core/dom_component";
 import {
  DisplayMode,
+ Mode,
 } from "devextreme/common";
 import {
  EventInfo,
@@ -70,7 +71,7 @@ const componentConfig = {
     rtlEnabled: Boolean,
     showInfo: Boolean,
     showNavigationButtons: Boolean,
-    showPageSizeSelector: Boolean,
+    showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
     tabIndex: Number,
     visible: Boolean,
     width: [Number, String]
diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts
@@ -2410,7 +2410,7 @@ const DxPagerConfig = {
     label: String,
     showInfo: Boolean,
     showNavigationButtons: Boolean,
-    showPageSizeSelector: Boolean,
+    showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
     visible: [Boolean, String] as PropType<boolean | Mode>
   }
 };
diff --git a/packages/devextreme/js/__internal/pagination/__tests__/content.test.ts b/packages/devextreme/js/__internal/pagination/__tests__/content.test.ts
@@ -0,0 +1,122 @@
+import { describe, expect, it } from '@jest/globals';
+import type { ComponentWrapperProps } from '@ts/core/r1/component_wrapper';
+
+import Pagination from '../wrappers/pagination';
+
+describe('Pagination visibility', () => {
+  const createPagination = (config: ComponentWrapperProps): {
+    container: HTMLElement;
+    pagination: Pagination;
+  } => {
+    const container = document.createElement('div');
+    const pagination = new Pagination(container, {
+      pageSize: 10,
+      pageIndex: 1,
+      pagesNavigatorVisible: 'auto',
+      hasKnownLastPage: true,
+      showInfo: false,
+      showNavigationButtons: false,
+      showPageSizeSelector: false,
+      ...config,
+    });
+    return { container, pagination };
+  };
+
+  const isPagesContainerVisible = (container: HTMLElement): boolean => {
+    const pagesContainer = container.querySelector('.dx-pages');
+    const style = pagesContainer?.getAttribute('style');
+    const isVisible = style === null || !style?.includes('visibility: hidden');
+    return isVisible;
+  };
+
+  const isPagesContainerHidden = (container: HTMLElement): boolean => {
+    const pagesContainer = container.querySelector('.dx-pages');
+    const isHidden = pagesContainer?.getAttribute('style')?.includes('visibility: hidden') ?? false;
+    return isHidden;
+  };
+
+  describe('when pageCount = 1', () => {
+    it('should hide container when no explicit visible components are enabled', () => {
+      const { container } = createPagination({ itemCount: 5, pageSize: 10 });
+
+      expect(isPagesContainerHidden(container)).toBe(true);
+    });
+
+    it('should hide container when showPageSizeSelector is set to auto', () => {
+      const { container } = createPagination({ itemCount: 5, pageSize: 10, showPageSizeSelector: 'auto' });
+
+      expect(isPagesContainerHidden(container)).toBe(true);
+    });
+
+    it('should show container when showInfo is enabled', () => {
+      const { container } = createPagination({
+        itemCount: 8,
+        pageSize: 10,
+        showInfo: true,
+      });
+
+      expect(isPagesContainerVisible(container)).toBe(true);
+    });
+
+    it('should show container when showNavigationButtons is enabled', () => {
+      const { container } = createPagination({
+        itemCount: 6,
+        pageSize: 10,
+        showNavigationButtons: true,
+      });
+
+      expect(isPagesContainerVisible(container)).toBe(true);
+    });
+
+    it('should show container when showPageSizeSelector is enabled', () => {
+      const { container } = createPagination({
+        itemCount: 9,
+        pageSize: 10,
+        showPageSizeSelector: true,
+        allowedPageSizes: [5, 10, 'all'],
+      });
+
+      expect(isPagesContainerVisible(container)).toBe(true);
+    });
+  });
+
+  describe('when pageCount > 1', () => {
+    it('should always show container regardless of other settings', () => {
+      const { container } = createPagination({
+        itemCount: 25,
+        pageSize: 10,
+      });
+
+      expect(isPagesContainerVisible(container)).toBe(true);
+    });
+  });
+
+  describe('dynamic visibility changes', () => {
+    it('should toggle visibility when showInfo changes at runtime', () => {
+      const { container, pagination } = createPagination({
+        itemCount: 7,
+        pageSize: 10,
+      });
+
+      pagination.option('showInfo', true);
+
+      expect(isPagesContainerVisible(container)).toBe(true);
+
+      pagination.option('showInfo', false);
+
+      expect(isPagesContainerHidden(container)).toBe(true);
+    });
+  });
+
+  it('should keep info block visible when pageSize > itemCount and showInfo=true (T1299780)', () => {
+    const { container } = createPagination({
+      itemCount: 4,
+      pageSize: 10,
+      showInfo: true,
+      allowedPageSizes: [4, 6, 11],
+    });
+
+    const infoBlock = container.querySelector('.dx-info');
+    expect(infoBlock).toBeTruthy();
+  });
+});
diff --git a/packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts b/packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts
@@ -18,7 +18,7 @@ export interface BasePaginationProps extends BaseWidgetProps {
   visible?: boolean;
   hasKnownLastPage?: boolean;
   pagesNavigatorVisible?: boolean | 'auto';
-  showPageSizeSelector?: boolean;
+  showPageSizeSelector?: boolean | 'auto';
   allowedPageSizes: (number | PageSize)[];
   rtlEnabled?: boolean;
   showNavigationButtons?: boolean;
@@ -37,7 +37,7 @@ export const BasePaginationDefaultProps: BasePaginationProps = {
   visible: true,
   hasKnownLastPage: true,
   pagesNavigatorVisible: 'auto',
-  showPageSizeSelector: true,
+  showPageSizeSelector: 'auto',
   allowedPageSizes: [5, 10],
   showNavigationButtons: false,
   itemCount: 1,
diff --git a/packages/devextreme/js/__internal/pagination/content.tsx b/packages/devextreme/js/__internal/pagination/content.tsx
@@ -159,10 +159,24 @@ export class PaginationContent extends InfernoComponent<PaginationContentProps>
   }
 
   getPagesContainerVisibility(): 'hidden' | undefined {
-    if (this.props.pagesNavigatorVisible === 'auto' && this.props.pageCount === 1 && this.props.hasKnownLastPage) {
-      return 'hidden';
-    }
-    return undefined;
+    const {
+      pagesNavigatorVisible,
+      pageCount,
+      hasKnownLastPage,
+      showInfo,
+      showNavigationButtons,
+      showPageSizeSelector,
+    } = this.props;
+
+    const shouldHideBasedOnPageCount = pagesNavigatorVisible === 'auto' && pageCount === 1 && hasKnownLastPage;
+
+    const hasExplicitVisibleComponents = Boolean(showInfo) || Boolean(showNavigationButtons)
+    || showPageSizeSelector === true;
+
+    const shouldHide = shouldHideBasedOnPageCount && !hasExplicitVisibleComponents;
+    const result = shouldHide ? 'hidden' : undefined;
+
+    return result;
   }
 
   getIsLargeDisplayMode(): boolean {
diff --git a/packages/devextreme/js/ui/pagination.d.ts b/packages/devextreme/js/ui/pagination.d.ts
@@ -1,6 +1,7 @@
 import Widget, { WidgetOptions } from './widget/ui.widget';
 import {
     DisplayMode,
+    Mode,
 } from '../common';
 
 export {
@@ -40,9 +41,9 @@ export type PagerBase = {
     /**
      * @docid
      * @public
-     * @default false
+     * @default "auto"
      */
-    showPageSizeSelector?: boolean;
+    showPageSizeSelector?: boolean | Mode;
     /**
      * @docid
      * @public
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
@@ -1469,7 +1469,7 @@ declare module DevExpress.common {
     /**
      * [descr:PagerBase.showPageSizeSelector]
      */
-    showPageSizeSelector?: boolean;
+    showPageSizeSelector?: boolean | Mode;
     /**
      * [descr:PagerBase.label]
      */

Original file line number	Diff line number	Diff line change
`@@ -82,10 +82,10 @@ export class DxoCardViewPagerComponent extends NestedOption implements OnDestroy`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`@Input()`
`85`		`- get showPageSizeSelector(): boolean {`
	`85`	`+ get showPageSizeSelector(): boolean \| Mode {`
`86`	`86`	`return this._getOption('showPageSizeSelector');`
`87`	`87`	`}`
`88`		`- set showPageSizeSelector(value: boolean) {`
	`88`	`+ set showPageSizeSelector(value: boolean \| Mode) {`
`89`	`89`	`this._setOption('showPageSizeSelector', value);`
`90`	`90`	`}`
`91`	`91`
Original file line number	Diff line number	Diff line change
`@@ -82,10 +82,10 @@ export class DxoDataGridPagerComponent extends NestedOption implements OnDestroy`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`@Input()`
`85`		`- get showPageSizeSelector(): boolean {`
	`85`	`+ get showPageSizeSelector(): boolean \| Mode {`
`86`	`86`	`return this._getOption('showPageSizeSelector');`
`87`	`87`	`}`
`88`		`- set showPageSizeSelector(value: boolean) {`
	`88`	`+ set showPageSizeSelector(value: boolean \| Mode) {`
`89`	`89`	`this._setOption('showPageSizeSelector', value);`
`90`	`90`	`}`
`91`	`91`
Original file line number	Diff line number	Diff line change
`@@ -54,10 +54,10 @@ export abstract class DxoPager extends NestedOption {`
`54`	`54`	`this._setOption('showNavigationButtons', value);`
`55`	`55`	`}`
`56`	`56`
`57`		`- get showPageSizeSelector(): boolean {`
	`57`	`+ get showPageSizeSelector(): Mode \| boolean {`
`58`	`58`	`return this._getOption('showPageSizeSelector');`
`59`	`59`	`}`
`60`		`- set showPageSizeSelector(value: boolean) {`
	`60`	`+ set showPageSizeSelector(value: Mode \| boolean) {`
`61`	`61`	`this._setOption('showPageSizeSelector', value);`
`62`	`62`	`}`
`63`	`63`
Original file line number	Diff line number	Diff line change
`@@ -82,10 +82,10 @@ export class DxoTreeListPagerComponent extends NestedOption implements OnDestroy`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`@Input()`
`85`		`- get showPageSizeSelector(): boolean {`
	`85`	`+ get showPageSizeSelector(): boolean \| Mode {`
`86`	`86`	`return this._getOption('showPageSizeSelector');`
`87`	`87`	`}`
`88`		`- set showPageSizeSelector(value: boolean) {`
	`88`	`+ set showPageSizeSelector(value: boolean \| Mode) {`
`89`	`89`	`this._setOption('showPageSizeSelector', value);`
`90`	`90`	`}`
`91`	`91`
Original file line number	Diff line number	Diff line change
`@@ -2409,7 +2409,7 @@ const DxPagerConfig = {`
`2409`	`2409`	`label: String,`
`2410`	`2410`	`showInfo: Boolean,`
`2411`	`2411`	`showNavigationButtons: Boolean,`
`2412`		`- showPageSizeSelector: Boolean,`
	`2412`	`+ showPageSizeSelector: [Boolean, String] as PropType<boolean \| Mode>,`
`2413`	`2413`	`visible: [Boolean, String] as PropType<boolean \| Mode>`
`2414`	`2414`	`}`
`2415`	`2415`	`};`
Original file line number	Diff line number	Diff line change
`@@ -2727,7 +2727,7 @@ const DxPagerConfig = {`
`2727`	`2727`	`label: String,`
`2728`	`2728`	`showInfo: Boolean,`
`2729`	`2729`	`showNavigationButtons: Boolean,`
`2730`		`- showPageSizeSelector: Boolean,`
	`2730`	`+ showPageSizeSelector: [Boolean, String] as PropType<boolean \| Mode>,`
`2731`	`2731`	`visible: [Boolean, String] as PropType<boolean \| Mode>`
`2732`	`2732`	`}`
`2733`	`2733`	`};`