【React】表を作る

Reactで表を作る

今回はReactで表を作って表示させます。
HTMLと同じようにTableタグなどを使って作成していきます。

やってみる

table.tsx

import React from 'react';

function Table(props) {
  const dataArray = [
      { name: '田中', age: 25, city: '東京' },
      { name: '高橋', age: 30, city: '大阪' },
      { name: '佐藤', age: 35, city: '北海道' },
  ];
  
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        {dataArray.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>{item.city}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

簡単な表ですが、npm startで実行してみると

このような表が表示されます。
thタグにcolorやbackground-colorなどを指定すると文字色や背景色を変えることができます。