Main navigation navigation

Site navigation

Comparison table

Use the comparison table component to compare two products or features in a table format.

Experimental
Not reviewed for accessibility

On this page

import {ComparisonTable} from '@primer/react-brand'

Examples

Default

<ComparisonTable>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
    <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
    <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native core capabilities
      </Text>
      <Text as="p" size="300">
        <a href="#">Over 13,000 GitHub Actions are available</a> in the GitHub
        Marketplace to automate your development workflow.
      </Text>
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native capabilities
      </Text>
      <Text as="p" size="300">
        1,800+ community contributed Jenkins plugins{' '}
        <a href="#">in Jenkins Plugin Marketplace.</a>
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
    <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Self-hosted only
      </Text>
      <Text as="p" size="300">
        CloudBees is the cloud alternative
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Footnote>
    *** This is a biased overview of capabilities by use case, based on publicly
    available information as of 2022-05-16.
  </ComparisonTable.Footnote>
</ComparisonTable>

<ComparisonTable>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
    <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
    <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native core capabilities
      </Text>
      <Text as="p" size="300">
        <a href="#">Over 13,000 GitHub Actions are available</a> in the GitHub
        Marketplace to automate your development workflow.
      </Text>
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native capabilities
      </Text>
      <Text as="p" size="300">
        1,800+ community contributed Jenkins plugins{' '}
        <a href="#">in Jenkins Plugin Marketplace.</a>
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
    <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Self-hosted only
      </Text>
      <Text as="p" size="300">
        CloudBees is the cloud alternative
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Footnote>
    *** This is a biased overview of capabilities by use case, based on publicly
    available information as of 2022-05-16.
  </ComparisonTable.Footnote>
</ComparisonTable>

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.

<ComparisonTable heading="GitHub vs Jenkins">
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
    <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
    <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native core capabilities
      </Text>
      <Text as="p" size="300">
        <a href="#">Over 13,000 GitHub Actions are available</a> in the GitHub
        Marketplace to automate your development workflow.
      </Text>
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native capabilities
      </Text>
      <Text as="p" size="300">
        1,800+ community contributed Jenkins plugins{' '}
        <a href="#">in Jenkins Plugin Marketplace.</a>
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
    <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Self-hosted only
      </Text>
      <Text as="p" size="300">
        CloudBees is the cloud alternative
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Footnote>
    *** This is a biased overview of capabilities by use case, based on publicly
    available information as of 2022-05-16.
  </ComparisonTable.Footnote>
</ComparisonTable>

<ComparisonTable heading="GitHub vs Jenkins">
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
    <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
    <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native core capabilities
      </Text>
      <Text as="p" size="300">
        <a href="#">Over 13,000 GitHub Actions are available</a> in the GitHub
        Marketplace to automate your development workflow.
      </Text>
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Comparable native capabilities
      </Text>
      <Text as="p" size="300">
        1,800+ community contributed Jenkins plugins{' '}
        <a href="#">in Jenkins Plugin Marketplace.</a>
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
    <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      <Text as="p" size="300">
        Self-hosted only
      </Text>
      <Text as="p" size="300">
        CloudBees is the cloud alternative
      </Text>
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Footnote>
    *** This is a biased overview of capabilities by use case, based on publicly
    available information as of 2022-05-16.
  </ComparisonTable.Footnote>
</ComparisonTable>

Featured columns

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.

Name	Default
`--brand-ComparisonTable-featured-color-start`	`--base-color-scale-pink-4`
`--brand-ComparisonTable-featured-color-end`	`--base-color-scale-indigo-5`

