# Tablechart
## 🧭 Overview
The Table Chart is a versatile tool for presenting structured data in rows and columns. It’s ideal for comparing items, displaying detailed records, or creating interactive reports.
> 📊 Example Use Case
>
> * Displaying product or user lists with detailed attributes
> * Creating comparison tables (e.g. pricing, performance, versions)
> * Tracking project tasks or tickets with statuses and tags
> * Surfacing KPIs alongside trends and variations
> * Building exportable, filterable datasets for reporting
## ⭐️ Key Features
* **Tags:** Use colored or simple tags to highlight and categorize content effectively.
* **Images:** Embed images directly within rows for a more visual and contextual display.
* **Clickable URL Links:** Include fully interactive links to external resources or internal references.
* **Readable Text:** Ensure clarity and accessibility with clean, legible typography.
* **Responsive:** Optimized layout adapts seamlessly across devices and screen sizes.
* **Alternated Rows:** Improve readability with alternating background colors for table rows.
* **Interactive Column Widths:** Manually resize columns to adjust the view based on content or preference.
* **Column label:** Rename columns directly in the chart editor
## Configuration
{% tabs %}
{% tab title="New Tablechart" %}
**Learn how to create a tablechart using the new design with this step-by-step guide.**\
Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.
{% @arcade/embed url="" flowId="0o79wQeL8mhTLMKWpbaq" %}
| **Chart parameters** | | |
| ----------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text** | | Displays plain text from a selected dataset column. |
| | **Dataset column** | Selects the column in the dataset that provides the content for this table field. |
| | **Column label** | Renames column label directly. |
| | **Change date format** | You can change the display format by selecting an option from the dropdown. Common D3 formats are suggested. *Note: Your column must be in a date format for this option to work.* |
| | **Show data with quotes** | Wraps text content in quotation marks for visual emphasis or formatting clarity. |
| **Value** | | Displays numeric values from a dataset column. |
| | **Add data variation** | Enables color or style variations based on value ranges or thresholds. |
| **Image** | | Embeds images from the dataset directly into table cells. |
| | **Image type** | Defines how the image is stored (e.g., asset, external). |
| | **Image size** | Sets the display size for images in the table. |
| **URL Link** | | Displays clickable links using a URL from the dataset. |
| | **Display column** | Specifies which dataset column contains the URL. |
| **Tag label** | | Shows tags (e.g., status, category) with optional colors for better visual categorization. |
| | **Tag format\*** | Shows tags simple- or multi-colored. |
| **Data variation** | | Automatically applies variations (e.g., color) based on value type or logic. |
| **More column options** | | |
| | **Groups column options** | Groups different columns together for better readability. |
| **Table** | | |
| | **Rows per page** | Sets how many rows are visible per page; enables pagination. |
| **More table options** | | |
| | **Show totals in last row** | Displays total or summary values at the bottom of the table. |
| | **Hide table headers** | Hides the table’s top row with column titles for a cleaner look. |
| | **Hide filter for headers** | Removes filter UI elements from the header row. |
| | **Make first column sticky** | Keeps the first column fixed while horizontally scrolling the table. |
| | **Column width** | Allows you to adjust the width of the column from the interface. |
| **Style** | | |
| | Alternate row color | Alternates row colors. |
| {% endtab %} | | |
{% tab title="Legacy Tablechart" %} **\***** Mandatory parameters**
| Section | Option | Configuration tutorial |
| -------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | Dataset**\*** | Select the dataset used by the chart |
| | Columns**\*** | Cf. next tables for more information on column types ([Tag](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#tag), [Value](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#value), [Variation](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#variation), [Comment](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#comment), [Bullet](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#bullet), [Link](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#link), [Image](https://app.gitbook.com/o/Ub5PlSyBFe0ylc7qSJuN/s/ZxYYf1KpgarKMgMsDCrw/~/changes/275/visualizations-and-layouts/creating-visualizations/viz-gallery/new-tablechart#image)) |
| Display | Rows Per Page | Allows to increase numbers of rows for each page |
| Display | Row Color Coding | Apply a color on the full row based on data column |
| Display | Row Height | In px. Determine the height of rows |
| Display | Hide Headers | Hide the headers of the table |
| Display | Hide Search | Remove the possibility to search on unique values |
| Display | Make First Column Sticky | Make the first column sticky when we scroll horizontally |
| Display | Size | Define the chart size when having multiple ones |
| Display | Mobile Size | Define the chart size when having multiple ones on mobile |
| Display | Compact Rows | Display the rows with a decrease height in order to optimize display. It also compact tags & images |
| Display | Total Rows | Display a new row that sum columns based on the data type. On numbers, Toucan makes a "sum", on other types, Toucan makes a "count". |
| Display | Custom CSS Class | Set a custom CSS class to target this specific chart with CSS |
| Tutorial | Tutorial | Set a tutorial to help your users to understand the chart by giving him an id and a message |
**Tag**
*This column type is like a label since each value has a given color. This makes it a great way to visually see patterns and commonalities.*
| Option | Description |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Tag Text | Select the column containing the text to display |
| Tag Color | Select a column containing values that groups label together. They will be segregated by groups with different series colors. |
| Column Width | In px. Determine the width of the column. |
| Date Format | Customize date format when your "Tag text" is a Date. |
| Use Uniform Color | Deactivate color affectation on tags. Will result with neutral (grey) color. |
| Group | Display the column as a sub-column in a groups of columns. |
**Value**
*This column type is perfect to display numbers.*
{% hint style="info" %}
**Tip**
Always add [**precision**](https://docs-v3.toucantoco.com/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/add-units-precisions-and-sentiments) to have a perfect display!
{% endhint %}
| Option | Description |
| ---------------------- | -------------------------------------------------------------------------------------------------------- |
| Value | Select the column containing the value to display |
| Variation | Select the column containing a meaningful variation (ex: evolution vs. N-1) |
| Value alignement | Determine whether to align the value on the left, on the center or the right. By default, it's centered. |
| Column Width | In px. Determine the width of the column. |
| Display Sentiment | Display the sentiment on the figure if one is configured on the "value" field. |
| Sentiment Display Type | Choose whether if the sentiment is displayed on the text or on the cell. On the text by default. |
| Group | Display the column as a sub-column in a groups of columns. |
**Variation**
*This column type is perfect to display an evolution.*
| Option | Description |
| -------------------- | -------------------------------------------------------------------------------------------------------- |
| Variation | Select the column containing a meaningful variation (ex: evolution vs. N-1) |
| Variation alignement | Determine whether to align the value on the left, on the center or the right. By default, it's centered. |
| Column Width | In px. Determine the width of the column. |
| Group | Display the column as a sub-column in a groups of columns. |
**Comment**
This column type is perfect to display long text.
{% hint style="info" %}
**Note**
By default, Toucan will place quotes around the comment. In this case, we’ll remove the comments by making sure the ADD QUOTES option is turned off.
{% endhint %}
| Option | Description |
| --------------- | -------------------------------------------------------------------------------------------------------- |
| Text | Select the column containing the text to display. |
| Text alignement | Determine whether to align the value on the left, on the center or the right. By default, it's centered. |
| Column Width | In px. Determine the width of the column. |
| Add quotes | If turned off, quotes will disppear. |
| Group | Display the column as a sub-column in a groups of columns. |
**Bullet**
*This column type is useful to display objectives with target within a tablechart.*
| Option | Description |
| ----------------------------- | ------------------------------------------------------------------------------------- |
| Value | Select the column containing the value to display |
| Target | Select the column containing the target to reach |
| Column Header | Fill the table column header with text. |
| Overwrite Automatic Sentiment | Select the column to override the default sentiment rules (value over target) |
| Use Same Scale for All Bars | Enable to use the same scale across all bars within the tablechart. False by default. |
| Group | Display the column as a sub-column in a groups of columns. |
**Link**
This column type is useful to display and format URLs for interactive tablechart.
| Option | Description |
| --------------- | ------------------------------------------------------------------------------------------------------- |
| URL | Select the column containing URLs |
| Link Name | Select the column containing a meaningful text for the given URLs |
| Text alignement | Determine whether to align the text on the left, on the center or the right. By default, it's centered. |
| Column Width | In px. Determine the width of the column. |
| Group | Display the column as a sub-column in a groups of columns. |
**Image**
This column type is useful to display images within the tablechart.
| Option | Description |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image | Select the column containing image path (either a URL or name of the asset in Toucan) |
| Image type | Select the type according to the image you want to display. "Asset" is an image hosted in Toucan and "External" is an image hosted on the web, accessible with an URL. |
| Image Size | Select the display size between "small", "medium" and "large. "Small" by default. |
| Column Width | In px. Determine the width of the column. |
| Group | Display the column as a sub-column in a groups of columns. |
| {% endtab %} | |
| {% endtabs %} | |
