この記事では、軽量の JavaScript フレームワークである Alpine JS を使用した動的テーブルの作成について説明します。プロセスをヘッダー、本文、フッターの 3 つのセクションに分けて、基本的なシナリオと複雑なシナリオの両方に焦点を当てます。

セットアップ:

1. HTML 構造: x-data ディレクティブが付加された基本的な HTML 要素 () から始めます。このディレクティブは、リアクティブ データを要素にバインドします。
2. JavaScript データ: テーブル データを保持するために、HTML の外側に空の JavaScript オブジェクト (データ) を定義します。

初期コードは以下のとおりです:


ヘッダ

• ヘッダーには thead 要素を使用します。
• x-for ディレクティブは table.customHeader データを反復処理し、行と列を動的に作成します。
• 複雑なヘッダーでは、colspan 属性と rowspan 属性 (col.attr で定義) を利用してセルを結合できます。
• 各セル内のコンテンツは、x-html を使用して表示され、col.title プロパティにバインドされます。

let data = {
  table: {
      customHeader: [
          [
              { title: 'City', attr: { rowspan: 2 }, class: 'border-r border-t' },
              { title: 'Clothes', attr: { colspan: 3 }, class: 'border-r border-t' },
              { title: 'Accessories', attr: { colspan: 2 }, class: 'border-t' }
          ],
          [
              { title: 'Trousers', class: 'border-r' },
              { title: 'Skirts', class: 'border-r' },
              { title: 'Dresses', class: 'border-r' },
              { title: 'Bracelets', class: 'border-r' },
              { title: 'Rings' },
          ]
      ],
  }
}

体

• tbody 要素はテーブルのデータ行を保持します。
• x-for.
を使用して table.data を反復処理します。
• 各行には、x-text を使用して対応するオブジェクト プロパティからのデータが入力されたセル () が格納されます。

  これが表示したいデータです:
  

  data: [
      { "city": "Mandalay", "trousers": 79, "skirts": 16, "dresses": 14, "bracelets": 69, "rings": 99 },
      { "city": "George Town", "trousers": 68, "skirts": 24, "dresses": 90, "bracelets": 96, "rings": 48 },
      { "city": "Gent", "trousers": 26, "skirts": 60, "dresses": 67, "bracelets": 5, "rings": 43 },
      { "city": "Mombasa", "trousers": 34, "skirts": 62, "dresses": 18, "bracelets": 75, "rings": 78 },
      { "city": "Lyon", "trousers": 13, "skirts": 33, "dresses": 12, "bracelets": 0, "rings": 17 },
      { "city": "Vancouver", "trousers": 82, "skirts": 91, "dresses": 18, "bracelets": 96, "rings": 72 },
      { "city": "Cairn", "trousers": 64, "skirts": 43, "dresses": 14, "bracelets": 95, "rings": 55 },
  ]
  

  フッター

  • tfoot 要素はフッターを定義します。
  • ヘッダーと同様に、x-for を使用して table.customFooter データを反復処理します。
  • ただし、x-html を使用して table.footerData 内のプロパティを参照することで、フッターに動的な値を表示できます。

  customFooter: [
      [
          { value: 'Total', class: 'font-bold border-r text-center', attr: { rowspan: 2 } },
          { name: 'total-trousers', class: 'text-right border-r' },
          { name: 'total-skirts', class: 'text-right border-r', },
          { name: 'total-dresses', class: 'text-right border-r' },
          { name: 'total-bracelets', class: 'text-right border-r' },
          { name: 'total-rings', class: 'text-right' },
      ],
      [
          { name: 'total-clothes', class: 'text-center border-r', attr: { colspan: 3 } },
          { name: 'total-accessories', class: 'text-center', attr: { colspan: 2 } },
      ],
  ],
  

  データ例:

  都市名とさまざまな衣料品を含むサンプル データを使用して、テーブルの機能を示します。

  その他の注意事項：

  • スタイル設定は、col.class プロパティと data.class プロパティ内で定義された CSS クラスを使用して実現されます。
  • 提供されたリンクでは、さらに詳しく調べるための完全な動作デモが提供されています。

  外部リンク

  1. デモ: https://framework.fuwafuwa.web.id/examples/simple-table
  2. 説明: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  結論：

  この内訳は、Alpine JS によって柔軟なヘッダー、ボディ、フッターを備えた動的なテーブルを作成できるようにする方法を示しています。このアプローチにより、特にデータが頻繁に変更されるシナリオの場合、テーブルの作成と管理が簡素化されます。