How Do I Display Line Numbers in a Table?

This lesson will show you how to dynamically display line numbers in your data grid table.

The Table

The Table

Here is the table that I will display line numbers in.

Add Line Number Column

Add Line Number Column

Select the data grid and open the property inspector. Select the Columns pane (1) and add a column using the "+" button (2). Rename the column "Line Number" (3).

Reorder and Create Column Template

Reorder and Create Column Template

Use the up arrow (1) to move the Line Number column to the top of the list.

Create a template for this column by clicking on the "+" button at the bottom of the property inspector (2).

Edit Line Number Group

Edit Line Number Group

After creating the column template the card with the template group will open.

Edit Column Behavior

Edit Column Behavior

Now all that is left is to define the behavior for this column. Back in the Columns pane click the Column Behavior button (1) to open the script editor.

Edit Behavior Script

Edit Behavior Script

There isn't much to do here. In FillInData you just want to 'set the text of field 1 of me to the dgLine of me' (1). The dgLine is a property of a row template and this will display the line number for the current line. In LayoutControl you just need to set the rect of the field so that it fills the entire cell (2).

Refresh Data Grid

Refresh Data Grid

In the property inspector click the Refresh Data Grid button.

The Result

The Result

Now the line numbers appear in the table.

But How Do I Set the dgText Then?

You may be wondering how you would set the dgText property of this data grid since we have added a "Line Number" column as the first column in the table.

When you set the dgText of a data grid you can pass a parameter specifying whether or not the first line of text contains the names of the columns that the data should map to. Just pass in true and prepend the column names to your data like this:

put "Name,Artist,Composer,Album" into theColNames
set the dgText [true] of group "Data Grid" to theColNames & cr & theData

4 Comments

Michael

Is it possible to set dgText or dgData with a data set or array that has an unspecified number of columns (I don't know the size of the array in advance)? In other words, can I upload theData to a data grid that has not been pre-formatted with column names, i.e. creating the number of columns and column names from within a script?

Trevor DeVore

@Michael: You can create the columns by setting the dgProps["columns"] property of the Data Grid.

set the dgProps["columns"] of group "DataGrid" to "Col 1" & cr & "Col 2"

Nate McVaugh

On reordering columns, is there a preferred way to do this? I've managed it via:

put the dgProp [ columns ] of group "My Group" into ColList
move the lines of ColList around here
set the dgProp [ columns ] of group "My Group" to ColList

However, it seems that I should be able to simply assign a column to be at a specific number, with the one at that location and all subsequent ones incremented by 1. Any suggestions greatly appreciated.

Trevor DeVore

@Nate - the method you are using to reorder columns is the only way to change the order right now.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.