PrimeNg DataTable

Now let’s dive into PrimeNg data table component. In this post, we will develope a good PrimeNg dataTable example. It has wonderfull properties such as pagination, sorting, resizing etc.  At first we must add components into app.module.ts file as usual. We need BrowserAnimationsModule for paging so we will add it to the project.

We must declare cols parameter to use prime table. Let’s define it in the component.ts file. Also fetch the list of your data from your service.


At the end, just write the code below to get the data table. I am using totalRecords variable to display table if data exists. It should be a good example to start using PrimeNg DataTable.

You can have a look at my other post about PrimeNg Progress Bar

If you have question do not forget to write from the chat button next to it or from the comment

You may also like...

4 Responses

  1. Aly Chiman says:

    Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at promoted as a resource on our blog ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    If you may be interested please in being included as a resource on our blog, please let me know.


  2. prasanna says:

    how to get the numRowCount which is in the HTML to the TS File
    which is selected by the user.

  1. March 7, 2019

    […] We can write the event code to the “this.selectHeaderMenu “. Then we can change the header in the function excelChoose. That’s just all. It is very easy and simple to change headers in PrimeNg ContextMenu with this example.  If you want to see another post about PrimeNg table, have a look to this PrimeNg Table […]

  2. March 9, 2019

    […] You can have a look at my other post about PrimeNg Datatable […]

Leave a Reply

Your email address will not be published. Required fields are marked *