Table
Tableコンポーネントは、データを表形式で表示するためのコンポーネントです。各行のデータ、各列の設定、そしてメニューバーの設定を行なうことができます。
基本的な使い方
<Table
rows={[
{ name: '山田太郎', age: 25, job: 'エンジニア' },
{ name: '佐藤花子', age: 30, job: 'デザイナー' },
{ name: '鈴木一郎', age: 35, job: 'プロジェクトマネージャー' },
{ name: '田中二郎', age: 40, job: 'エンジニア' },
{ name: '井上三郎', age: 45, job: 'エンジニア' },
]}
onRowClick={(row) => console.log(row)}
rowDisabled={(row) => row.age > 40}
columnNames={{ name: '名前', age: '年齢', job: '職業' }}
downloadable={true}
/>

詳細なインターフェース
名前 | 説明 | デフォルト値 |
---|---|---|
rows | 表示する行データの配列を指定します。 | なし |
onRowClick | 行をクリックしたときのイベントハンドラを指定します。行のデータが引数として渡されます。 | なし |
rowDisabled | 行の無効判定を行なう関数を指定します。無効と判定された行はグレーアウトされ、クリック不可となります。関数には、行のデータが引数として渡されます。 | なし |
columnNames | 各列の表示名を指定します。オブジェクト形式で指定します。表示名の指定が行なわれていない列は非表示となります。 | なし |
downloadable | ダウンロード可能かどうかを指定します。trueを指定すると、メニューバーにダウンロードボタンが表示されます。 | false |
searchDisabled | 検索可能かどうかを指定します。trueを指定すると、メニューバーの検索ボックスが非表示になります。 | false |
rows
はオブジェクトの配列で、各オブジェクトが1つの行を表します。また、columnNames
は各列の表示名を指定するためのオブジェクトで、キーが列のID(オブジェクトのキー)、値がその列の表示名です。
このコンポーネントには、行がクリックされたときに呼び出されるonRowClick関数も提供されています。この関数は、クリックされた行のデータを引数として受け取ります。
また、downloadable
プロパティをtrueに設定すると、表データをダウンロードするためのボタンが表示されます。