# Calculated Fields

Learn how to create Calculated Fields using CollectionView in this documentation topic

## Content


Calculated fields are new columns created by the __CollectionView__ and placed inside of a __FlexGrid__ control that uses custom expressions to populate their cells.

## Creating the CollectionView

We'll first need to get the data that will populate the __CollectionView__. In most cases, this will be a call to a database, but here we'll use sample data:

````javascript
export function getData() {
    return [
        { product: ‘Banana’, brand: ‘Chiquita’, unitPrice: 45.95, qty: 12, discount: .08 },  
        { product: ‘Apple’, brand: ‘Granndy’, unitPrice: 65.95, qty: 23, discount: 0.02 },  
        ...,  
    ]
}
````

Then, we'll pass this data off to the __CollectionView__:

````javascript
export function getCalculatedView() {
    return new CollectionView(getData() { ... });
}
````

## Implementing Custom Expressions

The __calculatedFields__ property can now be used to create custom expressions that our __FlexGrid__ control can use to create the Calculated Fields columns:

````javascript
export function getCalculatedView() {
    return new CollectionView(getData() {
        calculatedFields: {
            fullName: ($) => [$.brand, $.product].join(' '),
            allCaps: ($) => $.fullName.toUpperCase(),  
            totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
            tax: ($) => $.totalPrice * 0.12 
        }
    });
}
````

## Assigning the CollectionView to FlexGrid

The __CollectionView__ now needs to be assigned as the __itemsSource__ for our FlexGrid. However, we can now use our __calculatedFields__ that we created as bindings for new columns in the grid:

````javascript
new FlexGrid(‘#theGrid’, {
    alternatingRowStep: 0,  
    showMarquee: true,  
    selectionMode: ‘MultiRange’,  
    autoGenerateColumns: false,  
    columns: [  
        // regular data fields  
        { binding: ‘product’, header: ‘Product’ },  
        { binding: ‘brand’, header: ‘Brand’ },  
        { binding: ‘unitPrice’, header: ‘Unit Price’, format: ‘c’ },  
        { binding: ‘qty’, header: ‘Quantity’, format: ‘n0’ },  
        { binding: ‘discount’, header: ‘Discount’, format: ‘p0’ },  
        // calculated fields  
        { binding: ‘fullName’, header: ‘Full Name’, cssClass: ‘calculated’ },  
        { binding: ‘allCaps’ header: ‘UpperCase’ cssClass: ‘calculated’ },  
        { binding: ‘totalPrice’, header: ‘Total Price’, format: ‘c’ cssClass: ‘calculated’ },  
        { binding: ‘tax’, header: ‘Tax Amount’, format: ‘c’, cssClass: ‘calculated’ },  
    ],  
    itemsSource: getCalculatedView()  
});
````

We'll also add some CSS to differentiate the __calculatedFields__ from the regular data fields:

````css
.calculated {
    background-color: azure;
}
````

![Wijmo Calculated Fields FlexGrid](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/wijmo/calculated-fields.png)