🚀 ExceLikeTable - 使いやすい使用例

1. 最もシンプルな例（プリセット使用）

プリセットを使用することで、最小限のコードでテーブルを作成できます。

// データの準備
const data = [
  { id: 1, name: '田中太郎', age: 30, city: '東京' },
  { id: 2, name: '山田花子', age: 25, city: '大阪' },
  { id: 3, name: '佐藤次郎', age: 35, city: '名古屋' }
];

// 列定義（ColumnHelpersを使用）
const columns = [
  ColumnHelpers.text('name', '名前'),
  ColumnHelpers.number('age', '年齢'),
  ColumnHelpers.text('city', '都市')
];

// テーブル作成（standardプリセット使用）
const table = new ExceLikeTable('#table1', {
  preset: 'standard',  // ソート、フィルタ、ページネーション有効
  data: data,
  columns: columns
});
      

2. 機能を選択する例

必要な機能だけを選択してテーブルを作成できます。

// ソートのみの軽量テーブル
const table = new ExceLikeTable('#table2', {
  features: ['sorting'],  // ソート機能のみ有効
  data: data,
  columns: columns,
  pagination: false  // ページネーション無効
});
      

3. 高度な例（カスタマイズされた列）

ColumnHelpersを使用して、より高度な列定義を簡単に作成できます。

const advancedColumns = [
  ColumnHelpers.text('name', '名前', { width: 150 }),
  ColumnHelpers.number('salary', '給与', { currency: '¥', width: 120 }),
  ColumnHelpers.date('joinDate', '入社日', { width: 130 }),
  ColumnHelpers.status('status', 'ステータス', {
    'Active': '#52c41a',
    'Inactive': '#d9d9d9',
    'Pending': '#faad14'
  }),
  ColumnHelpers.actions('操作', [
    { key: 'edit', label: '編集' },
    { key: 'delete', label: '削除' }
  ])
];

const table = new ExceLikeTable('#table3', {
  preset: 'excel',  // 全機能有効
  data: advancedData,
  columns: advancedColumns,
  tableId: 'advanced-table',  // 設定永続化用ID
  persistSettings: true
});
      