Is there any way to catch the checkbox column?

[suryakanta101]

I tried to manipulate the checkbox column position , but the column [0] index is pointing to data column. How we suppose to manipulate the position of the checkbox ?

[mazdik]

  onCheckboxClick(event) {
    this.table.selection.toggle(this.row.$$index);
    this.table.events.onCheckbox(this.row);
  }

 const subCheckbox = this.treeTable.events.checkboxSource$.subscribe((event) => {
 });

or need a column position?

[suryakanta101]

Yes column positioning.

In fact , can we make it independent of placing it inside a column.

Just like expandable tree arrow, which we can manipulate to place with any column element with help of template update and @ViewChild, Can we do the same for checkbox as well?

This will give a true Tree Table experience in some cases.

[mazdik]

You can use: cellTemplate, headerCellTemplate, formTemplate

Sample headerCellTemplate:

<span *ngIf="table.selection.multiple && table.settings.selectionMode"
      class="{{'dt-' + table.settings.selectionMode}}">
      <input [type]="table.settings.selectionMode"
             [checked]="table.allRowsSelected()"
             [indeterminate]="table.partiallySelected()"
             (click)="table.selectAllRows()"/>
</span>

Sample cellTemplate:

<span *ngIf="table.settings.selectionMode && table.dimensions.actionColumnWidth"
      class="{{'dt-' + table.settings.selectionMode}}">
      <input [type]="table.settings.selectionMode"
             [checked]="checked"
             (click)="onCheckboxClick($event)"/>
</span>

[mazdik]

For example, in crud-table.component it is done like this:

const actionColumn: ColumnBase = {
  name: 'action',
  title: 'Row actions',
  sortable: false,
  filter: false,
  frozen: true,
  resizeable: false,
  width: 40,
  minWidth: 40,
  formHidden: true,
  cellClass: 'action-cell',
  headerCellClass: 'action-cell',
};

  <ng-template #rowActionTemplate let-row="row">
    <button class="dt-button-actions" (click)="onRowMenuClick($event, row)">
      <i class="dt-icon-actions"></i>
    </button>
  </ng-template>
  <ng-template #headerActionTemplate>
    <button class="filter-action"
            *ngIf="dataManager.settings.clearAllFiltersIcon"
            [style.visibility]="(!dataManager.dataFilter.hasFilters()) ? 'hidden' : 'visible' "
            (click)="clearAllFilters()"
            [title]="dataManager.messages.clearFilters">
      <i class="dt-icon-filter"></i>
    </button>

@ViewChild('rowActionTemplate', {static: true}) rowActionTemplate: TemplateRef<any>;
@ViewChild('headerActionTemplate', {static: true}) headerActionTemplate: TemplateRef<any>;

ngOnInit() {
      actionColumn.cellTemplate = this.rowActionTemplate;
      actionColumn.headerCellTemplate = this.headerActionTemplate;
}

another example

[mazdik]

now the checkbox column is available column[0] if enable settings.selectionMode