> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/change-content-per-row-selection.md).

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

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

## 準備

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

## 実現

<figure><img src="/files/U9pJN1UIpT5Svu1PQ8N5" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/n2pn5Kvn0doXZ86Wuf5a" alt=""><figcaption></figcaption></figure>

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

## 参照項目

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