Disable Pagination

Learn how to disable pagination in CMS entity lists to display all items in a single page

Disable Pagination

Learn how to disable pagination in CMS entity lists to display all items in a single page. This feature is useful when you have a small dataset or want to show all items without page navigation.

A comprehensive guide for disabling pagination in entity list configurations. This guide covers how to use the pagination property in filterDto within CMS_FILTER_CONFIG to disable pagination and display all items at once.

---

Overview

The pagination property in filterDto (within CMS_FILTER_CONFIG) allows you to:

1. Disable pagination - Hide pagination controls and display all items in a single page

2. Show all items - Load and display all items without page limits

3. Simplify navigation - Remove page navigation for small datasets

4. Improve UX for small lists - Better experience when dealing with limited number of items

---

Use Case 1: Disable Pagination for Small Datasets

Scenario

You have a categories list with a small number of items (e.g., 10-50 categories) and want to display all of them in a single page without pagination controls.

Configuration

import { CMS_FILTER_CONFIG, FilterSchema } from '@tradinos/cms-frontend-entity';
import { Category } from './category.model';

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual',
    filterDto: {
      page: 0,
      pagination: false,  // Disable pagination
    },
    inputs: [
      {
        key: 'id',
        label: 'id',
        inputType: FilterInputType.text,
      },
    ],
  } as FilterSchema,
}

Example from Codebase

File: src/app/dashboard/categories/categories.component.ts

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual',
    filterDto: {
      page: 0,
      // Disable Pagination Configuration
      // See documentation: docs/[Frontend] Entity/Disable Pagination.md
      // This disables pagination and shows all items in a single page
      pagination: false,
    },
    inputs: [
      {
        key: 'id',
        label: 'id',
        inputType: FilterInputType.text,
      },
    ],
  } as FilterSchema,
}

Parameters Explained

Parameter	Type	Description	Required
filterDto.pagination	boolean	Enable/disable pagination. Set to false to disable	Optional (default: true)

How it Works

1. Pagination Disabled: When pagination: false is set in filterDto, the pagination controls are hidden

2. All Items Loaded: The table loads all items from the API in a single request

3. No Page Navigation: Users cannot navigate between pages

4. Single Page Display: All items are displayed in one scrollable table

---

Use Case 2: Conditional Pagination Based on Data Size

Scenario

You want to disable pagination only when the dataset is small, but enable it for larger datasets.

Configuration

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterDto: {
      page: 0,
      // Disable pagination for small datasets
      // Enable it programmatically if needed based on data size
      pagination: false,
    },
  } as FilterSchema,
}

Note: You can also control this dynamically in the service by checking the total count and enabling/disabling pagination accordingly.

---

Complete Examples

Example 1: Basic Disable Pagination

import { Component } from '@angular/core';
import { 
  CMS_CRUD_CONFIG, 
  CMS_FILTER_CONFIG, 
  CRUDConfig, 
  EntityService, 
  FilterSchema,
  FilterInputType 
} from '@tradinos/cms-frontend-entity';
import { Category } from './category.model';
import { CategoriesService } from './services/categories.service';

@Component({
  selector: 'app-categories',
  standalone: true,
  providers: [
    CategoriesService,
    {
      provide: EntityService<Category>,
      useExisting: CategoriesService,
    },
    {
      provide: CMS_CRUD_CONFIG,
      useValue: {
        openFormType: 'page',
        endPoints: { 
          index: 'categories', 
          view: (id: any) => `categories/byID/${id}` 
        },
        actionsMode: 'backend',
        tableConfiguration: {
          dataKey: 'id',
          columnsMode: 'manual',
          actionsMode: 'manual',
        },
      } as CRUDConfig<Category>,
    },
    {
      provide: CMS_FILTER_CONFIG,
      useValue: {
        filterInputsMode: 'manual',
        filterDto: {
          page: 0,
          pagination: false,  // Disable pagination
        },
        inputs: [
          {
            key: 'id',
            label: 'id',
            inputType: FilterInputType.text,
          },
        ],
      } as FilterSchema,
    },
  ],
})
export class CategoriesComponent {}

Result:

• All categories are displayed in a single page

• No pagination controls are shown

• Users can scroll through all items

---

Example 2: Disable Pagination with Backend Filter Inputs

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterDto: {
      page: 0,
      pagination: false,  // No pagination for tags list
    },
    filterInputsMode: "backend",
  } as FilterSchema,
}

---

Example 3: Disable Pagination with Custom Filter DTO

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterDto: {
      page: 0,
      per_page: 100,  // Optional: set a high limit
      pagination: false,  // Disable pagination UI
    },
    filterInputsMode: 'manual',
    inputs: [
      {
        key: 'name',
        label: 'Name',
        inputType: FilterInputType.text,
      },
    ],
  } as FilterSchema,
}

---

Comparison Table

Configuration	Pagination	Use Case	Items Displayed
pagination: true (default)	✅ Enabled	Large datasets	Limited per page
pagination: false	❌ Disabled	Small datasets	All items

---

Best Practices

1. Use for small datasets: Disable pagination only when you have a manageable number of items (< 100)

