# Tableの行ごとの選択に応じて内容を変える

Dashcombが提供している[Table](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component-table.md)コンポーネントは行を選び、その各コラムの値を取得して、別のコンポーネントにて表示させることが可能です。

## 準備

* データソースのデータをTableコンポーネントに表示させてます。
  * 詳細は[Table](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/table)にご参考ください。

## 実現

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-195c59c12f862814926a9bf7be94764ebad00963%2FTable%E3%81%AE%E8%A1%8C%E3%81%94%E3%81%A8%E3%81%AE%E9%81%B8%E6%8A%9E%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E5%86%85%E5%AE%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B_01.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-f297fa5c4291b3c4a91be658ddcd57049404f82b%2FTable%E3%81%AE%E8%A1%8C%E3%81%94%E3%81%A8%E3%81%AE%E9%81%B8%E6%8A%9E%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E5%86%85%E5%AE%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B_02.png?alt=media" alt=""><figcaption></figcaption></figure>

* [Table](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/table)データの受け皿としてのコンポーネントを追加します。
  * 例えば、[Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)をドラッグ＆ドロップします。
* [Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)などのデフォルト値に `{{table名.selectedRow.id}}`、`{{table名.selectedRow.name}}` などを埋め込みます。
* 表示元の[Table](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/table)の行をクリックすると、[Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)などのコンポーネントに該当行のデータが表示されます。
* 違う行を選んで、該当行のデータで[Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)などのコンポーネントの値を更新します。

## 参照項目

* [Inputの使い方](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)
* [Tableの使い方](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/table)