---
title: "Table Chart"
slug: "table-chart"
updated: 2025-08-20T23:04:01Z
published: 2025-08-20T23:04:01Z
canonical: "docs.preset.io/table-chart"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.preset.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/table_examples.png)

### Reference Content

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

- [Creating a Chart](/v1/docs/creating-a-chart): A walkthrough of the overall process of chart selection and creation.
- [Using Preset Chart Builder](/v1/docs/using-preset-explore): 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**
- Interactive Table
- Pivot Table

In this article, we'll be focusing on the classic Table visualization type.![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-19%20at%209.25.51%20PM.png)

**Aggregated vs Raw**

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

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-19%20at%209.46.03%20PM.png)

## 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:

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-19%20at%209.34.48%20PM.png)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:

| ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-19%20at%209.35.05%20PM.png) | - **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. |
| --- | --- |
| ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/table_raw_query.png) | **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:

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%209.33.07%20AM.png)

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

| ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%209.44.33%20AM.png) | - **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 |
| --- | --- |
| ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Group%2020.png) | **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.

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%2010.09.19%20AM.png)

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

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%2010.08.20%20AM.png)

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

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%2010.06.41%20AM.png)

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`.

```css
.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.

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%2010.05.27%20AM.png)

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

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screen%20Shot%202022-09-20%20at%2010.00.12%20AM.png)

### **Customizing Columns**

There will be times when you want to display the full value of your numeric columns instead of expressions like 153K, 140K, etc. For this, you can customize your columns as you wish, following these steps:

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1755730370042.png)

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1755730509960.png)

Depending on how big your number is, you will need to use the **D3 format** section or the **Small number format** section:

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1755730702113.png)

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1755730669709.png)

Because in the example of this table, we are using big numbers (e.g, 75.1K), we need to use the D3 format section and select the Original value option:

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1755730955448.png)

![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1755731021199.png)