recherche

Maison >interface Web >js tutoriel >Comment ajouter un tableau de type Excel à votre site Astro (en toute simplicité)

Comment ajouter un tableau de type Excel à votre site Astro (en toute simplicité)

Patricia Arquette
Patricia Arquetteoriginal
2024-10-23 08:26:02953parcourir

La philosophie d'Astro est basée sur la performance, la flexibilité et la personnalisation. Un framework Web qui se targue de restituer autant que possible sur le serveur en premier, vous permettant de choisir où se trouve votre contenu et vous donnant autant de poignées que possible pour le personnaliser comme vous le souhaitez. La bibliothèque de grilles de données que vous utilisez devrait être la même.

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

Configuration initiale - Installation d'Astro

Tout d'abord, nous devons configurer une application de base. Nous le ferons en suivant les invites de la commande suivante

npm créer astro@latest

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

Configuration initiale - Y compris la bibliothèque ZingGrid

La bibliothèque elle-même doit être incluse en tant que script dans le front-end (de préférence différée à l'aide de defer) pour plusieurs raisons :

  • Il doit être inclus exactement une fois
  • Bien que la bibliothèque elle-même soit petite pour le volume de fonctionnalités qu'elle contient (~259 Ko compressé), elle est trop volumineuse pour être intégrée dans le HTML et maintenir RAIL.
    • Remarque rapide : la directive is:inline dans Astro signifie en réalité de retirer le script de tout regroupement et traitement, non pas que le script sera réellement récupéré et échangé pendant le processus de construction
  • Une intégration directe n'est pas nécessaire car ZingGrid a déjà été construit avec une philosophie similaire à 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>

Création de la grille de suivi d'activité

Nous commencerons par la grille la plus simple que nous puissions créer et construire à partir de là. Tout d’abord, nous créons un composant ActivityGrid.astro dans notre répertoire src/components et ajoutons le code suivant.

Nous allons transmettre nos données à ce composant, nous créons donc un accessoire pour cela, et nous le transmettons à en utilisant l'attribut data.

src/components/ActivityGrid.astro 

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

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

Dans notre page index.astro dans src/pages, nous devons ajouter notre grille à la page. Pour ce faire, nous devrons d'abord importer le composant dans notre frontmatter (clôturé par ---), et nous devrons également extraire notre exemple JSON. Maintenant, la seule chose à laquelle nous devons faire attention est de chaîner le JSON tel qu'il sera transmis dans comme attribut.

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>

Lorsque nous chargerons la page, nous verrons une grille qui ressemble à ceci. Rien d'extraordinaire pour l'instant, mais étonnamment facile de faire avancer quelque chose.

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

Ajout de contrôles utilisateur et d'une légende

Pour améliorer notre grille, nous allons commencer par configurer notre élément. Avec 100 attributs parmi lesquels choisir, l'élément dispose d'une tonne de configurations, mais j'en choisirai quelques-uns qui, je pense, nous seront utiles ici :

  • layout : Détermine si la grille est affichée ou non en mode ligne ou carte
  • layout-controls : Autoriser/empêcher les utilisateurs de modifier le mode de mise en page
  • sort : Ajouter des contrôles pour trier chaque colonne
  • pager : Pagine la grille au lieu de la laisser comme une longue liste
  • page-sizer : Le nombre de lignes pour chaque page

Nous ajouterons également un à l'intérieur de notre pour qu'on puisse donner un titre à notre grille

<!-- ... --->
<!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)

Formatage des colonnes

Avoir une colonne Distance sans aucune unité la rend un peu difficile à lire. Heureusement, ZingGrid nous permet de créer des modèles pour nos colonnes. Nous pouvons accéder aux valeurs de notre entrée de ligne en utilisant l'objet index à l'intérieur de la notation [[double crochet]]. Vous trouverez ci-dessous un exemple de ce à quoi ressemblent nos données à titre de référence, la clé "distance" est ce que nous récupérons lorsque nous écrivons [[index.distance]] dans le modèle.

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>

Et le résultat est que l'unité mi est ajoutée à chaque valeur de distance comme dans notre modèle

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

Styliser la grille avec des variables CSS et des accessoires ouverts

ZingGrid est construit avec des composants Web natifs modernes pour plus de performances et de résilience, mais comme effet secondaire, de nombreux composants existent dans les Shadow DOM. Voulant toujours permettre aux utilisateurs de styliser n'importe quelle partie de leur choix, des centaines de variables CSS ont été créées pour percer ces ombres. Ci-dessous, nous montrons comment ils peuvent être utilisés conjointement avec Open Props pour plus de flexibilité.

---
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>

Fonctions de rendu de cellule personnalisé

Pour ajouter un peu de vie supplémentaire à notre grille, ce serait bien de pouvoir ajouter dynamiquement un emoji devant chaque activité. Pour ce faire, nous allons créer une fonction appelée ActivityRender sur l'objet window (pour qu'il soit accessible à ZingGrid) et ajouter le nom de la fonction à l'attribut de rendu pour l'attribut nous voulons l'appliquer. Dans cette fonction, le texte de l'enregistrement nous sera transmis que nous pourrons ensuite modifier avant qu'il ne soit inséré dans la cellule.

[
  {
    "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)

Ajout dynamique de classes aux lignes

Et puis enfin, pour colorer chaque ligne en fonction du type d'activité, nous pouvons utiliser l'attribut row-class pour passer une fonction qui ajoutera dynamiquement une classe à chaque ligne.

<!-- ... --->
<!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>

Nous devrons ensuite créer ces classes dans un bloc de style CSS global car les s sont créés dynamiquement sur le front-end et ne sont donc pas étiquetés avec l'habituel Attributs de portée de style qu'Astro ajoute au moment de la construction.

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

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

Et voilà ! ? Nous avons un ZingGrid stylisé et formaté de manière dynamique à l'intérieur d'Astro

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

Pensées finales

Avec juste un peu de configuration et très peu de code, nous avons pu construire une grille de données robuste et dynamique adaptée à notre site Astro. Nous n'avons fait qu'effleurer la surface de ce que ZingGrid peut faire dans cet article, il y aura donc une partie 2 plus tard pour montrer ce que la bibliothèque peut vraiment faire, alors faites attention à cela ici si vous êtes intéressé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

json css html npm Object if sort for while Directory double using class finally Attribute number function this column table Access excel
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Principes fondamentaux de l'opérateurArticle suivant：Principes fondamentaux de l'opérateur

Articles Liés

Voir plus