PrimeNG data table not working

Question

I tried to use PrimeNG data table with angular2, but it does not seem to work. I have instaled PrimeNG with npm. In my component I import

import {DataTableModule,SharedModule} from 'primeng/primeng';

Then in template I use

<p-dataTable [value]="students">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

However it doesn't display anything, and i get error

Can't bind to 'value' since it isn't a known property of 'p-dataTable'.

npm list shows that I have version 1.0.1 installed and IDE finds import just fine.

What am I doing wrong?

Answer 1

I added the priming controls to my shared module so that I can use them all over the place.

import {InputTextModule, GalleriaModule, MenubarModule, CheckboxModule, DialogModule, MessagesModule, GrowlModule,
  PanelModule, CalendarModule, RadioButtonModule, InputSwitchModule, SelectButtonModule, DataTableModule, DataListModule,
  SplitButtonModule, ButtonModule, DropdownModule, AccordionModule, ProgressBarModule, ConfirmDialogModule, ConfirmationService, 
  TooltipModule } from 'primeng/primeng';

@NgModule({
  imports: [CommonModule, RouterModule, ReactiveFormsModule, 
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, 
            CalendarModule, SelectButtonModule, CheckboxModule, ProgressBarModule, DataTableModule, DataListModule, ConfirmDialogModule],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent, KgNumberSpinnerComponent, KgDateSpinnerComponent, KgFoodSearchComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, 
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
            SelectButtonModule, CheckboxModule, DataTableModule, DataListModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent,
            KgNumberSpinnerComponent, KgDateSpinnerComponent, ConfirmDialogModule, TooltipModule, KgFoodSearchComponent ]

})

This works just fine. I think you are trying to import the DataTableModule in the wrong spot.

I think you need to declare the DataTableModule import in the component.module like this (substitute DataTableModule for SharedModule):

import {SharedModule} from '../shared/shared.module' 


@NgModule({
    imports: [ SharedModule, routing ],
    declarations: [ SettingsComponent, SettingsPhysicalComponent ],
    bootstrap: [ SettingsComponent ],
    providers:[ SettingsPhysicalService ]
})

export class SettingsModule {
    constructor() {

    }

Answer 2

It's difficult to tell without seeing all your source files. I'll take a hunch in guessing you are not importing the modules correctly. This is more an Angular 2 issue, although PrimeNG's docs on component pages makes it a tad vague what to do.

Here is how you initialize your NgModule, by importing PrimeNG components as Angular 2 modules.

import { DataTableModule, SharedModule } from 'primeng/primeng';

@NgModule({
    imports: [ 
        DataTableModule,
        SharedModule,
        // any other modules like BrowserModule or FormsModule, etc
    ],
    // other declarations, providers, etc...
});

With that setup in place you can use p-dataTable in any component you write. The error you received is an indirect way of telling you that your app does not know what a p-dataTable component is. It has not been imported.

Answer 3

I had the same problem before with the table component and other ones. The problem is that the js files which exist in the primeng folder inside node_modules is a little bit different of what exist in the github project of primeng.

Are in fault some parts of code, because of this you saw that error. If you compare the ts of dataTable and the js file you have in your node_moduls folder you will see that some behaviours are missing.

I recreated them by hand in js file based on ts file present in github, and voilá that works properly.

Try yourself and giveme your feedback.