Table of Contents
- Table Configuration
- Step 1: Base Table
- Column Header Appearance
- Step 2: Columns
- Step 3: Column Renderers
- Step 4: Sort
- Step 5: Preview
- Table Actions: Row vs. Cell Selection
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:
- Base Table
Sets general table properties.
Defines which attributes are displayed as table columns.
- Column Renderers
Affects how the values in the cells and backgrounds are rendered.
Defines default sort for the table.
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.
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.
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 theicon, which will appear in the Visualization header.
Disables column hiding.
Theicon 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.
Determines a static color for all column headers.
Determines the font size for all column headers.
Determines the font style for all column headers.
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.|
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.
|Left||Forces the header to be aligned left.|
|Center||Forces the header to be centered.|
|Right||Forces the header to be aligned right.|
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 #
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 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.
|Auto||Text alignment is determined by the data type for that column.
|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.