Graphic Table

Sometimes the best way to display a data set is in a table, organized in rows and columns. And since OmniGraffle is all about visualizing data, it offers the ability to create fully editable tables by cloning a specified graphic to create tables of multiple “cells,” with each “table cell” being a clone of the original specified graphic.

Here are the scripting terms and commands for the Table class:

Table Constructors

• new Table(Graphic) • Create a table by replicating the indicated graphic for the cells.

Table Properties

• columns (Number) • Number of columns in the table.

• rows (Number) • Number of rows in the table.

Table Functions

• graphicAt(rowNumber, columnNumber) (Graphic) • Retrieve the contained graphic at the given row and column index.

• setRowHeight(numberOfPoints, rowNumber) • Change the height of all graphics in the given row index so that the row itself is the new height.

• setColumnWidth(numberOfPoints, columnNumber) • Change the width of all graphics in the given column index so that the column itself is the new width.

Getting Tables

Here is a script for creating an array of references to all tables on the current canvas:

And here’s a script for creating an array of references to every table in the document:

Creating Tables

Using the commands and properties of the Table class, you can create automation tools for quickly building and editing tables.

Create Table by Cloning the Selected Graphic

In this first example, a table is constructed by cloning a selected graphic to be the cells of the created table. As you can see in the example, the process simply involves using a reference to the selected graphic to create a new table object, and then indicating the number of rows and column the table object should have. The result is a new table with the indicated number of rows and columns.

Create a Cloned Table from JSON

Building upon the concepts used in the previous script, this script also creates a new table object using a selected graphic as the template for the table cells. However, this script determines the number of rows and columns to add to the table object, based upon the data in a JSON object (JSON = JavaScript Object Notation).

Once the table has been created, it is populated with the data from the JSON object.

Create a new Table

In this example, the source graphic is created by the script itself instead of requiring the user to have an existing graphic selected. Various style properties, such as fill and stroke color are applied to the created graphic, before it is used to create the table.

Change Properties of All Cells of Selected Table

Using Omni Automation, it is possible to create your own set of “table styles” that can be quickly applied to any table.

Here’s another way to change the value of every cell of a table. Since a table is a specialized group, the Table class inherits some properties from the Group class, including the graphics property, whose value is an array of the individual graphics comprising a table. You can use the forEach() function to iterate the array, changing the value of the object’s properties.

Here’s a variation of the previous scripts that prompts the user to choose between two sets of “styles” to apply to the graphics of the selected table. Note the use of the graphicAt() method to identify a specific table cell for alteration:

And here’s a script for changing the styling of the top row header of the selected table:

And here’s a script for changing the styling of the left column header of the selected table:

Add|Remove Rows and Columns

To add or remove rows and columns from a table, simply change the vale of the table’s rows and columns properties..