Excel のようなテーブルを Astro サイトに追加する方法 (簡単な方法)-jsチュートリアル-php.cn

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

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

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

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

npm create astro@latest

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

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

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

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

src/layouts/Layout.astro

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <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>
</head>
<body></body>
</html>

ログイン後にコピー

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

作成できる最も単純なグリッドから始めて、そこから構築していきます。まず最初に、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} />
  </main>
</Layout>

ログイン後にコピー

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

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

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

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

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

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

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <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>
</head>
<body></body>
</html>

ログイン後にコピー

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

列の書式設定

距離列に単位がないと、少し読みにくくなります。幸いなことに、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} />
  </main>
</Layout>

ログイン後にコピー

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

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

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"
  },
  /* ... */
]

ログイン後にコピー

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

行へのクラスの動的追加

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

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <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>
</head>
<body></body>
</html>

ログイン後にコピー

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

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

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

ログイン後にコピー

さあ、出来上がり！ ? Astro

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

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

最終的な考え

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

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