Must To Know

How to Use PrimeNG DataGrid Feature for Data Listing and Pagination in Angular

by · Published · Updated 



Displaying data efficiently is a common requirement in web applications, especially when you are working with large datasets. One of the most powerful features of the PrimeNG UI component library is the DataGrid, which allows you to showcase large amounts of data in an easy-to-read, paginated grid format. This makes it easier for users to navigate through large sets of information.


In this tutorial, we’ll dive into how to use the PrimeNG DataGrid component in Angular applications to display data in a grid view with built-in pagination.


What is PrimeNG DataGrid?


PrimeNG is a popular library for Angular that offers a collection of reusable UI components. The DataGrid component in PrimeNG, often referred to as p-table, is a powerful table/grid UI element that supports features like:


    

  • Sorting: Organizing data based on ascending or descending order.
    • 

  • Pagination: Splitting data into pages for easy navigation.
    • 

  • Filtering: Allowing users to search or filter data in the grid.
    • 

  • Responsive Layouts: Adapting to different screen sizes.
    • 

  • Customizable Columns: Configuring columns, templates, and styles to fit your needs.
    • 



Step 1: Install PrimeNG in Your Angular Project


To get started with PrimeNG in your Angular project, you first need to install the necessary dependencies. PrimeNG components, including the DataGrid, require PrimeNG and PrimeIcons.


Install PrimeNG and PrimeIcons


Run the following npm commands to install PrimeNG and PrimeIcons:




npm install primeng --save

npm install primeicons --save






Once installed, make sure to import the required modules into your Angular project.


Import PrimeNG Table Module


In your app.module.ts file, import the TableModule from PrimeNG:




import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { TableModule } from 'primeng/table'; // Import the Table module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // For animations

import { FormsModule } from '@angular/forms'; // For two-way binding


@NgModule({

  declarations: [AppComponent],

  imports: [

    BrowserModule,

    TableModule, // Add the TableModule to imports

    BrowserAnimationsModule, // Required for animations in PrimeNG

    FormsModule, // For two-way data binding

  ],

  providers: [],

  bootstrap: [AppComponent],

})

export class AppModule {}






Step 2: Implementing the DataGrid with Pagination


Once you’ve set up the necessary dependencies, you can begin using the PrimeNG DataGrid component (p-table) in your Angular template.


Basic DataGrid Setup


In the app.component.html file, define a p-table element to create the grid. Here’s an example of how to set up a basic DataGrid with pagination:




<h3>DataGrid Example with Pagination</h3>

<p-table [value]="products" [paginator]="true" [rows]="10" [responsive]="true">

  <ng-template pTemplate="header">

    <tr>

      <th>Name</th>

      <th>Category</th>

      <th>Price</th>

    </tr>

  </ng-template>


  <ng-template pTemplate="body" let-product>

    <tr>

      <td>{{ product.name }}</td>

      <td>{{ product.category }}</td>

      <td>\${{ product.price }}</td>

    </tr>

  </ng-template>

</p-table>






Component Setup


In your app.component.ts file, define the products array to hold the data you want to display in the grid:




import { Component } from '@angular/core';


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  products = [

    { name: 'Product 1', category: 'Category 1', price: 10 },

    { name: 'Product 2', category: 'Category 2', price: 20 },

    { name: 'Product 3', category: 'Category 1', price: 30 },

    { name: 'Product 4', category: 'Category 3', price: 40 },

    { name: 'Product 5', category: 'Category 2', price: 50 },

    { name: 'Product 6', category: 'Category 1', price: 60 },

    { name: 'Product 7', category: 'Category 3', price: 70 },

    { name: 'Product 8', category: 'Category 2', price: 80 },

    { name: 'Product 9', category: 'Category 1', price: 90 },

    { name: 'Product 10', category: 'Category 3', price: 100 },

    { name: 'Product 11', category: 'Category 2', price: 110 },

    { name: 'Product 12', category: 'Category 1', price: 120 },

    { name: 'Product 13', category: 'Category 3', price: 130 },

    { name: 'Product 14', category: 'Category 2', price: 140 },

  ];

}






Explanation:


    

  • [value]="products": Binds the products array to the table data.
    • 

  • [paginator]="true": Enables pagination on the table.
    • 

  • [rows]="10": Specifies how many rows should be displayed per page.
    • 

  • [responsive]="true": Makes the table responsive to screen size changes.
    • 

  • pTemplate="header": Defines the header template for the table.
    • 

  • pTemplate="body": Defines the body template where each row will be displayed.
    • 



