Table

表形式のデータを表示。行選択機能をサポート。

インストール

import { Table } from "@ginga-ui/core";

基本的な使い方

シンプルなテーブルの使用例です。

名前種類更新日サイズ
ドキュメントフォルダ2024/12/011.2 GB
画像フォルダ2024/11/28894 MB
README.mdMarkdownファイル2024/12/154 KB
package.jsonJSONファイル2024/12/102 KB
export function BasicExample() {
  return (
    <Table data={sampleData} columns={columns} aria-label="ファイル一覧" />
  );
}

行選択

行を選択できるテーブルです。

名前種類更新日サイズ
ドキュメントフォルダ2024/12/011.2 GB
画像フォルダ2024/11/28894 MB
README.mdMarkdownファイル2024/12/154 KB
package.jsonJSONファイル2024/12/102 KB
export function WithSelectionExample() {
  return (
    <Table
      data={sampleData}
      columns={columns}
      selectionMode="multiple"
      aria-label="選択可能なファイル一覧"
      onSelectionChange={(keys) => console.log("選択:", keys)}
    />
  );
}

ユーザーテーブル

実用的なユーザーデータテーブルの例です。

名前メールアドレス権限
山田太郎yamada@example.com管理者
佐藤花子sato@example.com編集者
鈴木一郎suzuki@example.com閲覧者
export function UserTableExample() {
  return (
    <Table data={userData} columns={userColumns} aria-label="ユーザー一覧" />
  );
}

空の状態

データがない場合の表示例です。

名前種類更新日サイズ
export function EmptyStateExample() {
  return <Table data={[]} columns={columns} aria-label="空のテーブル" />;
}