Skip to content
InsightCharts

Search

Search guides and components

Glyph table

A table with one row per entity in which every number is drawn as a small form chosen per column (counted dots, squares or icons, a ring, a sized circle, a bar) with the value printed beside it.

Use when
Comparing 3 to about 12 entities across 2 to 5 measures with different units, when the table should read as a graphic: profiles of products, cities, teams or species. Pair it with curve rank by passing both the same order.
Avoid when
Looking up many exact values, sorting, or more than about 12 rows (use data table); one measure across entities (use bar chart or pictogram chart); a trend over time (use line chart or small multiples).

Preview

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

2 infographics use glyph table.

Infographics

2

Matrix poster

One wide landscape graphic that compares 4 to 12 entities on five to seven measures: two measures as S-curves between parallel scales on the left, joined to a table on the right in which every other number is drawn as dots, squares, icons, a ring, a circle or a bar. Both halves share one row order and one colour per entity.

Profile poster

A poster that describes one subject from four sides: the subject as one large silhouette filled to a share (shape-fill), two to four large figures, its place among other things on one scale (scale-ladder), and a table that sets it beside its peers with every number drawn as a small form (glyph-table).

Installation

$ pnpm dlx shadcn@latest add @insightcharts/glyph-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 { GlyphTable } from "insightcharts";

Examples

Highlighted row, icons, selectable

Ten entities, one colour each

Stress: 10 rows, long names, very uneven values, missing data

Props

PropTypeDescription
rowsrequiredRow[]One object per entity.
namestringField holding the entity name. Defaults to the first key of the first row.
nameLabelstringHeading of the name column.
columnsrequired{ field, label?, glyph?: "dots" | "blocks" | "ring" | "circle" | "bar" | "icons" | "text", unit?, format?, max?, icon? }[]Glyph columns in order. dots, blocks and icons draw one mark per unit (default 1, raised to a round number when the largest value would not fit, and stated in the heading). ring fills to max (default 100, or 1 for fractions). circle is sized by area and bar by length against max (default: the column's largest value). text prints the value alone.
orderstring[]Entity names in display order; also assigns colours. Pass the same list to curve-rank to match its curve colours.
highlightstring | string[]Entities drawn in colour; every other row turns grey.
colorBy"series" | "none"series: one colour per entity; past the size of the theme's palette the extra colours are derived from the theme's own (curve-rank derives the same ones). none: every row in the accent. Default: series while the rows fit the palette (at most 8), none beyond.
captionstringThe table's title, as a real <caption>.
subtitlestringMeasures, units and period, under the caption.
sourcestringShown under the table as "Source: ...".
notestringMethod notes or caveats, shown under the table.
selectbooleanLet readers click a row (or press Enter on it) to select it; the other rows fade.
onSelect(values: string[]) => voidCalled with the selected entity names whenever the selection changes.
selectedstring[]Controlled selection: the entity names currently selected. When given, the table shows exactly this list and a click only calls onSelect. Omit it and the table keeps its own selection.