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に設定すると、表データをダウンロードするためのボタンが表示されます。

HStack / VStack DescriptionList