Matrix Table Layout

The Matrix Table is a layout container used to display multiple visuals and assets within tiles in a tabular construct. The table can be used to display visualizations, dynamic images, text, slicers, buttons, images, and web panels. However, the matrix table is commonly used to create KPI scorecards. Typically, KPIs, mini visuals, and text labels are displayed across several rows, to easily compare these details within a single formatting structure. For instance, the matrix table below compares sales during April, May, and June.

Note: This feature is not available in the Community Edition.

Add a Table

Do either of the following from the Toolbox:

  • Click Add Table (red arrow below) to add a table of the default size (3 columns by 3 rows; 9 tiles in total).
  • Right-click Add Table and specify the table size by selecting rows and columns (green highlight below).

Then click anywhere on the canvas to place the container there.

Add Assets to the Table

Drag any assets onto the required tile in the table.

Remove Assets from the Table

To move an asset out of the table, simply drag it and place it on the canvas.

To delete an asset that's in a table, right-click on it and click Delete from the context menu.

Edit a Table

To access the Matrix Table's context menu:

  • Right-click the borders of the Matrix Table container (green highlight below).
  • Right-click a visual inside the Matrix Table. In this case, the context menu is shown inside a Matrix Table sub-menu.

Tip: In addition to the matrix table items, you can also access other items from the context menu. Where the border is selected, this includes the Panel Settings (orange arrow above) which opens the Formatting Panel.

Function

Description

Insert

Insert columns before or after, or rows above or below, the current selection. If you have the table selected, the column or row is added before or above the first column or row in the table or after or beneath the last.

Delete

Delete selected columns or rows or cell content.

Tip: You can also resize the table's columns and rows by dragging a row or cell border vertically or horizontally.

Table Settings

When the table container is selected, various formatting options will be enabled from the Component ribbon. As usual, you can edit the panels. You can also adjust the table settings (red highlight below).

To adjust the table settings for all cells in the table, select the table container. To adjust settings for a specified cell within the table, select only the required cell.

  • Fill: change the color of the cells.
  • Borders: show all or no cell borders, or show borders only at the top, bottom, left, or right of the cell(s).
  • Border Color: set the border color.
  • Border Thickness: set the border width.
  • Padding: increase padding between cell borders.
  • Reset Table Formatting: revert to the default table formatting.

Table at Runtime

The assets in the table behave as usual at runtime. Slicer, and cross-visual interactions are enabled by default, and other functions are available from the context menu as usual.