How do I display a table in a field?
LiveCode's field features allow you to embed simple tables directly into your text fields and alter their appearance. This lesson applies to LiveCode 5.5 and later.
The sample stack
Create a new stack, add a field, name it "Display" and add some tab separated data to the field.
If you like you can also include some text before and after the data to be displayed in a table.
Creating the grid
To create the grid set the hGrid and vGrid properties of the lines of the field which make up the table. Run the following code in the message box:
set the hGrid of line 2 to -2 of field "Display" to true
set the vGrid of line 2 to -2 of field "Display" to trueThe hGrid property causes 1 pixel width grid lines to be placed before and after any line with it set to true. The vGrid property causes 1 pixel width grid lines to be placed between each tab position and forces text to clip to tab width in a cell-like fashion.
We are operating on lines "2 to -2". LiveCode counts both down from the top and up from the bottom of the lines in your field. So line 2 is the first line in the table, and because we have a line of text after the last line of the table the last line of the table is -2 from the bottom. We could also have used "line 2 to 5" but this would mean that if another line was added to the table, the code would break. Also, some of the later operations we are going to do on this table would have strange results.
Make the table fixed width
Now to make the table 'fixed width' we make sure the tabWidths finishes with a zero-width tab.
This has two effects:
the vertical grid lines will stop at the zero-width tab
the left and right sides of the table determine the location of paragraph borders, filling and alignment.
set the tabWidths of line 2 to -2 of field "Display" to 30,30,30,30,30,30,30,0Adding spacing before and after the table
Now we want to add some spacing between the text paragraphs and the table.
set the spaceBelow of line 1 of field "Display" to 10
set the spaceAbove of line -1 of field "Display" to 10Adding a border to the table
To add a border to the table as a whole we set the borderWidth of all the lines in the table. When in hGrid mode, borders of adjacent lines which have compatible properties are merged into a 1-pixel grid line.
set the borderWidth of line 2 to -2 of field "Display" to 2Adding indentation
You can add an indent to the left or right of the table by setting the leftIndent or rightIndent property of the lines of the field that make up the table.
set the leftIndent of line 2 to -2 of field "Display" to 20Adding padding
You can add padding to the cells of field by setting the padding property.
set the padding of line 2 to -2 of field "Display" to 5
I don't know where to put this code, i can only figure out how to run code via handlers like mouse down etc. Putting this code in the script of the field does nothing, i assume it doesnt run unless its called by something. So where does this script go?