Table

Tableは、データを行と列で構造化して表示する際に使用されるコンポーネントです。
データを比較・分析しやすくするために設計されており、ヘッダー、行、列などの要素を含みます。

プロパティ

Tableは、以下のプロパティをサポートしています。

TableHead.TableHeadProps

名前 デフォルト値 説明
size boolean medium thのサイズを指定します。small, medium, large のいずれかを選択できます。
onClick () => void () => {} セルがクリックされたときに呼び出される関数です。

TableData.TableDataProps

名前 デフォルト値 説明
size boolean medium tdのサイズを指定します。small, medium, large のいずれかを選択できます。
colspan number セルがまたがる列数を指定できます。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー&ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

使い方


サンプル

Default

特に操作が行われていない、デフォルトの状態です。

Caption

強調されたメインテキストの下に補足文を表示することもできます。

UseComponent

セル内にボタンやアイコンなどの他のコンポーネントを配置して、よりリッチなテーブルを作成することも可能です。

DataTable

フィルタリング、ソート、ページネーションなどの機能と組み合わせることもできます。