Reactテーブルのための優れたライブラリとその使用方法

React Table: React Tableは、柔軟性とカスタマイズ性に優れたテーブルライブラリです。以下の手順に従って、React Tableを導入し、使用する方法を説明します。

React Tableをインストールします:
```
npm install react-table
```
ReactコンポーネントでReact Tableをインポートします:
```
import { useTable } from 'react-table';
```

テーブルデータとカラムの設定を行います:

const data = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
// 他のデータ行
];
const columns = [
{ Header: 'Name', accessor: 'name' },
{ Header: 'Age', accessor: 'age' },
// 他のカラム
];

Reactコンポーネント内でテーブルをレンダリングします:

const MyTable = () => {
const {
 getTableProps,
 getTableBodyProps,
 headerGroups,
 rows,
 prepareRow,
} = useTable({ columns, data });
return (
 <table {...getTableProps()}>
   <thead>
     {headerGroups.map(headerGroup => (
       <tr {...headerGroup.getHeaderGroupProps()}>
         {headerGroup.headers.map(column => (
           <th {...column.getHeaderProps()}>{column.render('Header')}</th>
         ))}
       </tr>
     ))}
   </thead>
   <tbody {...getTableBodyProps()}>
     {rows.map(row => {
       prepareRow(row);
       return (
         <tr {...row.getRowProps()}>
           {row.cells.map(cell => (
             <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
           ))}
         </tr>
       );
     })}
   </tbody>
 </table>
);
};

Reactアプリケーションでテーブルを使用します:

const App = () => {
return (
 <div>
   <h1>React Table Example</h1>
   <MyTable />
 </div>
);
};

Material-UI: Material-UIは、Googleのマテリアルデザインを基にしたコンポーネントライブラリです。Tableコンポーネントを使用して、Reactでテーブルを作成することができます。

以下は、Material-UIを使用したテーブルの例です。

  import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
  const MyTable = () => {
    const data = [
      { name: 'John', age: 25 },
      { name: 'Jane', age: 30 },
      // 他のデータ行
    ];
    return (
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell>Age</TableCell>
              {/* 他のカラム */}
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(row => (
              <TableRow key={row.name}>
                <TableCell>{row.name}</TableCell>
                <TableCell>{row.age}</TableCell>
                {/* 他のセル */}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    );
  };