ui-editable-grid

Use Syncfusion GridComponent with editSettings mode set to Batch for inline add, edit, and delete of lines. Recalculate lineTotal from quantity, unitPrice, and vatRate in the batchSave and cellSaved handlers, then render subtotal, VAT, and total below the grid.

Syncfusion batch editing suits simple numeric lines and large tables with built-in virtualization and Excel export. useFieldArray is better when rows need custom components like SearchableSelect or DatePicker, or strict per-field Zod validation.

It is possible via custom edit templates but complicated and not recommended. The documented approach is to switch to React Hook Form useFieldArray, where each row naturally hosts SearchableSelect, CurrencyInput, and other custom controls.

Define a line schema with z.object covering productId, description, quantity, unitPrice, and vatRate, then register fields through useFieldArray paths like lines.0.quantity. This per-line Zod validation works with the useFieldArray approach, not Syncfusion batch mode.

useFieldArray re-renders registered inputs on form state changes, so performance degrades with 50 or more lines. For large volumes, Syncfusion batch editing is recommended because it provides built-in virtualization.