swimlane/ngx-datatable：复选框条件禁用及组选功能问题咨询

Let's tackle your two ngx-datatable problems one by one with practical, actionable code examples:

1. Conditionally Enable/Disable Row Checkboxes #

ngx-datatable has a built-in checkboxable property for the selection column that lets you control whether individual row checkboxes are interactive. Here's how to set it up:

Step 1: Configure the Selection Column #

Add the checkboxable callback to your selection column definition. This function takes the current row as input and returns true (enabled) or false (disabled):

columns = [
  {
    prop: 'selection',
    name: '',
    checkboxable: (row: any) => row.status !== 'archived' // Disable if row is archived
  },
  { prop: 'name', name: 'Item Name' },
  { prop: 'status', name: 'Status' }
];

Step 2: Prepare Row Data with Condition Flags #

Make sure your row data includes the property you'll use to evaluate the disable condition:

rows = [
  { id: 1, name: 'Project Alpha', status: 'active' },
  { id: 2, name: 'Project Beta', status: 'archived' }, // Checkbox will be disabled
  { id: 3, name: 'Project Gamma', status: 'active' }
];

This will automatically gray out and disable checkboxes for rows matching your condition, preventing users from selecting them.

2. Fix Group Header Selection Not Checking Child Rows #

The official row grouping example doesn't include automatic child row selection when toggling a group header. To add this functionality, you'll need to customize the group header template and add selection logic:

Step 1: Customize the Group Header Template #

Update your template to include a checkbox in the group header, and bind a click handler to manage child selection:

<ngx-datatable
  class="material"
  [rows]="rows"
  [groupRowsBy]="'department'"
  [selected]="selectedRows"
  (select)="onRowSelect($event)">
  
  <!-- Custom Group Header with Checkbox -->
  <ng-template #groupHeaderTemplate let-group="group" let-expanded="expanded">
    <div style="padding-left: 12px; display: flex; align-items: center; gap: 8px;">
      <input 
        type="checkbox"
        (click)="toggleGroupSelection(group, $event)"
        [checked]="isGroupFullySelected(group)"
        [indeterminate]="isGroupPartiallySelected(group)"
      />
      <span (click)="toggleExpandGroup(group)">
        {{ group.name }} ({{ group.totalItems }} employees)
      </span>
    </div>
  </ng-template>

  <!-- Your Data Columns -->
  <ngx-datatable-column prop="name" name="Employee Name"></ngx-datatable-column>
  <ngx-datatable-column prop="role" name="Role"></ngx-datatable-column>
</ngx-datatable>

Step 2: Implement Group Selection Logic #

Add these methods to your component to handle selecting/deselecting all child rows in a group:

selectedRows: any[] = [];

// Toggle selection for all rows in the clicked group
toggleGroupSelection(group: any, event: Event) {
  event.stopPropagation(); // Prevent accidental group expand/collapse
  const isChecked = (event.target as HTMLInputElement).checked;
  const groupRows = this.rows.filter(row => row.department === group.name);

  if (isChecked) {
    // Add all group rows to selected array
    this.selectedRows = [...this.selectedRows, ...groupRows];
  } else {
    // Remove all group rows from selected array
    this.selectedRows = this.selectedRows.filter(row => !groupRows.includes(row));
  }
}

// Check if every row in the group is selected
isGroupFullySelected(group: any): boolean {
  const groupRows = this.rows.filter(row => row.department === group.name);
  return groupRows.every(row => this.selectedRows.includes(row));
}

// Check if some (but not all) rows in the group are selected
isGroupPartiallySelected(group: any): boolean {
  const groupRows = this.rows.filter(row => row.department === group.name);
  const selectedCount = groupRows.filter(row => this.selectedRows.includes(row)).length;
  return selectedCount > 0 && selectedCount < groupRows.length;
}

This implementation will:

• Check all child rows when you click the group header checkbox
• Uncheck all child rows when you uncheck the group header
• Show an indeterminate state if only some child rows are selected

内容的提问来源于stack exchange，提问作者Ravikumar K