2. Consider performance: Loading all items at once may impact performance for large datasets

   // Good: Small dataset
   pagination: false  // For 10-50 items
   
   // Bad: Large dataset
   pagination: false  // For 1000+ items (may cause performance issues)

3. Use with filtering: Combine disabled pagination with search/filter functionality

   {
     provide: CMS_FILTER_CONFIG,
     useValue: {
       filterInputsMode: 'manual',
       filterDto: {
         page: 0,
         pagination: false,
       },
       inputs: [
         { key: 'name', inputType: FilterInputType.text }
       ],
     },
   }

4. Document the decision: Add comments explaining why pagination is disabled

   // Disable pagination: Categories list is small (< 50 items)
   pagination: false,

5. Keep page property: Always include page: 0 in filterDto even when pagination is disabled

   filterDto: {
     page: 0,  // Required
     pagination: false,  // Disable pagination
   }

6. ⚠️ Backend Compatibility: CRITICAL - Make sure your backend API accepts requests without limit parameter when pagination is disabled. The frontend will request all items without pagination limits, so your backend must be able to return all items in a single response.

   // Frontend sends (when pagination: false):
   GET /api/categories?page=0
   // Note: No limit parameter is sent
   
   // Backend must return all items:
   {
     "data": [...all categories...],
     "total": 50
   }

   Backend Implementation Example (NestJS):

   @Get()
   async findAll(@Query() query: any) {
     // When pagination is disabled, query.limit might be undefined
     // Backend should handle this and return all items
     if (!query.limit && query.pagination === false) {
       return this.categoriesService.findAll();
     }
     // Otherwise, use pagination
     return this.categoriesService.findAllWithPagination(query);
   }

---

Common Patterns

Pattern 1: Simple Disable with Manual Filters

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual',
    filterDto: {
      page: 0,
      pagination: false,
    },
    inputs: [
      { key: 'id', inputType: FilterInputType.text }
    ],
  } as FilterSchema,
}

Pattern 2: Disable with Backend Filters

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterDto: {
      page: 0,
      pagination: false,
    },
    filterInputsMode: "backend",
  } as FilterSchema,
}

Pattern 3: Disable with Custom Filter DTO

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual',
    filterDto: {
      page: 0,
      per_page: 100,
      pagination: false,
    },
    inputs: [
      { key: 'name', inputType: FilterInputType.text }
    ],
  } as FilterSchema,
}

---

Technical Details

How the Library Checks Pagination

The library checks the pagination property in filterDto to determine whether to show pagination controls:

// From the library source code
if (filterDto.pagination != false && !filterDto.per_page) {
  // Show pagination
}

if (cmsFilterConfig.filterDto.pagination ?? true) {
  // Use findAllWithPagination
} else {
  // Use findAll (load all items)
}

Important Notes

1. Default Value: If pagination is not specified, it defaults to true (pagination enabled)

2. per_page Interaction: Setting per_page can also affect pagination behavior

3. API Calls: When pagination: false, the library uses findAll() instead of findAllWithPagination()

4. ⚠️ Response Format Handling: IMPORTANT - When pagination: false, the library's findAll() method expects the response to be an array directly [...]. However, if your backend returns {data: [...], total: 9}, you need to override findAll() in your service to extract the array:

   import {Observable} from 'rxjs';
   import {map} from 'rxjs/operators';
   
   override findAll(queryParams?: any): Observable<Category[]> {
     return super.findAll(queryParams).pipe(
       map((response: any) => {
         // If response is an object with data property, extract the array
         if (response && typeof response === 'object' && Array.isArray(response.data)) {
           return response.data;
         }
         // If response is already an array, return it as is
         if (Array.isArray(response)) {
           return response;
         }
         // Fallback: return empty array
         return [];
       })
     );
   }

   Example from Codebase:

   • src/app/dashboard/categories/services/categories.service.ts - See lines 50-67

5. ⚠️ Backend Requirement: IMPORTANT - When disabling pagination, ensure your backend API endpoint accepts requests without a limit parameter and can return all items. The frontend will send requests without pagination limits, so the backend must be configured to handle unlimited result sets.

   // Backend should accept requests like:
   GET /api/categories  // Without limit parameter
   
   // And return all items:
   {
     "data": [...all items...],
     "total": 50
   }

   If your backend requires a limit, you may need to:

   • Configure the backend to accept unlimited requests when pagination: false

   • Or set a high per_page value in filterDto (e.g., per_page: 1000)

   • Or keep pagination enabled for large datasets

---

Related Documentation

• Table Configuration - Learn about other table configuration options

• CRUD Configuration - Understand CRUD configuration

• Filter Configuration - See how to configure filters

---

Summary

The pagination property in filterDto (within CMS_FILTER_CONFIG) provides a simple way to disable pagination:

• Disable pagination: Set pagination: false in filterDto to hide pagination controls

• Show all items: All items are loaded and displayed in a single page

• Better for small lists: Ideal for datasets with limited items (< 100)

• Simple configuration: Just one property in filterDto to disable pagination

This feature enables you to create simpler list views for small datasets, improving user experience when pagination is not needed.