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

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.

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.

Last updated

Was this helpful?