React-Table ライブラリで列幅を設定する
React は、フロントエンド アプリケーションを構築するための最も一般的なフレームワークです。 最新のアプリには多くの情報が含まれているのが普通です。 生データをテーブルに整理すると、膨大な情報を消化しやすくなります。
react-table ライブラリは、React でテーブルを作成するために必要なロジックを提供します。 ただし、テーブルの UI は自分で作成する必要があります。
この記事では、列の幅を調整するなど、ユーザーがテーブルの外観をカスタマイズする方法を示したいと思います。
react-table ライブラリで列幅をカスタマイズする
react-table は、React でテーブルを作成するためのヘッドレス UI ライブラリです。 実際の UI ではなく、ロジックのみを提供します。
React 開発者は、react-table ライブラリの useTable フックを使用して、生データと列情報に基づいてテーブルを作成できます。
この Table コンポーネントを見てみましょう:
function 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({
style: {
minWidth: 200,
width: 250,
border: "1px solid black"
}
})}
>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
useTable フックで作成されたテーブルの基本的な例です。 その中で、表のスタイル設定に HTML 要素を使用しました。
<table> HTML コンポーネントは最上位レベルにあります。 <thead>、<tr>、<th> などの要素もあります。
自分でコードを調べたい場合は、CodeSandbox で行うことができます。
.getHeaderProps() メソッドを使用して react-table ライブラリで列幅を指定する
useTable() フックで作成されたテーブルがある場合は、UI 要素を自分で定義する必要があります。 そこで、<th> HTML の出番です。
テーブルのヘッダーを定義します。 つまり、列の一番上にあるセルにラベルを付けます。
上記の例では、.getHeaderProps() メソッドを 1つの引数で使用しました: スタイル オブジェクトは、<th> 要素のデフォルト スタイルをオーバーライドします。
実際のコードを見てみましょう。
<th
{...column.getHeaderProps({
style: {
minWidth: 200,
width: 250,
border: "1px solid black"
}
})}
>
これは、react-table ライブラリを使用してテーブルを構築するときに列幅を指定する最も簡単な方法です。 この場合、列のサイズを調整するために minWidth および width パラメーターを指定しました。
実際には、オブジェクトとしてスタイル設定されている限り、任意の CSS プロパティを適用できます。
たとえば、min-width プロパティをインライン スタイルとして適用する場合は、minWidth になります。 これは、すべてのスタイルをオブジェクトとしてフォーマットする必要があるためです。
コードをチェックアウトし、CodeSandbox で自分で編集してみることができます。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn