Il s'agit d'un moyen d'afficher et d'interagir avec les fichiers .grist
(feuilles de calcul Grist) sur des sites Web classiques, sans nécessiter de support back-end spécial. L'idée ici est que ce serait formidable pour créer des rapports si nous pouvions mettre des feuilles de calcul sur un site Web comme nous le faisons pour les PDF, avec de belles options de formatage et de navigation et sans trop de complications.
Si vous pouvez exécuter un back-end spécial, Grist-Core est le moyen le plus éprouvé d'héberger des feuilles de calcul Grist. Et à de nombreuses fins, l'intégration de Grist peut être adéquate, lorsque vous intégrez une feuille de calcul Grist à partir d'une installation Grist externe (telle que le service hébergé proposé par Grist Labs). Mais si vous ne pouvez pas héberger vos données en externe et que vous ne voulez pas avoir à supporter la charge opérationnelle liée à la mise en place de votre propre installation Grist, grist-static
vous permet de restituer facilement des feuilles de calcul Grist sur des sites Web classiques. Comme pour un PDF, les utilisateurs pourront visualiser la feuille de calcul, y naviguer et y effectuer des recherches. Mieux qu'un PDF, ils pourront modifier les sélections et expérimenter la modification des nombres pour voir ce qui se passe. Chaque spectateur possède sa propre copie et ses modifications ne seront pas vues par les autres ni stockées. Ce serait également un moyen évolutif de montrer un document Grist à des millions d'utilisateurs simultanés.
https://gristlabs.github.io/grist-static présente quelques exemples de documents Grist hébergés sur les pages GitHub :
De nos jours, les fichiers PDF peuvent être placés sur un site Web et vous pouvez créer un lien vers eux en espérant que les navigateurs les afficheront correctement. Les navigateurs n'ont pas de support natif pour Grist [encore :-)] mais vous pouvez créer une petite page wrapper comme celle-ci :
<!doctype html >
< html >
< head >
< meta charset =" utf8 " >
< script src =" https://grist-static.com/latest.js " > </ script >
</ head >
< body >
< script >
bootstrapGrist ( {
initialFile : 'investment-research.grist' ,
name : 'Investment Research' ,
} ) ;
</ script >
</ body >
</ html >
.grist
sur votre serveur à côté de ce fichier .html
et de renseigner les options de bootstrapGrist
.initialData: 'path/to/data.csv'
pour importer un fichier CSV dans une nouvelle table. Dans ce cas, initialFile
est facultatif.initialContent
. Vous pouvez l'utiliser pour transmettre le contenu d'un fichier CSV.elementId: 'element-id
pour ouvrir Grist dans un élément de votre page.singlePage: true
pour une mise en page unique et moins chargée. Grist peut gérer des données dans plusieurs formats, y compris CSV. Étant donné que le CSV est un format très courant et qu'interagir avec lui en ligne reste une corvée, nous avons intégré grist-static
dans un utilitaire csv-viewer.js
rationalisé spécifiquement pour visualiser, trier, filtrer, tout copier/coller à partir de CSV, directement dans une page Web.
Ajoutez simplement le visualiseur dans la zone head
d’une page Web :
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >
Ensuite, vous pouvez créer un bouton pour ouvrir le CSV à partir d'une URL :
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >
Le CSV peut être un fichier ou une URL de données CSV que votre site génère dynamiquement pour un utilisateur.
Si vous travaillez avec des liens plutôt qu'avec des boutons, la même approche fonctionne :
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >
Vous pouvez bien sûr styliser les boutons et les liens comme vous le souhaitez.
Le CSV Viewer peut également être utilisé comme composant Web appelé csv-viewer
:
< html >
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >
< body >
< csv-viewer initial-data =" path/to/data.csv " style =" height: 500px; border: 1px solid green " >
</ csv-viewer >
</ body >
</ html >
Le composant accepte en fait le même ensemble d'options que la fonction bootstrapGrist
, vous pouvez donc le configurer pour afficher soit un fichier CSV, soit (malgré son nom) un document Grist de votre choix. Liste complète des options disponibles :
initial-file
: Le document Grist initial à charger.initial-data
: Un fichier CSV à importer.initial-content
: Un contenu d'un fichier CSV à importer.name
: Le nom du document Grist à utiliser.single-page
: Un attribut booléen qui, lorsqu'il est présent, affiche le document dans une mise en page unique et moins chargée.loader
: Un attribut booléen qui, lorsqu'il est présent, affiche une icône de chargement pendant le chargement du document. Nous avons vu qu'avec csv-viewer.js
, n'importe quel élément peut être converti en un lien qui ouvre une popup avec un fichier CSV. Tout ce que vous avez à faire est d’y ajouter l’attribut data-grist-csv-open
.
Il existe d'autres options disponibles.
data-grist-doc-open
permet d'ouvrir un document Grist plutôt qu'un CSV (malgré le nom de l'utilitaire).data-single-page
sur true
pour une mise en page unique ou false
pour une mise en page multipage.data-name
pour remplacer le nom du document par défaut affiché dans la mise en page multipage.data-loader
pour afficher une icône de chargement pendant le chargement du document. Ceci est activé par défaut, passez data-loader="false"
pour le désactiver. Il existe également des classes de boutons prédéfinies, en particulier grist
et grist-large
, qui offrent le style par défaut de Grist.
Pour un contrôle plus fin, il existe une fonction globale previewInGrist
avec la même API que bootstrapGrist
, mais au lieu d'un rendu en ligne, elle ouvre un aperçu dans une fenêtre contextuelle. Cela peut être utile pour tout contenu ou fichier créé dynamiquement qui n'est pas disponible au moment du chargement de la page.
Les feuilles de calcul Grist stockent par défaut une grande partie de l'historique dans le fichier .grist
. Vous pouvez élaguer cet historique en construisant grist-core
puis, dans le répertoire grist-core
, en faisant :
yarn run cli history prune PATH/TO/YOUR/doc.grist
Désolé, c'est gênant.
git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/
La séquence ci-dessus place de nombreux liens dans le répertoire page
, pour plus de commodité lors du développement. Pour collecter des fichiers à télécharger, utilisez plutôt :
make package
# everything you need is in dist/
Jusqu'à présent, tous les exemples HTML ont utilisé https://grist-static.com/
, un domaine exploité par Grist Labs qui ne sert que des fichiers statiques. Ce domaine enregistre le trafic pour mesurer l'utilisation, mais ne définit ni ne suit les cookies. Vous pouvez copier tous les fichiers nécessaires sur votre propre site Web ou CDN pour garder votre trafic totalement privé.
Vous pouvez obtenir les fichiers nécessaires par :
npm pack grist-static
pour récupérer la dernière archive tar du registre NPM. Les tarballs (fichiers .tgz
) sont un format d'archive courant, avec de nombreux outils gratuits disponibles pour les décompresser. Quelle que soit la manière dont vous y parvenez, vous aurez à la fin un répertoire dist/
contenant csv-viewer.js
, latest.js
et de nombreux autres fichiers qui composent Grist. Placez ce matériel là où vous le souhaitez et mettez à jour vos URL en conséquence.
Le CDN jsdelivr
reflète automatiquement les packages placés sur NPM, utilisons-le donc comme exemple. On pourrait remplacer :
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
avec:
< script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script >
Bien sûr, ce changement particulier déplacerait simplement les informations d'utilisation vers jsdelivr.net
plutôt que grist-static.com
, mais vous voyez l'idée. Utilisez simplement le même modèle partout où vous choisissez de placer les fichiers.
Il pourrait être intéressant de faire en sorte que les modifications des utilisateurs soient conservées dans leur navigateur - OPFS peut être une bonne option pour cela, une fois qu'il dispose d'une large prise en charge du navigateur. Autres étapes :
grist-core
.