Checkbox selection

The multiple selection can be achieved through checkboxes, which exist on each row instead of using a click event on a specific row. The selection is enabled by setting selectionMode as multiple on a column level (remember that plain selection provides this on a table level) and the selection property to hold the selected rows as an array of objects.

The component with the checkbox selection feature to select multiple browser records would be written as follows:

<p-dataTable [value]="basicBrowsers" [(selection)]="selectedBrowser">
  <p-header> Multiple Selection </p-header>
  <p-column [style]="{'width':'38px'}" selectionMode="multiple">
  </p-column>
  //Content goes here
</p-dataTable>

The following screenshot shows a snapshot result with a checkbox selection as an example:

In this selection, the selected records can be unselected by unselecting checkboxes. The checkbox selection supports the onHeaderCheckboxToggle event while toggling the header checkbox. Refer to the events section for more details.

When selection is enabled, use the dataKey attribute to avoid deep checking when comparing objects. If you cannot provide dataKey, use the compareSelectionBy property as "equals," which uses a reference for comparison instead of the default "deepEquals" comparison. The deepEquals comparison is not a good idea (especially for huge data) in terms of performance because it checks all the properties.

For example, the value of the browserId property could be chosen for dataKey as follows:
<p-dataTable dataKey="browserId" selection="true"> ... </p-dataTable>

Table of Contents for Checkbox selection

Create new playlist

Sign In

Sign Up

Table of Contents for
Checkbox selection