With this setup, the DataGrid will display the first 10 products in the grid and provide pagination controls for navigating through the data.


Step 3: Customize Pagination


PrimeNG allows you to customize the pagination of the DataGrid to match your application’s design needs. You can adjust settings like the number of rows per page, page navigation buttons, and more.


Customizing Pagination Settings


To customize the pagination, you can use the [rowsPerPageOptions] property to provide different options for how many rows to display per page. Here’s an example:




<p-table [value]="products" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5, 10, 15]" [responsive]="true">

  <ng-template pTemplate="header">

    <tr>

      <th>Name</th>

      <th>Category</th>

      <th>Price</th>

    </tr>

  </ng-template>


  <ng-template pTemplate="body" let-product>

    <tr>

      <td>{{ product.name }}</td>

      <td>{{ product.category }}</td>

      <td>\${{ product.price }}</td>

    </tr>

  </ng-template>

</p-table>






In this example, the user can choose to view 5, 10, or 15 rows per page using the pagination controls.


Step 4: Advanced Features


1. Sorting Data: You can enable sorting in the table by adding the sortable attribute to each column header:




<th pSortableColumn="name">Name</th>






2. Filtering Data: PrimeNG also supports easy filtering. You can add a filter input to each column header:




<th pSortableColumn="name">

  Name

  <p-tableFilterField field="name"></p-tableFilterField>

</th>






3. Dynamic Column Management: PrimeNG also supports dynamic column visibility, resizing, and reordering.


4. Custom Templates: You can also customize the display of each row, including conditional rendering and templating with custom components.


Step 5: Styling the DataGrid


You can style the p-table to match your application’s design by using PrimeNG themes or your custom CSS.


To use a PrimeNG theme, import it in your angular.json file:




"styles": [

  "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",

  "node_modules/primeng/resources/primeng.min.css",

  "src/styles.css"

]






You can also add custom CSS to target specific parts of the DataGrid component.


Conclusion


The PrimeNG DataGrid (p-table) component is an excellent tool for displaying large datasets in a clean and organized grid view with pagination. With built-in features like sorting, filtering, and responsive layouts, PrimeNG makes it easy to build data-driven applications with a rich user experience.


By following the steps in this guide, you should be able to integrate the PrimeNG DataGrid into your Angular project with pagination, and even customize it to meet your specific needs.


Tweet
Share
Pin
Share2
2 Shares
          
        


        
        

      


    

  






Tags: 







	You may also like...









	
		
5 Responses


		

				


			
    
						
  1. 
				
    
				
    
						http://es.html.net/forums/viewtopic.php?f=21&t=26935&p=58080 says:		
    
		
		
    
			March 23, 2019 at 9:17 pm		
    

		
    My family always say that I am killing my time here at web, however I know I am getting knowledge every day by reading such pleasant articles.
    

		
    
				
    
				
    2. 
		
  2. 
				
    
				
    
						sneakers golden goose femme says:		
    
		
		
    
			May 28, 2019 at 9:18 pm		
    

		
    I couldn’t resist commenting. Perfectly written!
    

		
    
				
    
				
    3. 
		
  3. 
				
    
				
    
						camera dahua hải nam says:		
    
		
		
    
			July 20, 2019 at 5:53 am		
    

		
    Hello there, just became alert to your blog through Google, and found that it’s truly informative.
    
I am going to watch out for brussels. I will be grateful if you continue this in future.
    
Numerous people will be benefited from your writing.
    
Cheers!
    

		
    
				
    
				
    4. 
		
  4. 
				
    
				
    
						camera wifi hải nam says:		
    
		
		
    
			July 20, 2019 at 11:37 pm		
    

		
    What’s up, everything is going sound here and ofcourse every one is sharing data, that’s
    
really good, keep up writing.
    

		
    
				
    
				
    5. 
		
  5. 
				
    
				
    
						College CEI says:		
    
		
		
    
			July 22, 2019 at 6:53 am		
    

		
    Everything is very open with a very clear clarification of the
    
challenges. It was really informative. Your website is useful.
    
Thanks for sharing!
    

		
    
				
    
				
    6. 
			


			
		

		
		
	
		

		
Leave a Reply