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
wordBreak	テーブルの幅に対してセルの内容が長すぎた場合の、折り返し方法を指定します。`normal`, `words`, `all`, `keep`のいずれかを指定可能です。	keep

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

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

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

Drawer DescriptionList