Data table — Side-by-side record comparison

Attribute rows align two records side by side with actions in their column headers. Use to compare a small selected set without scanning a long table.

ReactHTML

1440 × 900

Open in new tab

Component.tsx119 lines

export default function DataTableRecordComparison() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Compare selected records
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Describe the attributes that matter when comparing these entries.
          </p>
        </div>
        <table className="mt-8 w-full table-fixed text-left">
          <caption className="sr-only">
            Attribute comparison of two selected records
          </caption>
          <thead>
            <tr>
              <th
                scope="col"
                className="w-1/3 px-3 py-4 text-left text-sm font-medium"
              >
                Attribute
              </th>
              <th
                scope="col"
                className="px-3 py-4 text-left text-sm font-semibold"
              >
                Record label
                <p className="mt-2 font-normal">
                  <a
                    href="#"
                    aria-label="Open first record"
                    className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  >
                    Open record
                  </a>
                </p>
              </th>
              <th
                scope="col"
                className="px-3 py-4 text-left text-sm font-semibold"
              >
                Entry label
                <p className="mt-2 font-normal">
                  <a
                    href="#"
                    className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  >
                    Open entry
                  </a>
                </p>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Owner
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">
                Alex Rivera
              </td>
              <td className="px-3 py-4 text-sm text-neutral-600 ">
                Jordan Lee
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Status
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Active</td>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Review</td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Created
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Mar 14</td>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Mar 12</td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Items
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">24</td>
              <td className="px-3 py-4 text-sm text-neutral-600 ">18</td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Completion
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">84%</td>
              <td className="px-3 py-4 text-sm text-neutral-600 ">68%</td>
            </tr>
          </tbody>
        </table>
        <p className="mt-6 text-sm text-neutral-500">
          Short note describing the comparison scope.
        </p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for comparing two selected entities by stable attributes. Choose a standard record list for scanning many entities. Variations: compare versions, replace one record with a baseline, or add a difference-only summary.
Hierarchy: The h1 leads to selected record titles, then attribute rows. Each row header is the comparison criterion. Title allows 6 words, lede 16, record labels 4, attributes 2 and scope note 12.
Responsive: All three columns remain at narrow widths; values and header actions wrap naturally rather than truncating. No column has a fixed minimum width. Title grows at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A three-column fixed-layout comparison begins after 32px. Attribute and record columns share the width equally, with 12px horizontal and 16px vertical cell padding. Record header actions sit 8px below titles.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Compare selected records                                      │
│Attribute             Record label         Entry label        │
│                      [Open record]        [Open entry]       │
│Owner                 Alex Rivera          Jordan Lee         │
│Status                Active               Review             │
│Created               Mar 14               Mar 12             │
│Items                 24                   18                 │
│Completion            84%                  68%                │
│Comparison scope note                                         │
└──────────────────────────────────────────────────────────────┘

View all

Data table — Audit log with date bands
Layout tags: table,list,compact
Data table — Dense table with priority columns
Layout tags: stacked,table,numbers,compact
Data table — Expandable rows
Layout tags: stacked,table,list

Data table — Side-by-side record comparison

Pattern notes

More in Data table

Data table — Audit log with date bands

Data table — Dense table with priority columns

Data table — Expandable rows