Table

Tableコンポーネントは、データを表形式で表示するためのコンポーネントです。各行のデータ、各列の設定、そしてメニューバーの設定を行なうことができます。

基本的な使い方

const rows = [
  { name: '山田太郎', age: 25, job: 'エンジニア' },
  { name: '佐藤花子', age: 30, job: 'デザイナー' },
  { name: '鈴木一郎', age: 18, job: 'エンジニア' },
  { name: '田中二郎', age: 35, job: 'プロジェクトマネージャー' },
  { name: '井上三郎', age: 45, job: 'エンジニア' },
];
return (
  <Table
    rows={rows}
    onRowClick={(row, event) => console.log(row, event.ctrlKey)}
    rowDisabled={(row) => row.age > 40}
    rowColor={(row) => row.age < 20 ? 'green' : 'white' }
    columnNames={{ name: '名前', age: '年齢', job: '職業' }}
    downloadable={true}
    downloadData={rows.map(user => ({ 名前: user.name, 年齢: user.age }))}
  />
);

詳細なインターフェース

名前	説明	デフォルト値
rows	表示する行データの配列を指定します。	なし
onRowClick	行をクリックしたときのイベントハンドラを指定します。行のデータと、MouseEvent (opens in a new tab)が引数として渡されます。	なし
rowDisabled	行の無効判定を行なう関数を指定します。無効と判定された行はグレーアウトされ、クリック不可となります。関数には、行のデータが引数として渡されます。	なし
rowColor	行の色を設定する関数を指定します。関数の返り値は`white`, `gray`, `red`, `green`, `blue`, `yellow`のいずれかです。	なし
columnNames	各列の表示名を指定します。オブジェクト形式で指定します。表示名の指定が行なわれていない列は非表示となります。	なし
downloadable	ダウンロード可能かどうかを指定します。trueを指定すると、メニューバーにダウンロードボタンが表示されます。	false
downloadData	JSONやCSVとしてダウンロード可能にしたいデータを指定します。表示する行データとは異なる形式を使用したい場合に設定します。	rowsプロパティに設定した値
searchDisabled	検索可能かどうかを指定します。trueを指定すると、メニューバーの検索ボックスが非表示になります。	false

rows はオブジェクトの配列で、各オブジェクトが1つの行を表します。また、columnNames は各列の表示名を指定するためのオブジェクトで、キーが列のID（オブジェクトのキー）、値がその列の表示名です。

このコンポーネントには、行がクリックされたときに呼び出されるonRowClick関数も提供されています。この関数は、クリックされた行のデータを引数として受け取ります。

また、downloadableプロパティをtrueに設定すると、表データをダウンロードするためのボタンが表示されます。

HStack / VStack DescriptionList