Understanding the DataGrid component: data model and view

Conceptually, the DataGrid component is composed of a data model and a view that displays the data. The data model consists of three main parts:

DataProvider
This is a list of items with which to fill the data grid. Any array in the same frame as a DataGrid component is automatically given methods (from the DataProvider API) that let you manipulate data and broadcast changes to multiple views. Any object that implements the DataProvider API can be assigned to the DataGrid.dataProvider property (including recordsets, data sets, and so on). The following code creates a data provider called myDP:
```
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});
```
Item
This is an ActionScript object used for storing the units of information in the cells of a column. A data grid is really a list that can display more than one column of data. A list can be thought of as an array; each indexed space of the list is an item. For the DataGrid component, each item consists of fields. In the following code, the content between curly braces ({}) is an item:
```
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});
```
Field
Identifiers that indicate the names of the columns within the items. This corresponds to the columnNames property in the columns list. In the List component, the fields are usually label and data, but in the DataGrid component the fields can be any identifier. In the following code, the fields are name and price:
```
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});
```

The view consists of three main parts:

Row
This is a view object responsible for rendering the items of the grid by laying out cells. Each row is laid out horizontally below the previous one.
Column
Columns are fields that are displayed in the grid; the fields each correspond to the columnName property of each column.

Each column is a view object (an instance of the DataGridColumn class) responsible for displaying each column--for example, width, color, size, and so on.

There are three ways to add columns to a data grid: assign a DataProvider object to DataGrid.dataProvider (this automatically generates a column for each field in the first item), set DataGrid.columnNames to specify which fields are displayed, or use the constructor for the DataGridColumn class to create columns and call DataGrid.addColumn() to add them to the grid.

To format columns, either set up style properties for the entire data grid, or define DataGridColumn objects, set up their style formats individually, and add them to the data grid.
Cell
This is a view object responsible for rendering the individual fields of each item. To communicate with the data grid, these components must implement the CellRenderer API (see CellRenderer API). For a basic data grid, a cell is a built-in ActionScript TextField object.