CTATTable

CTATTable

Code

<div id="table1" class="CTATTable"
   data-ctat-num-rows="3" data-ctat-num-cols="4" data-ctat-has-header="false" 
   style="width:150px; height:120px;"></div>

Running Example

CTAT Table Example

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATTable.
• data-ctat-num-rows: Required. Specifies the number of rows in the table.
• data-ctat-num-cols: Required. Specifies the number of columns in the table.
• data-ctat-has-header: true or false. Default is false. Determines whether or not the first row of the table should be treated as a header row (header cells can be styled separately from the rest of the table).
• data-ctat-header-height: Required if data-ctat-has-header is set to true. Specifies the height in pixels of the header row.
• data-ctat-header-color: Specifies the background color of the header cells. Defaults to white.
• data-ctat-cell-color: Specifies the background color of the table body cells. Defaults to white.
• data-ctat-border-color: Specifies the color of the dividing lines in the table. Defaults to black.
• data-ctat-can-expand: true or false. Default is false. "True" will cause the cell dimensions to remain constant when a new row or column is added, meaning the overall table dimensions will increase. "False" will cause the overall table dimensions to remain constant and the cell dimensions to decrease.
• data-ctat-font-size: An integer from 1-4, inclusive, which specifies the height of table cell contents relative to the height of the cell. A value of 3, for example, means table cells are three times the height of their contents. Default value is 2.

Action-Input

Action	Input	Notes
addRow	N/A	Adds a new row to the bottom of the table
addColumn	N/A	Adds a new column to the right side of the table

Styling