Table Chart

Overview

The table chart lets you showcase spreadsheet-like tables from the data in your database. This visualization type is great for showcasing raw and aggregated data in a familiar format. Here are some examples:

Reference Content

The following articles may be useful resources as you build your chart:

• Creating a Chart: A walkthrough of the overall process of chart selection and creation.
• Using Preset Chart Builder: How to work with the Chart Builder page, the primary interface used when creating a chart.

Overview

Types of Tables

You'll notice a few different options for tables in the visualization picker:

• Table
• Pivot Table

In this article, we'll be focusing on the classic Table visualization type.

Aggregated vs Raw

With the Table visualization type, you can either showcase the raw data directly from your database or first apply aggregations.

Building a Table from Raw Data

The following example is a table that showcases 10 rows and 6 specific columns from the underlying table in our database:

For this mode, the only requirement is to select which Columns you want to include. Here's a breakdown of all the things we chose in Chart Builder to create the chart above:

	Query Mode: select Raw Records to skip the step of adding aggregation functions Columns: choose the columns here you want included in your table. You can click and drag the column names here to change the ordering. Row Limit: select the number of rows you want included. We chose 10 to keep the visualization compact and digestible.
	Generated Query As expected, the query is a simile SELECT query with no aggregate functions applied.

Building a Table from Aggregated Data

Alternatively, you can apply aggregate functions on your data to showcase aggregate values in your table instead. Here's an example of a table with aggregated values:

Besides changing the Query Mode to Aggregate, you now need to choose the Dimensions and Metrics instead.

Query Mode: select Aggregate so you're able to select aggregate functions to apply to specific columns. Dimensions: choose how you want the metrics to be grouped by. Each choice here will be reflected as a column on the left-hand side of the table. Metrics: choose the columns and aggregate functions you want included in the metric calculations. The metrics columns appear on the right-hand side of the table. Row Limit: set to 10 just to show the top 10 rows

Generated Query The generated query will include the dimensions and metrics (with aggregate functions) that you specified in Chart Builder.

Customizing your Table

You can customize the table experience further using the following options under the Customize tab:

• Timestamp Format: choose how you want timestamp values to be formatted
• Page Length: select the number of rows you want in each page. Pagination is an effective way to showcase hundreds of rows without showing all of them at once and overwhelming the dashboard.

• Search Box: if this checkbox is ticked, a search bar will be added for chart consumers to search the filtered data in your table.

• Cell Bars: if this checkbox is ticked, cells with numerical values will be shaded by the magnitude of the value.

You can change the cell bar colors with custom CSS:

1. Navigate to the relevant dashboard.
2. Click Edit Dashboard.
3. Click the ellipsis (...), and select Edit CSS.
4. Change the background color of the .cell-bar class - to apply different colors for positive and negative bars, use .cell-bar.positive and .cell-bar.negative.

.cell-bar {
  background: red;
  opacity: 50%;
}

• Color +/-: if this checkbox is ticked, cells with numerical values will be colorized if they are positive or negative.
• Allows Columns to be Rearranged: if this checkbox is ticked, users can temporarily change the order of the columns in the chart.
• Customize Columns: additional options for column width and text alignment.

• Conditional Formatting: add criteria for conditionally coloring values in columns based on their magnitude.