Overview #

The Table Visualization allows you to select attributes from a tabular data set, and display them as a table. Table supports individual column renderers, which means the values for each attribute can have a customized presentation.

The example above has cell background color and text rules set up to show “heat” based on the number of visitors per month. See Rule Sets for more information.  

Table Configuration #

Table configuration is broken out into the following steps:

  1. Base Table
    Sets general table properties.
  2. Columns
    Defines which attributes are displayed as table columns.
  3. Column Renderers
    Affects how the values in the cells and backgrounds are rendered.
  4. Sort
    Defines default sort for the table.
  5. Preview
    Shows a preview of the configured table.

Step 1:  Base Table #

Visualization Name #

A symbolic name used to represent this Visualization. This is the name that will show up in choosers when adding a Visualization to a Page.

Default Font size #

Sets the default font size for the table.

  • Larger
  • Large
  • Normal
  • Small
  • Smaller

Virtual Scrolling #

 

Yes Enables virtual scrolling. This greatly improves performance of large datasets but it also requires uniform row heights. Will disable word wrap within cell renderers.
No Disables virtual scrolling. This means that all rows will be loaded, which can cause performance issues with large datasets. Will enable word wrap within cell renderers. Use of a Client Pagination Filter is highly recommended.

Allow Column Reordering #

Determines whether an end user can drag and drop columns to rearrange column order.

Yes Enables column reordering. Rearranged columns will only persist for the current session. Once a user logs out, the column order will return to the order configured by the administrator.
No Disables column reordering.

Allow Column Hiding #

Determines whether an end user can hide/unhide columns at runtime.

Yes

An end user can show and hide table columns. The user’s visibility preferences will only persist for the current session. Once a user logs out, the column visibility will return to what was configured by the administrator.

The end user will be able to toggle column visibility using the  icon, which will appear in the Visualization header.

No

Disables column hiding.

The  icon will not be displayed in the Visualization header.

Show Row Count in Footer #

Determines whether the total row count is displayed in the table footer.

Yes The total number of records in the current data set will appear in the table footer.
No Hides the total number of records in the table footer.

Enable Row Shading #

Determines how row background colors are applied.

Yes Allows for customization of the background color of each row.
No Row background colors will alternate based on values defined in the theme.


Static Row Shading
#

This row shading option will remove the default alternating row colors, and allows an administrator to apply a static background color for all the rows.

Derived Row Shading #

This row shading option allows an attribute’s value to determine the background color of each row.

Background colors defined in column renderers will override the background color of a row.

Column Header Appearance #

This section groups together a set of properties that affect Column Headers in the table.

Color #

Determines a static color for all column headers.

Size #

Determines the font size for all column headers.

MIN 1
MAX 256

Style #

Determines the font style for all column headers.

Normal Sample
Italic Sample
Bold Sample
Bold Italic Sample

Step 2:  Columns #

This step determines which attributes in a dataset will appear as columns in the table.

Attribute Name #

Each Attribute Name in this list represents a column in the table. The columns will appear in the order displayed here.

Display Name #

This is used to override the raw attribute names in the data set with something better suited for display as a column header. This property defaults to the Attribute Name.

Column Width (pixels) #

This specifies a width for each column. Width can be defined two ways:

Min-Width This specifies the smallest a column can be. It will grow when more space is available.
Fixed This specifies the width of the column in pixels. It will not change even when more space is available.

Header Alignment

This property only affects the column header. It allows you to set the data type of that column and position headers.

  • When creating new Table Visualizations, this property will default to “Auto”.
  • When upgrading from versions prior to edgeSuite v3.4, this property will default to “Left”, ensuring that existing tables do not change.
Auto Text alignment is determined by the data type for that column.

  • Attributes containing NUMBERs will be aligned right
  • Attributes containing STRINGs will be aligned left.
Left Forces the header to be aligned left.
Center Forces the header to be centered.
Right Forces the header to be aligned right.

Visible #

This property affects the default visibility of a column. When “Allow Column Hiding” has been set to Yes, columns that are hidden by default can be enabled at runtime using the  icon.

Checked The column will be visible by default.
Unchecked The column will be hidden by default.

Step 3:  Column Renderers #

Column Name

This is a read only version of the column name from the previous step.  It shows the display name, not the raw attribute name.

Cell Renderer

Cell Renderers combine multiple concepts together.

  • It affects how the value in the cell is rendered
  • It affects how the background of the table cell itself is rendered.

Editing a cell renderer [] brings up a single dialog with all the options for the selected renderer type.

Table Renderers include:

Icon Table’s icon renderer combines:

Number Table’s number renderer exposes numeric formatting that determines how to handle decimal places, commas, and negative numbers. It also combines:

Text Table’s text renderer combines:

Image Source Table’s image source renderer takes an image source string (can be either a data:image string [e.g. data:image/png;base64,…] or a URL) and renders the given image.

See the Renderers section for more details.

Cell Alignment

Auto Text alignment is determined by the data type for that column.

  • Attributes containing NUMBERs will be aligned right
  • Attributes containing STRINGs will be aligned left.
Left Forces the cell to be aligned left.
Center Forces the cell to be centered.
Right Forces the cell to be aligned right.

Step 4:  Sort #

This step allows an administrator to set a default sort for the table.

  • An end user can alter the sort setting for the current session by simply clicking on table headers.
  • Shift + Clicking on multiple column headers will allow an end user to apply a multi-column sort.

Step 5:  Preview #

Shows a preview of what the Table Visualization will look like.


Table Actions:  Row vs. Cell Selection #

In edgeSuite v3.2 and higher, there is no longer a “Table selection mode”. The table’s selection behavior is determined through actions, and is achieved by using a condition on those actions. The example below shows how to make click actions behave differently based on a specific attribute within the record. The example shows a Set Page Variable action, but the same approach applies to a Switch to Page action.

Action 1
Action 2