const App = () => {
  const designTokenOverrides = `
  .custom-colors[data-color-mode='dark'] {

    /*
     * Modify the value of these tokens.
     * Remember to apply light mode equivalents if you're enabling theme switching.
     */
    --brand-ComparisonTable-featured-color-start: var(--base-color-scale-green-2);
    --brand-ComparisonTable-featured-color-end: var(--base-color-scale-blue-3);

    /*
     * For example only
     */
    padding: 3rem;
    background-color: var(--brand-color-canvas-default);
  }

  .custom-heading {
    background: linear-gradient(271.72deg, var(--brand-ComparisonTable-featured-color-end) 7.09%, var(--brand-ComparisonTable-featured-color-start) 96.61%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: var(--base-size-32);
  }
`

  return (
    <ThemeProvider colorMode="dark" className="custom-colors">
      <style>{designTokenOverrides}</style>
      <Heading as="h3" className="custom-heading">
        GitHub vs Jenkins
      </Heading>
      <ComparisonTable>
        <ComparisonTable.Row>
          <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
          <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
          <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
        </ComparisonTable.Row>
        <ComparisonTable.Row>
          <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
          <ComparisonTable.Cell>
            <Text as="p" size="300">
              Comparable native core capabilities
            </Text>
            <Text as="p" size="300">
              Over 13,000 GitHub Actions are available in the GitHub Marketplace
              to automate your development workflow.
            </Text>
          </ComparisonTable.Cell>
          <ComparisonTable.Cell>
            <Text as="p" size="300">
              Comparable native capabilities
            </Text>
            <Text as="p" size="300">
              1,800+ community contributed Jenkins plugins in Jenkins Plugin
              Marketplace.
            </Text>
          </ComparisonTable.Cell>
        </ComparisonTable.Row>
        <ComparisonTable.Row>
          <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
          <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
          <ComparisonTable.Cell>
            <Text as="p" size="300">
              Self-hosted only
            </Text>
            <Text as="p" size="300">
              CloudBees is the cloud alternative
            </Text>
          </ComparisonTable.Cell>
        </ComparisonTable.Row>
        <ComparisonTable.Footnote>
          *** This is a biased overview of capabilities by use case, based on
          publicly available information as of 2022-05-16.
        </ComparisonTable.Footnote>
      </ComparisonTable>
    </ThemeProvider>
  )
}

render(<App />)

const App = () => {
  const designTokenOverrides = `
  .custom-colors[data-color-mode='dark'] {

    /*
     * Modify the value of these tokens.
     * Remember to apply light mode equivalents if you're enabling theme switching.
     */
    --brand-ComparisonTable-featured-color-start: var(--base-color-scale-green-2);
    --brand-ComparisonTable-featured-color-end: var(--base-color-scale-blue-3);

    /*
     * For example only
     */
    padding: 3rem;
    background-color: var(--brand-color-canvas-default);
  }

  .custom-heading {
    background: linear-gradient(271.72deg, var(--brand-ComparisonTable-featured-color-end) 7.09%, var(--brand-ComparisonTable-featured-color-start) 96.61%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: var(--base-size-32);
  }
`

  return (
    <ThemeProvider colorMode="dark" className="custom-colors">
      <style>{designTokenOverrides}</style>
      <Heading as="h3" className="custom-heading">
        GitHub vs Jenkins
      </Heading>
      <ComparisonTable>
        <ComparisonTable.Row>
          <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
          <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
          <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
        </ComparisonTable.Row>
        <ComparisonTable.Row>
          <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
          <ComparisonTable.Cell>
            <Text as="p" size="300">
              Comparable native core capabilities
            </Text>
            <Text as="p" size="300">
              Over 13,000 GitHub Actions are available in the GitHub Marketplace
              to automate your development workflow.
            </Text>
          </ComparisonTable.Cell>
          <ComparisonTable.Cell>
            <Text as="p" size="300">
              Comparable native capabilities
            </Text>
            <Text as="p" size="300">
              1,800+ community contributed Jenkins plugins in Jenkins Plugin
              Marketplace.
            </Text>
          </ComparisonTable.Cell>
        </ComparisonTable.Row>
        <ComparisonTable.Row>
          <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
          <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
          <ComparisonTable.Cell>
            <Text as="p" size="300">
              Self-hosted only
            </Text>
            <Text as="p" size="300">
              CloudBees is the cloud alternative
            </Text>
          </ComparisonTable.Cell>
        </ComparisonTable.Row>
        <ComparisonTable.Footnote>
          *** This is a biased overview of capabilities by use case, based on
          publicly available information as of 2022-05-16.
        </ComparisonTable.Footnote>
      </ComparisonTable>
    </ThemeProvider>
  )
}

