Reactテーブルの特定の列にリンクを追加する方法

方法1: テキストをリンクに変換する

テーブル内の特定の列にリンクを追加するには、テキストをリンク要素(<a>)でラップします。以下は、テーブル内の特定の列にリンクを追加する例です。

import React from 'react';
function TableWithLinks() {
  const data = [
    { id: 1, name: 'John', email: '[email protected]' },
    { id: 2, name: 'Jane', email: '[email protected]' },
    // ... 追加のデータ行
  ];
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>
              <a href={`mailto:${item.email}`}>{item.email}</a>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
export default TableWithLinks;

上記の例では、email列の各セルがメールアドレスへのリンクになります。

方法2: ボタンをリンクに変換する

テーブル内の特定の列にボタンをリンク要素(<a>)に変換することもできます。以下は、ボタンをリンクに変換する例です。

import React from 'react';
function TableWithButtonLinks() {
  const data = [
    { id: 1, name: 'John', website: 'https://john.example.com' },
    { id: 2, name: 'Jane', website: 'https://jane.example.com' },
    // ... 追加のデータ行
  ];
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>
              <a href={item.website} target="_blank" rel="noopener noreferrer">
                Visit Website
              </a>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
export default TableWithButtonLinks;

上記の例では、website列の各セルが外部ウェブサイトへのリンクを開くボタンになります。

これらはReactでテーブル内の特定の列にリンクを追加する一般的な方法の一部です。必要に応じて、リンクのスタイリングや他のカスタマイズも行えます。