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: Gross Amount = Quantity × Price Per Unit Tax Amount = Gross Amount × 0.07 Total Amount = Gross Amount + Tax Amount 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 Formulaand Edit module into the services collection. More information on formula cells can be found in documentation section. Looking for the full TypeScript Data Grid component overview, features, pricing, and documentation? Visit our TypeScript Data Grid component page