<style>
/* custom styles for this example */
.example .yui3-datatable {
    margin-bottom: 1em;
}

/* css to counter global site css */
.example table {
    width: auto;
}
.example caption {
    display: table-caption;
}
.example th,
.example td {
    text-transform: none;
    border: 0 none;
}
{{>datatable-recordtype-css}}
</style>

<div class="intro">
    <p>
        This example shows how to use the DataTable's `recordType` attribute to
        create columns whose values are calculated from other columns.  It was
        contributed by community member Todd Smith.
	</p>
    <p>
        In the table below, the "Market Value" and "Gain or Loss" columns are
        created from data in the other columns by configuring them as
        attributes with `getter`s in the table's `recordType` configuration.
    </p>
</div>

<div class="example yui3-skin-sam">
    {{>datatable-recordtype-html}}
    <script>
    	{{>datatable-recordtype-js}}
    </script>
</div>

<h2>`recordType` sets the Model</h2>

<p>
    DataTable's `recordType` attribute is used to specify the class used to
    store the record instances in your table.  If you don't configure your
    DataTable's `recordType`, a `Y.Model` subclass will be created for you
    based on the keys in the data that you fill the table with.
</p>

<p>
    As well as accepting Model subclasses, `recordType` can be passed an object
    that corresponds to a class's `ATTRS` collection.  From this, DataTable will
    create the Model subclass accordingly.  This is useful if you want to
    provide default values, or validate or transform incoming values (such as
    turning numeric strings into numbers).
</p>

```
var table = new Y.DataTable({
    columns: ['cost', 'price', 'profit'],
    recordType: {
        cost: {
            value: 0.0001, // default value
            validator: function (val) {
                return Y.Lang.isNumber(val) && val > 0;
            }
        },
        price: {
            setter: function (val) {
                val = +val; // coerce numeric strings to numbers

                return isFinite(val) ? val : Y.Attribute.INVALID_VALUE;
            }
        }
    },
    ...
});
```

<h2>Use attribute `getter`s to populate custom columns</h2>

<p>
    Another thing you can configure with attributes is a `getter`, which is
    responsible for returning a value to `instance.get('yourAttribute')` calls.
    Since DataTable uses this method to get cell contents for columns, you can
    use `getter`s to create columns whose content is calculated on the fly.
</p>

```
var table = new Y.DataTable({
    columns: ['cost', 'price', 'profit'],
    recordType: {
        cost: {},
        price: {},
        profit: {
            getter: function () {
                return this.get('price') - this.get('cost');
            },
            readOnly: true
        }
    },
    ...
});
```

<p>
   The `data` populating the table need only include `cost` and `price`.  The
   `profit` column will be populated automatically based on the other two.
</p>

<h2>Sorting for free</h2>

<p>
    It is possible to create calculated columns using column `formatter`s as
    well, but if you need that column to be sortable, you need to associate
    that column with a single `key`, which may be insufficient, or configure
    the column with a `sortFn`.
</p>

<p>
    Using an attribute with a `getter`, you are creating a new field with a
    `key` that corresponds to the full values you want to sort by using the
    default sort mechanism.  And you can even add `formatter`s on top of the
    raw, sortable, calculated value.
</p>

<h2>Full Code Listing</h2>
<h3>JavaScript</h3>

```
{{>datatable-recordtype-js}}
```

<h3>CSS</h3>

```
{{>datatable-recordtype-css}}
```
<h3>HTML</h3>
{{>need-skin-note}}

```
<body class="yui3-skin-sam"> {{>need-skin-comment}}
{{>datatable-recordtype-html}}
```
