【React Native】表テーブルを表示できるライブラリ「react-native-table-component」

React Native でテーブルを表示したかったので導入したライブラリ「react-native-table-component」のご紹介です。
元々 React Native で用意されている View コンポーネントを使えば自前で実装もできそうでしたが、コードが分かりにくくなりそうだったので、素直に既にあるライブラリを使用することにしました。

GitHub のページはこちらから。

GitHub – Gil2015/react-native-table-component: 🌱Build table for react native
https://github.com/Gil2015/react-native-table-component

ライブラリのインストールには下記のコマンドを実行します。

npm install react-native-table-component --save

上記が終わったら、プロジェクトに実装していきます。

まず、テーブルコンポーネントの要素をインポートし、テーブルに表示するテストデータを用意します。

import { Table, Row, Rows } from 'react-native-table-component';

const tableHead = ['Head', 'Head2', 'Head3', 'Head4'];
const tableData = [
  ['1', '2', '3', '4'],
  ['a', 'b', 'c', 'd'],
  ['1', '2', '3', '456\n789'],
  ['a', 'b', 'c', 'd']
];

あとは、render() の return 内に下記を追加するだけです。

<Table borderStyle={{borderWidth: 1}}>
  <Row data={tableHead} />
  <Rows data={tableData} />
</Table>

なお、スタイルについては割愛しておりますので、ご自身で調整してください。
<Row> や <Rows> の data に表示したい値を渡すだけでOKなので、React を使っていた時よりも楽な気がしますね。

基本的な使い方は以上です。
<Row> や <Rows> 以外にも、<Col> や <Cols> と言った、列ごとにデータを指定する方法もあるので、状況に合わせて使い分けができます。
詳しくは、GitHub のページをご参照ください。

以上、React Native で表テーブルを表示できるライブラリ「react-native-table-component」のご紹介でした。
ご参考になれば幸いです。