Difference between revisions of "GUI Tables"

From 3forge Documentation
Jump to navigation Jump to search
Line 7: Line 7:
 
There are three ways to add columns in tables
 
There are three ways to add columns in tables
  
1. The first way to add a column is to through the '''panel configuration menu'''. Click on the green button to bring up the menu and select '''Add Column'''
+
1. Click on the green button to bring up the '''panel configuration menu''' and select '''Add Column'''
  
 
[[File:GUI.Columns.1.jpg]]
 
[[File:GUI.Columns.1.jpg]]
  
2. The second way to add columns is to click on a column to bring up the '''column menu'''. This method allows you to place the new column in between existing columns. In the menu, select whether to add the new column to the right or left of the selected column
+
2. Click on a column to bring up the '''column menu'''. This method allows you to place the new column in between existing columns. In the menu, select whether to add the new column to the right or left of the selected column
  
 
[[File:GUI.Columns.2.jpg|200px]]
 
[[File:GUI.Columns.2.jpg|200px]]
  
3. The third way to add columns is to click on an open area of the header in order to bring up the header menu. In the menu, select Add Column.  
+
3. Click on an open area of the header in order to bring up the header menu. In the menu, select '''Add Column'''.  
  
 
[[File:GUI.Columns.3.jpg]]
 
[[File:GUI.Columns.3.jpg]]
Line 48: Line 48:
 
|}
 
|}
  
'''Example - adjusting header and column styles'''
+
<span style="color: blue;">'''Examples'''</span>
  
Column Description
+
'''Adjusting header and column styles'''
  
Conditional Formatting
+
[[File:GUI.Columns.5.jpg]]
 +
 
 +
'''Column Description'''
 +
 
 +
[[File:GUI.Columns.6.jpg]]
 +
 
 +
[[File:GUI.Columns.7.jpg]]
 +
 
 +
<span style="color: blue;">'''Editing'''</span>
 +
There are two ways to edit columns
 +
 
 +
1. Click on the header of the column to bring up the column menu and select '''Edit Column'''
 +
 
 +
[[File:GUI.Columns.8.jpg]]
 +
 
 +
2. Click on the green button to bring up the panel configuration menu. Hover over '''Edit Column''' to bring up the list of columns and select the column
 +
 
 +
'''Conditional Formatting'''
 +
 
 +
Formatting can be used to highlight data in specific formats when certain parameters are met. In the first part of this example, the Price is set to be in bold and highlighted if it is greater than $50.
  
 
==Sorting & Pinning==
 
==Sorting & Pinning==

Revision as of 21:03, 8 April 2021

Columns

Adding, Editing, Copying, & Deleting Columns

Adding

(Note: these options are only available when in developer mode)

There are three ways to add columns in tables

1. Click on the green button to bring up the panel configuration menu and select Add Column

GUI.Columns.1.jpg

2. Click on a column to bring up the column menu. This method allows you to place the new column in between existing columns. In the menu, select whether to add the new column to the right or left of the selected column

GUI.Columns.2.jpg

3. Click on an open area of the header in order to bring up the header menu. In the menu, select Add Column.

GUI.Columns.3.jpg

Add Column menu

GUI.Columns.4.jpg

Display Use variables, operators, functions, and icons to create the content for the column
Sorting Use variables, operators, and functions to apply a sorting to the contents of the column
Format Choose the format of the column (e.g.: text, numeric, time, date, price, etc.)
Title Create a title for the new column. Must be unique from existing columns.
Header Style Apply different fonts, alignments, style, and colors to the column header
Description Add a description/help which can be seen when clicking on the column header
Column Position Drop down list of various positions where the new column can be placed (can also be hidden)
Style Apply a style to the contents of the column (including font and alignment)
Foreground Color Apply a color to the contents of the column
Background Color Apply a background color to the column
Clickable Makes the contents of the column clickable

Examples

Adjusting header and column styles

GUI.Columns.5.jpg

Column Description

GUI.Columns.6.jpg

GUI.Columns.7.jpg

Editing There are two ways to edit columns

1. Click on the header of the column to bring up the column menu and select Edit Column

GUI.Columns.8.jpg

2. Click on the green button to bring up the panel configuration menu. Hover over Edit Column to bring up the list of columns and select the column

Conditional Formatting

Formatting can be used to highlight data in specific formats when certain parameters are met. In the first part of this example, the Price is set to be in bold and highlighted if it is greater than $50.

Sorting & Pinning

Sizing

Filters

Arranging

Hiding & Searching