> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.
#
# MetricsGrid
MetricsGridコンポーネントは、Python関数やSQLファイルの実行結果の各行を、Metricsコンポーネントで表示します。
表示はグリッド形式です。
```tsx theme={"dark"}
"$"}
suffix={() => "/mo"}
footer={(item) => (
{`${item["usage"]["instance_type"]}`}, {item["region"]}
)}
/>
```
## プロパティ
Python関数やSQLファイルの name
Python関数やSQLファイルに渡す変数。 `defineState()`関数 を使って宣言してください。
カード中央に表示される値を制御します。
関数を渡すとその実行結果をValueとして扱います。文字列を渡すとそれをカラム名として、カラムの値をValueとして扱います。
値の上部に表示される文字列を制御します。
関数を渡すとその実行結果をラベルとして扱います。文字列を渡すとそれをカラム名として、カラムの値をラベルとして扱います。
Valueの左側に表示される文字列を制御します。
関数を渡すとその実行結果をPrefixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をPrefixとして扱います。
Valueの右側に表示される文字列を制御します。
関数を渡すとその実行結果をSuffixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をSuffixとして扱います。
カード下部に表示される文字列を制御します。
関数を渡すとその実行結果をFooterとして表示します。
# Metrics
Metricsコンポーネントは、Python関数やSQLファイルの実行結果のうち、**1行目**の特定の列の値を表示します。
```tsx theme={"dark"}
"$"}
suffix={() => "/mo"}
footer={(item) => (
{`${item["usage"]["instance_type"]}`}, {item["region"]}
)}
/>
```
## プロパティ
Python関数やSQLファイルの name
Python関数やSQLファイルに渡す変数。 `defineState()`関数 を使って宣言してください。
カード中央に表示される値を制御します。
関数を渡すとその実行結果をValueとして扱います。文字列を渡すとそれをカラム名として、カラムの値をValueとして扱います。
値の上部に表示される文字列を制御します。
関数を渡すとその実行結果をラベルとして扱います。文字列を渡すとそれをカラム名として、カラムの値をラベルとして扱います。
Valueの左側に表示される文字列を制御します。
関数を渡すとその実行結果をPrefixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をPrefixとして扱います。
Valueの右側に表示される文字列を制御します。
関数を渡すとその実行結果をSuffixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をSuffixとして扱います。
カード下部に表示される文字列を制御します。
関数を渡すとその実行結果をFooterとして表示します。