Example Customized Table

Example Table

Adding a Table

Adding table to Pulse Dashboard

To add a table

  1. Make sure you are in edit mode.
  2. Click on table within the component bar at the top. Then click to drop the table onto the dashboard
  3. Select your data source
  4. Write your SQL query. Click save or press Ctrl+E, the table should now be displayed on the dashboard.
  5. Customize the formatting and display of your columns and grid

Customize Table Formatting

You can configure the appearance of a column by either:

  1. Setting options within the component editor.
  2. Right-Clicking on the column and selecting a formatter.
  3. Adding an _SD_FORMATTER at the end of the column name.

UI Selected Formatting

Column Configuration:

Column Configuration

Right-Clicking on Table itself:

Column Configuration

Alternatively by naming columns you can configure a formatter.

Column Formatters

Below is our per column formatters, for more options see our table row formatting article.

Area Example Column Name Postfix Options Description
Numbers 0.11 _SD_NUMBER0 0-9 Decimal places shown Display as a number with thousand separators and decimal places.
Percentages 50% _SD_PERCENT0 0-9 Decimal places shown Display as a percentage % with thousand separators and decimal places.
Currencies $1,000.01 _SD_CURUSD USD/GBP/CCY where CCY is an ISO 4217 currency code. Display an amount in a given currency. Always showing decimal places as appropriate.
Coloured Tags London _SD_TAG No options. Highlight the text with a randomly selected color based on the text. So that the same text generates the same color. For more custom highlighting use raw html.
Status Flags Done _SD_STATUS No options. Highlight the text with an appropriate color based on the text content assuming the text represents a task. e.g.
  • Blue = new, open, created, ready, starting
  • Amber = runnable, waiting, partial, blocked, flagged, suspended, paused, stopping
  • Red = removed, cancelled, rejected, stopped
  • Green = terminated, resolved, closed, done, complete, filled, running
For more custom highlighting use raw html.
HTML _SD_HTML Display the column content exactly as-is, rendering any HTML tags.
Databars ██████████ _SD_DATABAR   Given a value between 0-1 i.e. a ratio or percent, draw it as a bar with size proportional to percentage.


If you want to customize your appearance more than the default formatters allow, you can specify HTML content to get almost full control. This is done by creating a column with a name ending _SD_HTML containing your HTML. For example to generate your own customized colored tag, you could use:

Colors in HTMLs can be specified as names or values such as #FF0000 for red.

Raw HTML column

Grid Configuration

Various parts of the grid can be customized as shown below:

Grid Configuration

Notice the option show PreHreaderPanel controls Column Groupings.
If you turn PreHreaderPanel on AND set column names such as bid_l1, bid_l2, bid_xx, then the bid becomes a prefix header ontop. While the remining title is used for the lower column heading.