Excel のようなテーブルを Astro サイトに追加する方法 (簡単な方法)

Astro の哲学は、パフォーマンス、柔軟性、カスタマイズの 1 つです。最初にサーバー上でできる限りレンダリングすることに誇りを持っている Web フレームワーク。コンテンツの保存場所を選択でき、好みに合わせてカスタマイズするためにできるだけ多くのハンドルを提供します。使用するデータグリッド ライブラリは同じである必要があります。

初期セットアップ - Astro のインストール

まず最初に、基本的なアプリをセットアップする必要があります。これは、次のコマンドのプロンプトに従って行います

npm create astro@latest

初期セットアップ - ZingGrid ライブラリを含む

ライブラリ自体は、いくつかの理由から、フロントエンドにスクリプトとして含める必要があります (defer を使用して延期することが望ましい)。

• 一度だけ含める必要があります
• ライブラリ自体は、パックされている機能のシート量 (~259kb 圧縮) に比べて小さいですが、HTML にインライン化して RAIL を維持するには大きすぎます。
  • 簡単な補足: Astro の is:inline ディレクティブは実際には、スクリプトをバンドルや処理から除外することを意味しており、スクリプトが実際にビルド プロセス中にフェッチされて所定の位置に交換されるということではありません
• ZingGrid はすでに Astro と同様の哲学を念頭に置いて構築されているため、直接統合する必要はありません

src/layouts/Layout.astro

<!-- ... --->



  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <meta name="generator" content="{Astro.generator}">
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>

アクティビティトラッカーグリッドの作成

作成できる最も単純なグリッドから始めて、そこから構築していきます。まず最初に、src/components ディレクトリに ActivityGrid.astro コンポーネントを作成し、次のコードを追加します。

このコンポーネントにデータを渡すので、そのための prop を作成し、それを に渡します。 data 属性を使用します。

src/components/ActivityGrid.astro

---
const { data } = Astro.props;
---

<zing-grid data="{data}"></zing-grid>

src/pages のindex.astro ページで、ページにグリッドを追加する必要があります。これを行うには、まずフロントマター (--- で囲まれた) にコンポーネントをインポートし、サンプル JSON も取り込む必要があります。ここで、注意しなければならない唯一のことは、JSON が に渡されるときに文字列化することです。属性として。

src/pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';

import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---

<layout title="ZingGrid + Astro">
  <header> <!-- ... --> </header>
  <main>
    <activitygrid data="{activityDataStr}"></activitygrid>
  </main>
</layout>

ページをロードすると、次のようなグリッドが表示されます。まだ特別なことは何もありませんが、驚くほど簡単に何かを始めることができます。

ユーザーコントロールとキャプションの追加

グリッドを強化するには、要素を構成することから始めます。 100 個の属性から選択できる要素には大量の設定が用意されていますが、ここでは役立つと思われるいくつかを取り上げます:

• レイアウト : グリッドを行モードまたはカード モードで表示するかどうかを決定します
• layout-controls : ユーザーによるレイアウト モードの変更を許可または禁止します
• sort : 各列を並べ替えるコントロールを追加します
• pager : グリッドを 1 つの長いリストとして残すのではなく、ページ分割します
• page-sizer : 各ページの行数

も追加します。私たちのの内側それでグリッドにタイトルを付けることができます

<!-- ... --->



  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <meta name="generator" content="{Astro.generator}">
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>

列の書式設定

距離列に単位がないと、少し読みにくくなります。幸いなことに、ZingGrid を使用すると、列のテンプレートを作成できます。 [[二重括弧]] 表記内のインデックス オブジェクトを使用して、行エントリの値にアクセスできます。以下は参考用のデータの例です。「距離」キーは、テンプレートに [[index. distance]] を記述するときに取り込むものです。

src/data/activities.json

---
const { data } = Astro.props;
---

<zing-grid data="{data}"></zing-grid>

src/data/ActivityGrid.astro

---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';

import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---

<layout title="ZingGrid + Astro">
  <header> <!-- ... --> </header>
  <main>
    <activitygrid data="{activityDataStr}"></activitygrid>
  </main>
</layout>

その結果、テンプレートと同様に mi 単位が各距離値に追加されます

CSS Var と Open Props を使用してグリッドをスタイル設定する

ZingGrid は、パフォーマンスと復元力を高めるために最新のネイティブ Web コンポーネントを使用して構築されていますが、その副作用として、多くのコンポーネントが Shadow DOM 内に存在します。ユーザーが望むあらゆる部分をスタイルできるようにしたいと考え、これらの影を貫通するために何百もの CSS 変数が作成されました。以下では、柔軟性を高めるために Open Props と組み合わせて使用​​する方法を示します。

---
const { data } = Astro.props;
---

<zing-grid data="{data}" layout="row" layout-controls="disabled" sort pager page-size="6">
  <zg-caption>?? Activity Tracker</zg-caption>
</zing-grid>

カスタムセルレンダリング関数

グリッドに活気を加えるために、各アクティビティの前に絵文字を動的に追加できると便利です。これを行うには、ウィンドウ オブジェクトに activityRender という関数を作成し (ZingGrid からアクセスできるようにします)、関数名を指定する関数名を のレンダラー属性に追加します。それを適用したいと思います。この関数内では、レコード テキストが渡され、セルに挿入される前に変更できます。

[
  {
    "activityType": "Outdoor Bike",
    "city": "Tempe",
    "date": "10/17/24",
    "distance": "48.27",
    "elapsedTime": "03:26:35",
    "movingTime": "01:53:15",
    "state": "Arizona"
  },
  /* ... */
]

行へのクラスの動的追加

最後に、アクティビティ タイプに基づいて各行に色を付けるには、row-class 属性を使用して、各行にクラスを動的に追加する関数を渡します。

<!-- ... --->



  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <meta name="generator" content="{Astro.generator}">
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>

グローバル CSS スタイル ブロックでこれらのクラスを作成する必要があります。 はフロントエンドで動的に作成されるため、通常のタグ付けされません。 Astro がビルド時に追加するスタイル スコープ属性。

---
const { data } = Astro.props;
---

<zing-grid data="{data}"></zing-grid>

さあ、出来上がり！ ? Astro

内には動的にスタイル設定され、フォーマットされた ZingGrid があります。

最終的な考え

ほんの少しの設定とほんの少しのコードで、Astro サイトに適合する堅牢で動的なデータグリッドを構築することができました。この記事では、ZingGrid でできることのほんの表面をなぞっただけなので、このライブラリで実際に何ができるのかを示すパート 2 が後ほどありますので、ご興味があればここをご覧ください。

以上がExcel のようなテーブルを Astro サイトに追加する方法 (簡単な方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。