render(<App />)

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.

const App = () => {
  const comparisonTableData = {
    heading: 'GitHub vs Jenkins',
    footnotes:
      '*** This is a biased overview of capabilities by use case, based on publicly available information as of 2022-05-16.',
    headingLabels: ['', 'GitHub', 'Jenkins'],
    features: [
      {
        label: 'Automation & CI/CD',
        values: [
          {
            name: 'GitHub',
            value:
              'Over 13,000 GitHub Actions are available in the GitHub Marketplace to automate your development workflow.',
          },
          {
            name: 'Jenkins',
            value:
              '1,800+ community contributed Jenkins plugins in Jenkins Plugin Marketplace.',
          },
        ],
      },
      {
        label: 'Deployment models',
        values: [
          {
            name: 'GitHub',
            value: 'Cloud or self-hosted',
          },
          {
            name: 'Jenkins',
            value: 'Self-hosted only. CloudBees is the cloud alternative',
          },
        ],
      },
    ],
  }

  return (
    <ComparisonTable heading={comparisonTableData.heading}>
      <ComparisonTable.Row>
        {comparisonTableData.headingLabels.map((label) => (
          <ComparisonTable.Cell key={label}>{label}</ComparisonTable.Cell>
        ))}
      </ComparisonTable.Row>
      {comparisonTableData.features.map(({label, values}) => {
        return (
          <ComparisonTable.Row key={label}>
            <ComparisonTable.Cell key={label}>{label}</ComparisonTable.Cell>
            {values.map(({value, name}) => (
              <ComparisonTable.Cell key={name}>{value}</ComparisonTable.Cell>
            ))}
          </ComparisonTable.Row>
        )
      })}
      <ComparisonTable.Footnote>
        {comparisonTableData.footnotes}
      </ComparisonTable.Footnote>
    </ComparisonTable>
  )
}

render(<App />)

const App = () => {
  const comparisonTableData = {
    heading: 'GitHub vs Jenkins',
    footnotes:
      '*** This is a biased overview of capabilities by use case, based on publicly available information as of 2022-05-16.',
    headingLabels: ['', 'GitHub', 'Jenkins'],
    features: [
      {
        label: 'Automation & CI/CD',
        values: [
          {
            name: 'GitHub',
            value:
              'Over 13,000 GitHub Actions are available in the GitHub Marketplace to automate your development workflow.',
          },
          {
            name: 'Jenkins',
            value:
              '1,800+ community contributed Jenkins plugins in Jenkins Plugin Marketplace.',
          },
        ],
      },
      {
        label: 'Deployment models',
        values: [
          {
            name: 'GitHub',
            value: 'Cloud or self-hosted',
          },
          {
            name: 'Jenkins',
            value: 'Self-hosted only. CloudBees is the cloud alternative',
          },
        ],
      },
    ],
  }

  return (
    <ComparisonTable heading={comparisonTableData.heading}>
      <ComparisonTable.Row>
        {comparisonTableData.headingLabels.map((label) => (
          <ComparisonTable.Cell key={label}>{label}</ComparisonTable.Cell>
        ))}
      </ComparisonTable.Row>
      {comparisonTableData.features.map(({label, values}) => {
        return (
          <ComparisonTable.Row key={label}>
            <ComparisonTable.Cell key={label}>{label}</ComparisonTable.Cell>
            {values.map(({value, name}) => (
              <ComparisonTable.Cell key={name}>{value}</ComparisonTable.Cell>
            ))}
          </ComparisonTable.Row>
        )
      })}
      <ComparisonTable.Footnote>
        {comparisonTableData.footnotes}
      </ComparisonTable.Footnote>
    </ComparisonTable>
  )
}

