How to build Table components

The Table component is one of the most flexible visualizations in Klipfolio. You can display your data in many different ways, for example, as raw values, percentages, or currencies. You can also augment your data with images, hyperlinks, indicators, and mini-charts (like sparklines and bullet charts).

Here is an example of a table that uses a few of these features:

This article includes:

• Building with the component tree
• Building a table component
• Customizing your table component

Building with the component tree

When you add a component to a Klip, the structure of that component is outlined in the component tree on the left.  Understanding how to navigate the component tree will make it easier to customize your table. The example below shows the component tree and Klip Editor workspace for a  table component. All component trees follow the same basic structure.

When you add a table component to your Klip, you will work with the following subcomponents:

• Columns: Columns are used to display your data. You can display your data as it looks in your data source, modify it with indicators, or display it in the form of a mini chart.
• Headers: You can apply display properties, formulas, and indicators to identify and categorize columns of data using a custom column header. To learn more, see Using custom column headers.
• Result: You can add a custom results row below any column in your table component to highlight insights into your data. To learn more, see Adding results rows.

For a general introduction to the component tree go here.

How do I build a table?

The following procedure tells you how to build a basic table component. You can apply additional customization by exploring the options in the Properties panel. For a detailed look at some of the customization options available, see How do I customize a table component?

Note: For performance reasons, the maximum number of table rows that can be displayed on the dashboard is 200.

To build a table component:

1. In an open dashboard, click + Add Klip > + New custom Klip, or, from the Klips page, click Build a Custom Klip.
2. Click and drag the Table component into your Klip preview workspace.
3. Click + Add Data Source and select a data source to use.
4. Assign data to a column by clicking on a column in your table and selecting the appropriate column from the Data panel.

Note: If you are using JSON or XML data instead of tabular data, you must locate and select the appropriate element from the hierarchy. Learn more about JSON and XML data here.

5. Optionally, change the data format for a column by navigating to the Properties panel and, at Format as, select the correct format for your data (for example, some columns can be formatted as Text while others should be Date/Time).
6. Optionally, adjust the number of columns in your table by clicking Table in the component tree and, in the Properties panel, changing the number in the Table Columns field.

Note: You can add or remove columns individually by right-clicking on a column in your table.

7. To change the title that displays on your Klip, click the Klip component in the component tree and, at Klip Title, enter your new title in the field.
8. To change the name of your Klip (which displays in your list of Klips), click Untitled in the upper-left corner of the screen and enter your text in the field.
9. Click Save.

How do I customize a table component?

There are many customization options available to you. Here are a few of them:

• Applying custom colours
  • Alternating rows
  • Header background and text
  • Column and table borders
• Using custom column headers
• Applying indicators
• Adding results rows
• Using the mini-chart format

Applying custom colors

You can modify your tables to use custom colors. Following is an example of a table with custom colors applied to the background of the header and alternating rows and to the header text and column and table borders.

Applying custom colors to alternating rows

To apply alternating row background colors:

1. Choose the Table in the component tree and open the Properties panel. (See below.)
   
2. At Row Style, check the box next to Use alternating row color.
3. At Row Color, check the box next to Override default alternating color.
4. To set a new row background color, click the drop-down arrow at Background and either select a color from the palette or enter an html color code.
5. Click Save.

Applying custom colors to header background and text

To apply custom background and text colors to table headers:

1. Choose the Table in the component tree and open the Properties panel.
2. At Header Colors, check the box next to Override default colors.
3. To set a new background color, click the drop-down arrow at Background and either select a color from the palette or enter an html color code.
4. To set a new text color, click the drop-down arrow at Text and either select a color from the palette or enter an html color code. (See below.)
   
5. Click Save.

Applying custom colors to column and table borders

To apply custom column and table border colors:

1. Choose the Table in the component tree and open the Properties panel.
2. At Table Border, check the box next to Show a border around this table.
3. At Border Color, check the box next to Override default color.
4. To set a new border color, click the drop-down arrow and either select a color from the palette or enter an html color code.
5. Click Save.

Using custom column headers

You can apply display properties, formulas, and indicators to individual column headers for table components by selecting the Use custom header option in the Klip Editor. This enables you to customize your column header independently from the rest of the data in the sub-component.

To use custom column headers:

1. Choose a column in the component tree and select the Properties panel.
2. At Column Header, check the box next to Use custom header.
   A new header subcomponent will display in the component tree.
3. Click the Header subcomponent. You can configure your custom header in one of the following ways:
   • Select the Data tab to enter a formula.
   • Select the Properties tab to apply indicators or other property-type options to the column (independently from the rest of the table component).
4. Click Save.

Tip: You can create a dynamic column header by entering a formula in the formula bar.
For example:
DATE_CONVERT(DATE_UNITVALUE(TODAY(),month),"M","MMM")
This formula displays the current month using the TODAY and DATE_UNITVALUE functions in a specified format using the DATE_CONVERT function.

To learn more about functions, click here.

Applying indicators

Applying indicators to any column in your table component can help provide additional context for the value being displayed. You can use the Indicators panel to change the color of values, assign an icon to the value, or color the background of cells to create a heatmap.

The following example demonstrates icon indicators in the Date column and color indicators in the Opens and Clicks columns.

Note: The following instructions use the example of "if" as the condition and "then" as the reaction for setting an indicator.

To apply indicators:

1. Select the component to which you want to apply the indicators.
2. Open the Indicators panel.
3. Click Add.
4. Set the condition. For example, If: Opens is greater than 8.
5. Set the reaction. For example, then: Opens change color.
   Note: You can add multiple indicators to your component and multiple conditions and reactions to any indicator. To add conditions and reactions to an indicator, click the + button to the right of any condition or reaction.
6. Click Save.

Adding results rows

Results rows can be used at the bottom of any column to provide additional insight. Results rows can use one of eight mathematical functions (SUM, AVERAGE, MEDIAN, MIN, MAX, COUNT, COUNT DISTINCT), two data manipulation functions (FIRST, LAST), or use a custom equation. The image below shows three results rows that use the AVERAGE function.

To add a results row using functions:

1. Select the Column component to which you want to add a results row.
2. Open the Properties panel.
3. Select one of the functions options from the Results Row menu.
   A results row will be added to your column.
4. Click Save.

To add a results row using the custom option:

1. Select the Column component to which you want to add a results row.
2. Open the Properties panel.
3. Select the Custom option from the Results Row menu.
   A new sub-component is added to your column in the tree.
4. Select the Results Row sub-component.
5. Assign data to it as you would a column component.
6. Optional: Apply indicators and adjust properties as needed.
7. Click Save.

Using the mini-chart format

The mini-chart format enables you to show sparklines, spark bars, win/loss charts, and bullet charts in your table's columns.

Note: To use a series of values  in the mini-chart format, they need to be formatted as a comma separated list. This can be done using either the ARRAY and JOIN functions or the CONCAT function. To learn more about functions, click here.

Learn more

• Using drill down in a table component
• How to build Sparkline components
• How to build Value Pair components
• How to use Horizontal Mini Chart formats