Skip to content
InsightCharts

Search

Search guides and components

Comparison table

A table whose rows carry inline sparklines, deltas and in-cell bars beside their exact values, from rows and a column config.

Use when
Comparing five to twenty entities on a level, a trend and a change at once: countries, products, teams. Readers look up their row. The sparkline and delta show how the value changed.
Avoid when
Plain lookups with no series (use data table); one measure ranked (use ranked list or bar chart); trends the reader must compare precisely (use small multiples). Each sparkline has its own scale, so it shows the direction of change and cannot be used to compare levels between rows.

Preview

The Netherlands' renewable share of electricity rose from 18.2% to 52.4% between 2019 and 2024Renewable share of electricity generation, selected EU countries, 2019 to 2024
2019 to 2024
Germany49858.9%
Up +18.8 pts
Spain26456.8%
Up +19.3 pts
Netherlands12152.4%
Up +34.2 pts
Italy26449%
Up +9.1 pts
Poland16729.5%
Up +15.4 pts
France53628.3%
Up +7.4 pts

Source: Ember, European Electricity Review 2025 · Rounded, illustrative

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Built from

The pieces comparison table renders or expects in its slots.

Atoms

2

Delta

An inline change indicator: direction arrow, signed value and an optional baseline label.

Sparkline

A word-sized line or bar series without axes, with the latest point marked.

Used in

1 template uses comparison table.

Templates

1

Scorecard

A recurring report. It has a masthead with the report name and period, a headline that states the main change, a KPI grid with changes and sparklines, a ranked list beside one or two trend charts, an optional comparison table, short notes and a source note.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/comparison-table

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { ComparisonTable } from "insightcharts";

Examples

Long data with groupBy, relative change, compact

Trend
Germany58.9%58.9%
Up +46.9%
Spain56.8%56.8%
Up +51.5%
Netherlands52.4%52.4%
Up +187.9%
Italy49%49%
Up +22.8%
France28.3%28.3%
Up +35.4%
Poland29.5%29.5%
Up +109.2%

Illustrative data

Deltas given in the data, down is good

Billing's first response time rose 19% over six weeks
Last six weeks
Onboarding1 h 05 min
Down −54%
Technical support2 h 14 min
Down −46%
Billing3 h 40 min
Up +19%

Illustrative data

Props

PropTypeDefaultDescription
dataDataInputWide data: one row per entity. Long data: one row per entity and period, with groupBy. Omit inside <InsightData>.
transformTransform | Transform[]Applied before rows are grouped.
columnsrequired(string | { key, label?, kind?, fields?, agg?, change?, format?, upIsGood?, mark?, align?, width?, hideBelow?, sortable? })[]Columns in order; the first is the row header. kind is text, number, sparkline, delta or bar. For wide data give a sparkline or computed delta its series with fields; for long data they use the group's rows.
groupBystringLong data: the entity field. Rows sharing a value become one table row, in data order.
highlightstring | string[]Entities to emphasise, matched on the first column.
sort{ key, direction?: "asc" | "desc" }Order rows by a column's value. Default direction: descending. With sortable this is the opening order.
sortablebooleantrueClick or press Enter on a column header to sort by it (numbers largest first, text A to Z); a second press reverses and a third restores the original order. Sparkline columns do not sort; set sortable: false on a column to exclude it.
limitnumberShow only the first N rows.
density"comfortable" | "compact""comfortable"Row padding.
titlestringThe main fact with its number, or a plain label. Set as the table's <caption>.
subtitlestringUnits and period.
sourcestringShown under the table as "Source: ...".
notestringMethod note or caveat.
themeThemeInputTheme override, passed on to the sparklines and deltas.
mode"auto" | "system" | "light" | "dark""auto"Colour mode.