【Next.js】比較表の作り方を解説｜自社の列の強調とスマホ対応

// components/ComparisonTable.tsx
  import { columns, rows } from "./comparison-data";

  function Cell({ value }: { value: boolean | string }) {
    if (typeof value === "string") return <span>{value}</span>;
    return value ? (
      <span>
        <span aria-hidden="true">✓</span>
        <span className="sr-only">対応</span>
      </span>
    ) : (
      <span className="text-zinc-400">
        <span aria-hidden="true">—</span>
        <span className="sr-only">非対応</span>
      </span>
    );
  }

  export function ComparisonTable() {
    return (
      <table className="hidden w-full text-left text-sm md:table">
        <caption className="sr-only">自社サービス・外注・内製の比較</caption>
        <thead>
          <tr>
            <th scope="col" className="w-1/4 py-4" />
            {columns.map((col, i) => (
              <th
                key={col}
                scope="col"
                className={i === 0 ? "rounded-t-2xl bg-zinc-900 px-4 py-4 text-white" : "px-4 py-4"}
              >
                {col}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.label} className="border-t border-zinc-200">
              <th scope="row" className="py-4 font-medium">{row.label}</th>
              {row.values.map((v, i) => (
                <td
                  key={columns[i]}
                  className={i === 0 ? "bg-zinc-900 px-4 py-4 text-white" : "px-4 py-4"}
                >
                  <Cell value={v} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }