Row Selection Guide

Access Row Selection State

The table instance already manages the row selection state for you (though as seen down below, it may be more convenient to manage the row selection state in your own scope). You can access the internal row selection state or the selected rows from a few APIs.

• getState().rowSelection - returns the internal row selection state
• getSelectedRowModel() - returns selected rows
• getFilteredSelectedRowModel() - returns selected rows after filtering
• getGroupedSelectedRowModel() - returns selected rows after grouping and sorting

console.log(table.getState().rowSelection) // get the row selection state - { 1: true, 2: false, etc... }
console.log(table.getSelectedRowModel().rows) // get full client-side selected rows
console.log(table.getFilteredSelectedRowModel().rows) // get filtered client-side selected rows
console.log(table.getGroupedSelectedRowModel().rows) // get grouped client-side selected rows

Note: If you are using manualPagination, be aware that the getSelectedRowModel API will only return selected rows on the current page because table row models can only generate rows based on the data that is passed in. Row selection state, however, can contain row ids that are not present in the data array just fine.

Manage Row Selection State

Even though the table instance will already manage the row selection state for you, it is usually more convenient to manage the state yourself in order to have easy access to the selected row ids that you can use to make API calls or other actions.

Use the onRowSelectionChange table option to hoist up the row selection state to your own scope. Then pass the row selection state back to the table instance using in the state table option.

import {createAngularTable, type AngularTable} from "@qualcomm-ui/angular/table"
import {signal} from "@angular/core"
import type {RowSelectionState} from "@qualcomm-ui/core/table"

// ...
export class ExampleComponent {
  rowSelection = signal<RowSelectionState>({}) // manage your own row selection state

  table = createAngularTable(() => ({
    // ...
    onRowSelectionChange: (updaterOrValue) => {
      const newSelection =
        typeof updaterOrValue === "function"
          ? updaterOrValue(this.rowSelection())
          : updaterOrValue
      this.rowSelection.set(newSelection)
    },
    state: {
      rowSelection: this.rowSelection(), // pass the row selection state back to the table instance
    },
  }))
}

Useful Row Ids

By default, the row id for each row is simply the row.index. If you are using row selection features, you most likely want to use a more useful row identifier, since the row selection state is keyed by row id. You can use the getRowId table option to specify a function that returns a unique row id for each row.

import {createAngularTable} from "@qualcomm-ui/angular/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // ...
    getRowId: (row) => row.uuid, // use the row's uuid from your database as the row id
  }))
}

Now as rows are selected, the row selection state will look something like this:

{
  "13e79140-62a8-4f9c-b087-5da737903b76": true,
  "f3e2a5c0-5b7a-4d8a-9a5c-9c9b8a8e5f7e": false
}

instead of this:

{
  "0": true,
  "1": false
}

Enable Row Selection Conditionally

Row selection is enabled by default for all rows. To either enable row selection conditionally for certain rows or disable row selection for all rows, you can use the enableRowSelection table option which accepts either a boolean or a function for more granular control.

import {createAngularTable} from "@qualcomm-ui/angular/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    enableRowSelection: (row) => row.original.age > 18, // only enable row selection for adults
    // ...
  }))
}

To enforce whether a row is selectable or not in your UI, you can use the row.getCanSelect() API for your checkboxes or other selection UI.

Single Row Selection

By default, the table allows multiple rows to be selected at once. If, however, you only want to allow a single row to be selected at once, you can set the enableMultiRowSelection table option to false to disable multi-row selection, or pass in a function to disable multi-row selection conditionally for a row's sub-rows.

This is useful for making tables that have radio buttons instead of checkboxes.

import {createAngularTable} from "@qualcomm-ui/angular/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // ...
    enableMultiRowSelection: false, // only allow a single row to be selected at once
    // enableMultiRowSelection: row => row.original.age > 18, // only allow a single row to be selected at once for adults
  }))
}

Sub-Row Selection

By default, selecting a parent row will select all of its sub-rows. If you want to disable auto sub-row selection, you can set the enableSubRowSelection table option to false to disable sub-row selection, or pass in a function to disable sub-row selection conditionally for a row's sub-rows.

import {createAngularTable} from "@qualcomm-ui/angular/table"

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // ...
    enableSubRowSelection: false, // disable sub-row selection
    // enableSubRowSelection: row => row.original.age > 18, // disable sub-row selection for adults
  }))
}

Render Row Selection UI

The table instance provides a few APIs to help you render your row selection UI.

<!-- Header checkbox for "select all" -->
<th q-table-header-cell>
  <label
    q-checkbox
    [ngModel]="table.getIsAllRowsSelected()"
    [indeterminate]="table.getIsSomeRowsSelected()"
    (ngModelChange)="table.toggleAllRowsSelected($event)"
  ></label>
</th>

<!-- Row checkbox -->
<td q-table-cell>
  <label
    q-checkbox
    [ngModel]="row.getIsSelected()"
    [disabled]="!row.getCanSelect()"
    (ngModelChange)="row.toggleSelected($event)"
  ></label>
</td>

<tbody q-table-body>
  @for (row of table.getRowModel().rows; track row.id) {
    <tr
      q-table-row
      [class.selected]="row.getIsSelected()"
      (click)="row.getToggleSelectedHandler()($event)"
    >
      @for (cell of row.getVisibleCells(); track cell.id) {
        <td q-table-cell>
          <ng-container *renderCell="cell; let value">{{ value }}</ng-container>
        </td>
      }
    </tr>
  }
</tbody>