[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