This sample demonstrates the Formula Cell feature in the Data Grid, which brings spreadsheet-like calculations directly into grid cells. It enables formulas to be dynamically defined and evaluated based on the values of other cells within the same row.
In this demo, formulas are configured directly in the data source and are automatically evaluated during the initial rendering of the grid. Whenever the values of dependent cells change, the calculated fields are instantly recalculated and updated. Formula calculations are enabled for the Gross Amount, Tax Amount, and Total Amount columns by setting the allowFormula property to true. Double-click a cell to edit its value and recalculate formulas automatically.
The formulas used are:
When the "Quantity" or "Price Per Unit" values are modified, the Data Grid automatically recalculates the related formula-driven columns, ensuring that all computed values remain accurate and synchronized in real time.
Injecting Module:
The Grid component organizes its features into separate, feature-specific modules. To enable the Formula Cell feature, inject the Formula and Edit module into the services collection.
More information on editing configuration can be found in the documentation section.
Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit our React Data Grid component page.