[CS2] Table Layer

A table (simple) layer lets you add a simple table to your design. A simple table contains only text fields. This page describes the properties that you can set for a table (simple) layer. For more complex tables, use a table (advanced) layer.

Position and Size

Sets the position and size of the layer.

Name Description Example Default
Left (x) The horizontal (X) co-ordinate of the upper left hand corner of the layer. 80 {{ design.safe.left }}
Top (Y) The vertical (Y) co-ordinate of the upper left hand corner of the layer. 100 {{ design.safe.top }}
Width The width of the layer. 500 {{ design.safe.width }}
Height The height of the layer. 200 {{ design.safe.height }}
Rotate The number of degrees to the right that the layer is rotated. 45 0
Show outline? Set to "true" if you want to render the outline of the text layer. This also shows a dot in the center of the layer. true false
Hide overflow? Set to "true" to not render anything outside the bounds of the layer. true false
Render this layer? Set to "false" to not render this layer. false true
Z-Index Enabled? Set to "true" to enable the use of the Z-Index in positioning layers. true false
Z-Index The Z-Index of the layer. When the Z-Index is enabled, layers with a lower Z-Index are rendered behind those with a higher Z-Index. Layers with the same Z-Index are rendered in normal layer order (either top-to-bottom or bottom-to-top based on Preferences). 500 1000

The Position and Size section also contains the following buttons for use with the Drag and Drop features of Component Studio 2.

Table Cells

Sets the number and size of cells in the table. It also provides an easy wall to specify the contents of each cell.

Name Description Example Default
Columns The number of columns in the table.3 3 2
Rows The number of rows in the table. 5
3
Column Sizing When set to "Equal," all columns in the table are equal in width. When set to "Manual," the width of each column is determined by the Column Widths value. Manual Equal
Column Widths A list of widths to be assigned to the columns in the table. Columns are assigned widths from this list in the order specified (top to bottom). If there are more values in the list than columns in the table, the additional values are ignored. If there are fewer value values in the list than columns, the additional columns are assigned a width of 0. A width of 0 represents a variable width. Once all other columns have been assigned a width, the remaining unassigned table width is divided equally among the columns with a width of 0.

If the specified widths in the list add up to more than the table width or the list includes a negative number, an error results. 
200,300 0,100
Row Sizing When set to "Equal," all rows in the table are equal in height. When set to "Manual," the height of each row is determined by the Row Heights value. Manual Equal
Row Heights A list of heights to be assigned to the rows in the table. Rows are assigned heights from this list in the order specified (top to bottom). If there are more values in the list than rows in the table, the additional values are ignored. If there are fewer value values in the list than rows, the additional rows are assigned a height of 0. A height of 0 represents a variable height. Once all other rows have been assigned a height, the remaining unassigned table height is divided equally among the rows with a height of 0.

  If the specified heights in the list add up to more than the table height or the list includes a negative number, an error results. 
100,50, 250 50,0,75

This section also contains a visual depiction of the table's cells along with controls for moving rows and columns. Clicking on a cell, brings up the Sidebar Editor for you to enter the contents of that cell. 

Move Values in Columns and Rows

You can move the contents of columns and rows by clicking on the double arrows at the top of the column and row. From the dropdown menu, choose an option to shift the values. Note that the row numbers and column letters do not change on the display. Only the values in those cells are moved to the desired position.

Quick Fill

Click on the three dots to the right of a row to bring up a quick fill dialog for that row. Enter a comma-separated list of values to insert into the chosen row and click Save Row. To skip a column, do not enter a value between the corresponding commas. Any extra values will be ignored. Missing values will be treated as blank and delete any existing data in that cell.

Advanced Cells

You can enable advanced cell options, which enables you to overlay a layer on top of a table cell. 

Table Functions

These functions are used by advanced cells, but you can use them directly also if you like.

Function Description Example Output
cellBottom(cell, excludePadding) Returns the Y position of the bottom of the named cell.
cellBottom('TableName:B2', true) 200
cellHeight(cell, excludePadding) Returns the height of the named cell.
cellHeight('TableName:B2', true) 200
cellLeft(cell, excludePadding) Returns the X position of the left side of the named cell. cellLeft('TableName:B2', true) 0
cellRight(cell, excludePadding) Returns the X position of the right side of the named cell. cellRight('TableName:B2', true) 300
cellTop(cell, excludePadding) Returns the Y position of the top of the named cell. cellTop('TableName:B2', true) 0
cellWidth(cell, excludePadding) Returns the width of the named cell. cellWidth('TableName:B2', true) 300
cellValue(cell, field) Returns the value of a field in the table so that it may be mirrored in the layer. cellValue('TableName:B2', 'defaultStyle') body

Table Formatting

Sets the formatting for the table.

Name Description Example Default
Cell Margin The distance (on each of the four sides) around the outside of each cell. This area contains nothing and is not considered part of the cell for cell coloring. 5 0
Cell Padding The distance (on each of the four sides) between the outside of the cell and the cell content. This is area is considered part of the cell for cell coloring. 15 10
Color cells?
Set to "true" to assign a background color and opacity for the cells in the table. true false
Cell Background Color
The background color for each cell in the table. #ffff00 #cccccc
Cell Background Opacity The opacity of the Cell Background Color. 75 100
Stroke Width The width of separators and borders (if used). 3 1
Stroke Color The color of separators and borders (if used).
red #000000
Draw row separators? Set to "true" to draw lines between rows. The Stroke Width and Stroke Color values determine the width and color of the lines. false true
Draw column separators? Set to "true" to draw lines between columns. The Stroke Width and Stroke Color values determine the width and color of the lines.
false true
Draw table border?
Set to "true" to draw a border around the outside of the table.  false true
Draw table cell borders? Set to "true" to draw a border around the outside of each cell in the table.  true false

Text Formatting

Sets the formatting applied to the text in the table.

Name Description Example Default
Default Style The default style for the text. title body
Fit to size? Set to "true" if you want text that is too big for the layer to be shrunk in size to fit. true false
Horizontal Alignment How the text is aligned horizontally: left, center, right, or justify.  justify left
Vertical Alignment How the text is aligned vertically: top, middle, or bottom. middle top
Line Spacing Adjusts the number of pixels between lines for the rendered text. Positive values increase the spacing. Negative values decrease the spacing. -2 0
Letter Spacing Adjusts the number of pixels between letters for the rendered text. Positive values increase the spacing. Negative values decrease the spacing. 1 0

Icon Size Set the size of inline icons relative to the surrounding text. 100 80
Curve this Text? Set to "true" to enable rendering the text on a curve. true false
Radius Adjusts the amount of curve for the rendered text by defining the radius of curve in pixels. 300 120
Invert Curve Determines if the text will be rendered concave or convex. true false
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us