render(<App />)

Minimal layout

ComparisonTable has an alternative visual presentation mode called minimal. This will display the data without the 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.

<ComparisonTable heading="What is containerization?" variant="minimal">
  <ComparisonTable.Row>
    <ComparisonTable.Cell></ComparisonTable.Cell>
    <ComparisonTable.Cell>Containerization</ComparisonTable.Cell>
    <ComparisonTable.Cell>Virtualization</ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Operating system (OS) </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Containers use the host OS, meaning all containers must be compatible with
      that OS.
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      VMs are effectively separate computers that run their own OS. For example,
      a VM can run Windows even if the host OS is Ubuntu.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Computing resources </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Containers are lightweight, taking only the resources needed to run the
      application and the container manager.{' '}
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      VMs emulate a full computer, meaning that they replicate much of the host
      environment. That uses more memory, CPU cycles, and disk space.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Shareability </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Container images are relatively small in size, making them easy to share.
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      VM images are often much larger as they include a full OS.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Security</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Containers might be isolated only very lightly from each other. A process
      in one container could access memory used by another container, for
      example.
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      By running a separate OS, VMs running on the same hardware are more
      isolated from one another than containers.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
</ComparisonTable>

<ComparisonTable heading="What is containerization?" variant="minimal">
  <ComparisonTable.Row>
    <ComparisonTable.Cell></ComparisonTable.Cell>
    <ComparisonTable.Cell>Containerization</ComparisonTable.Cell>
    <ComparisonTable.Cell>Virtualization</ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Operating system (OS) </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Containers use the host OS, meaning all containers must be compatible with
      that OS.
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      VMs are effectively separate computers that run their own OS. For example,
      a VM can run Windows even if the host OS is Ubuntu.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Computing resources </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Containers are lightweight, taking only the resources needed to run the
      application and the container manager.{' '}
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      VMs emulate a full computer, meaning that they replicate much of the host
      environment. That uses more memory, CPU cycles, and disk space.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Shareability </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Container images are relatively small in size, making them easy to share.
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      VM images are often much larger as they include a full OS.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
  <ComparisonTable.Row>
    <ComparisonTable.Cell>Security</ComparisonTable.Cell>
    <ComparisonTable.Cell>
      Containers might be isolated only very lightly from each other. A process
      in one container could access memory used by another container, for
      example.
    </ComparisonTable.Cell>
    <ComparisonTable.Cell>
      By running a separate OS, VMs running on the same hardware are more
      isolated from one another than containers.
    </ComparisonTable.Cell>
  </ComparisonTable.Row>
</ComparisonTable>

Component props

ComparisonTable Required

name	type	default	required	description
`children`	`ComparisonTable.Row`, `ComparisonTable.Cell`, `ComparisonTable.Footnotes`, `ReactNode`	undefined	`true`	Valid children. Accepts `ReactNode` for conditional rendering.
`heading`	`string`	undefined	`false`	Optional heading that appears above table, preconfigured as a `h3`.
`featuredColumn`	`number`	`1`	`false`	Indicates 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"`	`"default"`	`false`	Applies alternative presentation.

ComparisonTable.Row Required

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

name	type	default	required	description
`children`	`ComparisonTable.Cell`	undefined	`true`	Cells (columns) to be displayed inside the row.

ComparisonTable.Cell Required

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

name	type	default	required	description
`children`	`ReactNode`	undefined	`true`	Content 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.

name	type	default	required	description
`children`	`ReactNode`	undefined	`true`	Content to be displayed inside the column cell.

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

Design tokens

css	js
`--brand-ComparisonTable-featured-color-start`	`brand.ComparisonTable.featured.color.start`
`--brand-ComparisonTable-featured-color-end`	`brand.ComparisonTable.featured.color.end`