React Table で列ごとにスタイルを当てる
こんにちは、Gaji-Labo フロントエンドエンジニアの石垣です。
今回は、 React Table で実装したテーブルに、列ごとにスタイルを当てる方法をまとめたいと思います。
今回の記事のコードとプレビューは CodeSandbox にありますので、そちらもご覧ください。
セルに統一的にスタイルを当てたい場合は td にスタイルを当てれば良いのですが、例えば背景色を変えるなど、列ごとにスタイルを指定したいケースがあると思います。
そのような場合には、以下のやり方で実装することができます。
まずは今回扱う React Table を使用したテーブルのコードを載せます。
import { useTable } from "react-table";
const Table = ({ columns, data }) => {
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>
);
};
const columns = [
{
Header: "名前",
accessor: "name",
},
{
Header: "メールアドレス",
accessor: "email",
},
];
const data = [
{
name: "A",
email: "example@example.com",
},
{
name: "B",
email: "example@example.com",
}
];これは data と columns を渡してテーブルを作成する基本的なテーブルコンポーネントです。
columns にはテーブルのヘッダーとなるデータを渡し、data にはテーブルの中身となるデータを渡しています。
このコードに対して、列ごとにスタイルを当てていきます。
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()} style={cell.column.style}>
{cell.render("Cell")}
</td>
))}
</tr>まずはテーブル側のコードで、td に style={cell.column.style} を追加しています。
これは columns の各列 に style というプロパティを追加して、その値を td の style に渡しています。
続いて、 columns に style というプロパティを追加します。
const columns = [
{
Header: "名前",
accessor: "name",
style: {
backgroundColor: "red",
},
},
{
Header: "メールアドレス",
accessor: "email",
style: {
backgroundColor: "blue",
},
},
];これで、テーブルのヘッダーのセルには background-color: red 、テーブルの中身のセルには barkground-color: blue が当たります。
今回の記事のコードとプレビューは CodeSandbox にありますので、そちらもご覧ください。
おわりに
今回は、 React Table で実装したテーブルに、列ごとにスタイルを当てる方法をまとめました。
React Table でのスタイリングの方法はいくつかありますが、今回のような方法もありますので、ぜひ参考にしてみてください。
Gaji-Labo は Next.js, React, TypeScript 開発の実績と知見があります
フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
Next.js, React, TypeScript の相談をする！
