How Do I Create My First Data Grid Table?

This lesson will show you how to create a bare bones data grid table. Data grid tables are useful when you need to display rows of data in structured columns.

Locate Data Grid on Tools Palette

How Do I Create My First Data Grid Table? - 1

Blue Mango Learning Systems: Made with ScreenSteps

Drag Data Grid Onto Card

How Do I Create My First Data Grid Table? - 2

Blue Mango Learning Systems: Made with ScreenSteps

Populate Data Grid Using Object Inspector

Data Grid tables display data in columns that you can customize the look of. You don't have to worry about customization right now though because a Data Grid table can display plain text just fine. Let's test it out. 1) Switch to the Contents pane of the Object Inspector. 2) Type or paste some tab delimited text into the field. Click out of the field (in the Name field for example) to save the text you entered.

How Do I Create My First Data Grid Table? - 3

Blue Mango Learning Systems: Made with ScreenSteps

The tab delimited text you entered in the field will appear as columns in the data grid (1). The Object Inspector automatically creates a column in the Data Grid for each column in the text you provide (2).

How Do I Create My First Data Grid Table? - 4

Blue Mango Learning Systems: Made with ScreenSteps

Customizing Columns

Now that you've populate a Data Grid Table with some data let's look at the columns in the Data Grid. Normally when you work with a Data Grid Table you will create columns in the property inspector in advance using the "+" button (1). Seeing as the columns I need already exist I've gone through and renamed "Col 1" to "state" and "Col 2" to "code" (2). Note that I have assigned a label for the columns (3). Labels are useful for customizing the column labels in the Data Grid Table.

Populate Data Grid Using dgText Property

Now that we have defined our columns let's look at how to populate a Data Grid Table by setting the dgText property. Here is an example handler with comments that you can place in a button. on mouseUp ## Create tab delimited data. ## Note that first line has name of columns. ## Providing names tells Data Grid how to map
How Do I Create My First Data Grid Table? - 5 Blue Mango Learning Systems: Made with ScreenSteps

## data to appropriate columns. put "state" & tab & "code" & cr & \ "ALABAMA" & tab & "AL" & cr & \ "ALASKA" & tab & "AK" into theText ## Let Data Grid know that first line has column names put true into firstLineContainsColumnNames set the dgText [ firstLineContainsColumnNames ] of group "DataGrid 1" to theText end mouseUp Executing the above code would give you the following result in the Data Grid table.

Populating the Data Grid Using dgData Property

Here is an example of populating the Data Grid Table by setting the dgData property to an array. The end result is the same as the previous step. on mouseUp ## Create a nested array. ## Array key names in the 2nd dimension ## dictate values for individual columns put "ALABAMA" into theDataA[ 1 ][ "state" ] put "AL" into theDataA[ 1 ][ "code" ] put "ALASKA" into theDataA[ 2 ][ "state" ] put "AK" into theDataA[ 2 ][ "code" ]
How Do I Create My First Data Grid Table? - 6 Blue Mango Learning Systems: Made with ScreenSteps

set the dgData of group "DataGrid 1" to theDataA end mouseUp

How Do I Create My First Data Grid Table? - 7

Blue Mango Learning Systems: Made with ScreenSteps