Formatted Table

Description

Creates a table component. It provides several options to manage columns and rows, merge cells, resize columns to fit content, etc.

Preview

Config Details

When you click on Create A New Table button, the following screen will appear:

You can define any number of columns and rows to be initially rendered. New columns / rows can be added / modified / removed later.

Main Configuration

Undo Resize

After clicking on Resize to Fit, a new Undo Resize button will show up:

Ref No	Name	Description	Value	Recommended	Required
1	Toggle Striped	Whether to apply a different background color for the even rows.	Button click	-	No
2	Toggle Resize Columns	When this function is active the columns can be manually resized.	Button click	-	No
3	Toggle Linear Gradient	Whether to apply the linear gradient effect to the cell's background color when both the cell row's color and cell column's color are defined.	Button click	-	No
4	Resize to Fit	When this function is activated the columns are automatically resized to have the same width and to fit in the container area (without overflowing).	None, Minimal, Small, Default, Large	-	No
5	Border Spacing	Defines the cell's border spacing.	None, Minimal, Small, Default, Large	-	No
6	Line Height	Defines the cell's content line height. It only works if the cell's content wasn't edited by using the text editor component (which is opened by clicking on the pencil icon).	1, 1.2, 1.5, 1.8, 2, 2.5, 4	-	No
7	Font Size	Defines the cell's content font size. It only works if the cell's content wasn't edited by using the text editor component (which is opened by clicking on the pencil icon).	9px, 10px, 12px, 14px, 16px, 18px, 20px	-	No
8	Toggle Data Editing Mode	Whether to activate the data editing mode for the table.	Button click	-	No
9	New Row	Creates a new row.	Button click	-	No
10	New Column	Creates a new column.	Button click	-	No
11	Merge Options	Provides the options to merge cells.	Select Cells, Select Header Cells	-	No
12	Clear Table	Clears the table, removing all merges and rows.	Button click	-	No
13	Undo Resize	Rolls back the Resize to Fit action - the columns will retain the previous width configuration.	Button click	-	No

Data Editing Mode

If Toggle Data Editing Mode is active, then right click any column header’s content to bring the options below:

Ref No	Name	Description	Value	Recommended	Required
14	Add New Column	Adds a new column to the table.	Menu selection	-	No
15	Edit Column	Edits the current column.	Menu selection	-	No
16	Remove Column	Removes the current column.	Menu selection	-	No
17	Align Header	Aligns the header text.	Left, Center, Right	-	No
18	Align Content	Aligns the other cell's content text other than the header.	Left, Center, Right	-	No
19	Vertical Column Data	Whether to show the column content data (except header) vertically instead of horizontally.	Menu selection	-	No
20	Select Header Cells	Activates the header cell selection mode. When active you can left click adjacent columns to also be selected. Then, right click any of the selected header cells to either merge selected cells or cancel selection.	Menu selection	-	No
21	Column Merge All	Merges all the cells of a column (except header) into one cell.	Menu selection	-	No
22	Set Column Color	Changes the background color of the column header cell.	Menu selection + color picker	-	No
23	Set Color in All Columns	Changes the background color of all column header cells.	Menu selection + color picker	-	No
24	Set Column Color	Changes the background color of all column cells.	Menu selection + color picker	-	No
25	Remove Color	Removes the background color applied to the header cell.	Menu selection	-	No
26	Remove All Colors	Removes the background color of all header cells.	Menu selection	-	No

Add New Column / Edit Column

If Add New Column / Edit Column option is selected from the menu above, the following screen will be shown:

Ref No	Name	Description	Value	Recommended	Required
27	Title	Defines the header content. If a new column is being added, the field is a text input. If a column is being edited and the content was edited using the text editor before then the text editor will be shown. Otherwise a text input will be shown.	Text input / text editor	-	No
28	Position	Defines where the new column will be inserted relative to the current column. This option is not shown when a column is being edited.	Left, Right	-	No
29	Vertical Column Data	Whether the cell's content from the column will be rendered vertically.	Yes, No	-	No
30	Align Header	Aligns the header content.	Left, Center, Right	-	No
31	Align Content	Aligns the other cell's content text other than the header.	Left, Center, Right	-	No

Right Click Content

If any cell’s content is right clicked (except header cells), the following menu will be shown:

Ref No	Name	Description	Value	Recommended	Required
32	Add New Row	Adiciona uma nova linha à tabela.	Seleção de menu	-	Não
33	Remove Row	Remove a linha atual da tabela.	Seleção de menu	-	Não
34	Set Row Color	Define a cor de fundo de todas as células da linha.	Seleção de menu + seletor de cor	-	Não
35	Set Cell Color	Define a cor de fundo da célula atual da linha.	Seleção de menu + seletor de cor	-	Não

Merge Option

If Merge Option is selected a menu with two options will be shown: Select Cells and Select Header Cells. When this mode is active, you can select cells to merge them. After selecting at least two adjacent cells, the menu above will be shown:

If Merge Option is selected and you right click a cell that was previously merged a new option will be shown to undo the merge of the selected cells: