Skip to content

[pull] master from cube-js:master #662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Aug 13, 2026
+71 −14
Merged

[pull] master from cube-js:master #662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 54 additions & 13 deletions docs-mintlify/docs/explore-analyze/charts/chart-types/table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,18 +84,20 @@ Under a column pivot, a width set on a measure applies to every column generated

</Note>

## Showing columns as links, bars, or sparklines
## Showing columns as links, bars, sparklines, or images

By default, a column displays its value. It can also be drawn as an inline link, an inline bar, or a sparkline — from the column's card in the **Columns** section of the **Style** tab.
By default, a column displays its value. It can also be drawn as an inline link, an inline bar, a sparkline, or an image — from the column's card in the **Columns** section of the **Style** tab.

Each card has a **Value** toggle and, next to it, a group of icon buttons for **inline bars**, **sparkline**, and **link**:
Each card has a **Value** toggle, a **Bars** / **Sparkline** pair, and separate **Link**
and **Image** buttons:

- **Value** shows the formatted value in the cell. It **composes** with a bar or a sparkline rather than excluding it — a cell can show a bar and its value together.
- The three icon buttons are mutually exclusive: picking one replaces whichever was active. Clicking the active one again clears it, returning the column to a plain value.
- With none of them active, **Value** is forced on and its toggle disabled — so a plain column always shows its value.
- Each button is offered only where it applies: bars and sparklines on **numeric** columns, and **link** only on a column whose dimension declares links or uses `format: link` (see [Inline links](#inline-links)). In link mode the value *is* the link text, so **Value** stays forced on there too.
- **Bars** and **Sparkline** are mutually exclusive: picking one replaces the other, and clicking the active one again clears it.
- **Link** and **Image** are independent of each other, so a column can be both — an image with a declared link renders as a clickable thumbnail. Switching one off leaves the other alone.
- With nothing active, **Value** is forced on and its toggle disabled — so a plain column always shows its value.
- Each button is offered only where it applies: bars and sparklines on **numeric** columns, **Link** only on a column whose dimension declares links or uses `format: link` (see [Inline links](#inline-links)), and **Image** where the dimension declares `format: imageUrl` or the column's values are image URLs (see [Images](#images)). In link mode the value *is* the link text, so **Value** stays forced on there too; image mode draws the thumbnail instead of the value, so **Value** is forced off and its toggle disabled. With **Link** and **Image** both on, image wins: the thumbnail replaces the link text and becomes the click target. Only bars and sparklines leave the toggle free, because only they draw something the value can sit beside.

{/* TODO: screenshot — a column card showing the Value toggle beside the inline bars / sparkline / link buttons */}
{/* TODO: screenshot — a column card showing the Value toggle beside the Bars / Sparkline / Link / Image buttons */}

### Inline links

Expand All @@ -110,16 +112,16 @@ There are two ways to get one:
- **[`format: link`](/reference/data-modeling/dimensions#format) on the dimension**, when the
value already *is* a URL. Use the object form to show a label instead of the raw URL.

For a column whose dimension declares links, selecting the link button reveals a picker for
For a column whose dimension declares links, selecting the **Link** button reveals a picker for
which of the declared links renders inline (inert when the dimension declares only one).
Clicking the link text opens it; clicking elsewhere in the cell selects it and opens the
cell menu as usual.

{/* TODO: screenshot — a table with an inline link column and the Style tab's link button selected */}
{/* TODO: screenshot — a table with an inline link column and the Style tab's Link button selected */}

### Inline bars

Display a numeric column as a proportional in-cell bar by selecting the **inline bars** button on the column's card. Each bar's length reflects the value's magnitude within the column's range.
Display a numeric column as a proportional in-cell bar by selecting the **Bars** button on the column's card. Each bar's length reflects the value's magnitude within the column's range.

| Option | Description |
|---|---|
Expand All @@ -135,15 +137,15 @@ When a column contains both positive and negative values, bars are drawn in both

### Sparklines

Display a numeric column as a **sparkline** — a mini trend chart in each cell that plots the measure across a time dimension. Select the **sparkline** button on the column's card in the **Columns** section of the **Style** tab.
Display a numeric column as a **sparkline** — a mini trend chart in each cell that plots the measure across a time dimension. Select the **Sparkline** button on the column's card in the **Columns** section of the **Style** tab.

A sparkline needs a time dimension to use as its horizontal axis. When you switch a column to **Sparkline** and pick its horizontal axis time dimension, that dimension is **removed from the table query** (if it was there): the table shows one row per remaining dimension, correctly aggregated, while the sparkline plots the measure's value across the time dimension. Values are always correct for any measure type, including counts of distinct values, averages, and custom measures.

Removing the dimension is a one-way change — turning the sparkline back off doesn't restore it to the query. Add it again yourself if you want it back.

<Note>

The time dimensions on offer come from the **semantic view the query is built on**, not from the query itself — so the **sparkline** button is disabled whenever that view has no time dimension, and equally for a query not built on a view at all, however many time dimensions the query selects.
The time dimensions on offer come from the **semantic view the query is built on**, not from the query itself — so the **Sparkline** button is disabled whenever that view has no time dimension, and equally for a query not built on a view at all, however many time dimensions the query selects.

</Note>

Expand Down Expand Up @@ -172,6 +174,45 @@ Internally, sparklines are powered by additional queries grouped by time dimensi

{/* TODO screenshot: table with a sparkline column (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}

### Images

A column whose values are image URLs can render them as inline thumbnails.

A dimension declared with
[`format: imageUrl`](/reference/data-modeling/dimensions#format) renders as thumbnails
straight away, with no chart configuration — the data model is enough. Any other string
column offers an **Image** button on the column's card once its values look like image
URLs, so you can render an unmodelled column of URLs without changing the data model.

| Option | Description |
|---|---|
| **Image shape** | **Square** or **Circle**. |
| **Image fit** | **Fit whole image** shows the whole image inside the box; **Fill and crop** fills the box, cropping the overflow. |
| **Image height** | Thumbnail height in pixels, 20 by default and up to 100, in steps of ten. The row grows to fit it and doesn't shift as images load. |

Cells that can't render an image degrade rather than break: an empty value, a total or
subtotal row, and a URL whose scheme isn't `https` or `data:image/*` all render as plain
text, with no request issued. A permitted URL that fails to load leaves a neutral
placeholder of the same size, so the row never reflows.

Copying a cell copies the URL, not the image — the same value that lands in an export.

A thumbnail is clickable only where the dimension also declares
[`links`](/docs/data-modeling/dimensions#links); the `imageUrl` format makes a value an
image source, not a destination. **Image** and **Link** are independent buttons, so a
column that declares both can render a clickable thumbnail — or you can switch either off
on its own.

<Info>

Images at `https` URLs are fetched directly by the viewer's browser, so they must be
publicly reachable — Cube does not proxy or cache them. `data:image/*` values are
rendered inline and need no network access.

</Info>

{/* TODO screenshot: table with an image column and the Style tab's image controls */}

## Cell menu

Left-clicking a table cell opens a context menu with any [`links` defined on the
Expand Down Expand Up @@ -242,7 +283,7 @@ The **Values** alignment control shows left until you set it, even where numeric

</Note>

Vertical alignment is always available, but it only has a visible effect once a row is taller than one line — set **Overflow** to wrap, or turn on **Word wrap** for an individual column, and the shorter cells beside a wrapped value will sit at the top, middle, or bottom as you choose. Until you set a vertical alignment, values sit at the top. A per-column setting overrides the table-wide one.
Vertical alignment is always available, but it only has a visible effect once a row is taller than one line — set **Overflow** to wrap, or turn on **Word wrap** for an individual column, and the shorter cells beside a wrapped value will sit at the top, middle, or bottom as you choose. Values are vertically centred unless you choose otherwise. A per-column setting overrides the table-wide one.

The **Values** section also holds these table-wide row toggles, shown as icon buttons:

Expand Down
18 changes: 17 additions & 1 deletion docs-mintlify/reference/data-modeling/dimensions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ For `string` dimensions:

| Format | Description |
|--------|-------------|
| `imageUrl` | Display the value as an image |
| `imageUrl` | Display the value as an image, using the value itself as the image URL |
| `link` | Display the value as a hyperlink, using the value itself as the URL |

The `link` format also accepts an object form — `format: { type: link, label: … }` — so the
Expand All @@ -277,6 +277,22 @@ cell shows a label instead of the raw URL (see `crm_link` in the example below).
In [Workbooks][ref-workbooks], a `link`-formatted value renders as a clickable link in
table cells. Values that aren't `http`, `https`, or `mailto` URLs render as plain text.

In [Workbooks][ref-workbooks], an `imageUrl`-formatted value renders as an inline
thumbnail in table cells, with no chart configuration needed. Height, shape, and fit can
be adjusted per column on the chart's Style tab. Values that aren't `https` or
`data:image/*` URLs render as plain text.

<Info>

Images at `https` URLs are fetched directly by the viewer's browser, so they must be
publicly reachable — Cube does not proxy or cache them. `data:image/*` values are
rendered inline and need no network access.

</Info>

A thumbnail is clickable only where the dimension also declares [`links`](#links). The
`imageUrl` format makes a value an image source, not a destination.

For `number` dimensions, you can use the same named formats and custom
[d3-format][link-d3-format] specifiers as [measures](/reference/data-modeling/measures#format):

Expand Down
Loading