Has anyone benchmarked performance for: DataTable?

[sandeParticipant]

How do I integrate jqxDataTable with Angular Reactive Forms for inline editing?

[adminKeymaster]

Hi sande,

Please, take a look at the code example below:

import { Component, OnInit } from ‘@angular/core’;
import { FormBuilder, FormGroup, FormArray } from ‘@angular/forms’;

@Component({
selector: ‘app-datatable-form’,
template: `

`
})
export class DatatableFormComponent implements OnInit {

form!: FormGroup;

columns = [
{ text: ‘ID’, dataField: ‘id’, editable: false },
{ text: ‘Name’, dataField: ‘name’ },
{ text: ‘Qty’, dataField: ‘qty’ }
];

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
this.form = this.fb.group({
rows: this.fb.array([])
});

this.loadData();
}

get rows(): FormArray {
return this.form.get(‘rows’) as FormArray;
}

loadData(): void {
const data = [
{ id: 1, name: ‘Alpha’, qty: 10 },
{ id: 2, name: ‘Beta’, qty: 20 }
];

data.forEach(r => {
this.rows.push(this.fb.group({
id: [r.id],
name: [r.name],
qty: [r.qty]
}));
});
}

onCellEndEdit(event: any): void {
const rowIndex = event.args.rowindex;
const field = event.args.datafield;
const value = event.args.value;

const row = this.rows.at(rowIndex) as FormGroup;

if (row?.get(field)) {
row.get(field)!.setValue(value, { emitEvent: false });
}
}
}

To integrate jqxDataTable with Angular Reactive Forms for inline editing, you should treat the Reactive Form as the single source of truth and let the grid act only as the UI layer. Typically, you model each table row as a FormGroup inside a FormArray, where each control represents a column in the grid.

You bind the table’s data source to formArray.value, so the grid always reflects the current form state. Then you listen to the cellEndEdit event from jqxDataTable and manually update the corresponding FormGroup control using the row index and field name provided by the event.

This approach ensures that edits made directly in the grid are immediately synchronized with Angular’s form state without bypassing validation or breaking reactivity. It also avoids common pitfalls like two-way binding conflicts or the grid becoming the source of truth instead of the form.

Regards,
Peter

[Author]

Posts