ComparisonTable

Use ComparisonTable to compare two products or features in a table format
  • Experimental
  • Review pending by accessibility team
import {ComparisonTable} from '@primer/react-brand'

Examples

Default

Optional heading

A heading can be provided using the heading prop on the root <ComparisonTable>. This will render a heading at an appropriate size relative to the table, and present it accordingly.

For granular control over heading markup or appearance, we recommend using Heading.

By default, the first data column will be marked as featured. This is to draw attention to a particular product as the basis of a comparison against adjacent columns.

Use featuredColumn to alternate the highlighted column if needed.

Color customization

The default colors can be customized through dedicated CSS variables.

NameDefault
--brand-ComparisonTable-featured-color-start--base-color-scale-pink-4
--brand-ComparisonTable-featured-color-end--base-color-scale-indigo-5

Dynamic data

Comparison tables are typically generated using data from an API or content management system.

ComparisonTable accepts ReactNode as a valid child, to facilitate conditional and dynamic rendering.

Minimal layout

ComparisonTable has an alternative visual presentation mode called 'minimal'. This will display the data in a condensed matrix format, and without visual cues like featured columns.

This variant is suitable for embedding into long-form content, or in situations where usage of on-screen color needs to be minimized.

Component props

ComparisonTable Required

nametypedefaultrequireddescription
childrenComparisonTable.Row, ComparisonTable.Cell, ComparisonTable.Footnotes, ReactNodeundefinedtrueValid children. Accepts ReactNode for conditional rendering.
headingstringundefinedfalseOptional heading that appears above table, preconfigured as a h3.
featuredColumnnumberundefined1Indicates that the data column at the specified index is visually important and unique in relation to its adjacent cells, and will be styled accordingly.
variant"default", "minimal"undefined"default"Applies alternative presentation.

ComparisonTable.Row Required

The first row in a table is automatically styled as a table header row.

nametypedefaultrequireddescription
childrenComparisonTable.CellundefinedtrueCells (columns) to be displayed inside the row.

ComparisonTable.Cell Required

The first cell in a row is automatically styled as a header cell.

nametypedefaultrequireddescription
childrenReactNodeundefinedtrueContent to be displayed inside the column cell.

ComparisonTable.Footnote

Optional node that appears below the table. This is useful for adding additional context or disclaimers.

nametypedefaultrequireddescription
childrenReactNodeundefinedtrueContent to be displayed inside the column cell.

id, className and ref are forwarded by default to all children.

Design tokens

cssjs
--brand-ComparisonTable-featured-color-startbrand.ComparisonTable.featured.color.start
--brand-ComparisonTable-featured-color-endbrand.ComparisonTable.featured.color.end