Checkbox not getting selected in primeNG datatable

Question

I am building an application using angular 2. We are having a requirement where in we need to display data in a table with filtering on each column and pagination. Apart from these we would need check boxes on each row so that the user can select multiple rows to perform certain operations. For this purpose i am using PrimeNG datatable, but i face an issue when using the table in checkbox seletion mode. When i click on the checkbox the row gets selected but the checkbox is not checked. I am pasting the code below.

 <p-dataTable [value]="devices" [(selection)]="selectedDevices">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column field="macAddress" header="STB"></p-column>
    <p-column field="userId" header="User ID"></p-column>
    <p-column field="rackNumber" header="Rack No"></p-column>
    <p-column field="modelNumber" header="Model"></p-column>
    <p-column field="environment" header="Environment"></p-column>
    <p-column field="uiBuild" header="UI Build"></p-column>
    <footer>
        <ul>
            <li *ngFor="let device of selectedDevices" style="text-align: left">{{device.macAddress + ' - ' + device.userId + ' - ' + device.rackNumber + ' - ' + device.modelNumber}}</li>
        </ul>
    </footer>
</p-dataTable>

can someone tell me what am i missing here?

Answer 1

Try this and see if it helps

<p-dataTable [value]="devices" selectionMode="multiple" [(selection)]="selectedDevices">
    <p-column field="macAddress" header="STB"></p-column>
    <p-column field="userId" header="User ID"></p-column>
    <p-column field="rackNumber" header="Rack No"></p-column>
    <p-column field="modelNumber" header="Model"></p-column>
    <p-column field="environment" header="Environment"></p-column>
    <p-column field="uiBuild" header="UI Build"></p-column>
    <footer>
        <ul>
            <li *ngFor="let device of selectedDevices" style="text-align: left">{{device.macAddress + ' - ' + device.userId + ' - ' + device.rackNumber + ' - ' + device.modelNumber}}</li>
        </ul>
    </footer>
</p-dataTable>

selectionMode needs to be specified for p-dataTable not p-column.

PrimeNg DataTable will automatically add the column for select box so you don't have to do so.

Answer 2

You probably just forget to add dataKey="macAddress" in p-dataTable :

 <p-dataTable [value]="devices" [(selection)]="selectedDevices"  dataKey="macAddress">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column field="macAddress" header="STB"></p-column>
    <p-column field="userId" header="User ID"></p-column>
    <p-column field="rackNumber" header="Rack No"></p-column>
    <p-column field="modelNumber" header="Model"></p-column>
    <p-column field="environment" header="Environment"></p-column>
    <p-column field="uiBuild" header="UI Build"></p-column>
    <footer>
        <ul>
            <li *ngFor="let device of selectedDevices" style="text-align: left">{{device.macAddress + ' - ' + device.userId + ' - ' + device.rackNumber + ' - ' + device.modelNumber}}</li>
        </ul>
    </footer>
</p-dataTable>