基本的な使い方

シンプルな例で、Extableの使い方とパフォーマンス指向の構成を確認します。

インタラクティブデモ

この埋め込みデモは10,000行を読み込み、基本レンダリング性能を示します。

Demo UI Note

このデモにはテーブル上部にUndo/Redoボタンがあります。実運用ではショートカット（Undo: Ctrl/Cmd+Z、Redo: Ctrl/Cmd+Shift+Z）を使うケースが一般的です。ここではキーボード操作なしでも試せるようボタンを用意しています。

ここで確認できること

デモで触れる機能

✅ 仮想スクロールと性能 - 表示セルのみを描画
✅ 型安全 - enum/tags/date/numberのフォーマット
✅ キーボード操作 - 矢印キー、Tab、Enter
✅ インライン編集 - ダブルクリックまたは入力開始で編集
✅ 選択 - クリックで選択、Shift+クリックで範囲
✅ コピー/ペースト - Ctrl/Cmd+C/V対応
✅ ソート&フィルター - 列単位の絞り込みと並び替え

使い方

Installation

npm install @extable/core

Schema

このサンプルのスキーマは次の通りです。

import type { Schema } from "@extable/core";

const schema = {
  columns: [
    { key: "id", header: "ID", type: "string", readonly: true, width: 80 },
    { key: "name", header: "Name", type: "string", width: 150 },
    { key: "active", header: "Active", type: "boolean", format: "checkbox", width: 100 },
    {
      key: "score",
      header: "Score",
      type: "number",
      format: { precision: 6, scale: 2 },
      style: { align: "right" },
      width: 120,
    },
    {
      key: "role",
      header: "Role",
      type: "enum",
      enum: { options: ["viewer", "editor", "owner"] },
      width: 130,
    },
    {
      key: "tags",
      header: "Tags",
      type: "tags",
      tags: { options: ["alpha", "beta", "priority"] },
      width: 140,
    },
    {
      key: "notes",
      header: "Notes",
      type: "string",
      wrapText: true,
      width: 260,
    },
  ],
} satisfies Schema;

Integration

import { ExtableCore } from "@extable/core";

const data = [
  {
    id: "row-1",
    name: "User 1",
    active: false,
    score: 51,
    role: "editor",
    tags: ["beta"]
    notes: "beta	Longer text can describe context, data source, and formatting guidance for analysts.",
  },
  {
    id: "row-2",
    name: "User 2",
    active: true,
    score: 52,
    role: "viewer",
    tags: ["beta"]
    notes: "WrapText mode ensures the UI accommodates verbose annotations (manual entry encouraged).",
  },
];

const table = new ExtableCore<Row>({
  root: document.getElementById("table-root"),
  schema,
  defaultData
});

次のステップ

• データフォーマットガイド - 列型と制約を理解
• 編集モードガイド - direct/commitの違い
• 数式ガイド - 計算列と検証
• 条件付きスタイル - パターンの可視化