csv2table ~ saisie rapide de tableaux

Un moyen rapide de saisir des données tabulaires,
mais aussi de mettre en forme des fichiers ou le résultat d'autres actions UP.'

Un simple exemple

Ayant besoin d'un moyen rapide et lisible de saisir des tableaux en HTML, j'ai créé cette action.

{up csv2table | model=green | header=1 | footer=1 | col=G10-90-D}
  Réf; Description;            Prix
  123; un [b]super[/b] produit;       25.30€
  456; "un autre; aussi bien"; 18.00€
  [2]TOTAL;                    43.30€
{/up csv2table}	

Le tableau est généré à partir de ce shortcode. Vous remarquerez que les données du tableau sont présentées de manière à faciliter la relecture et les corrections. Chaque ligne du tableau doit être sur une seule ligne avec des points virgules pour séparer les colonnes. Si le texte d'une colonne contient le séparateur, il suffit de le mettre comme entre guillemets comme il est d'usage pour le format CSV. Il est possible de fusionner plusieurs cellules de la même ligne (colspan), mais pas de la même colonne (rowspan)

Le shortcode qui encadre les données contient ces paramètres :

• model green est une classe définie dans le fichier CSS de l'action
• header et footer indique que la première et dernière ligne sont utilisées comme titre et pied de tableau
• col permet d'indiquer rapidement les largeurs et justifications des colonnes. G10-90-D indique que la première colonne est justifiée à gauche avec une largeur de 10%, la deuxième à 90% et la dernière est alignée à droite

Version 1.8  Les données peuvent être saisies en utilisant le nouveau format 🆙 BB-Code by UP

Version 2.8 

• Ajout d'une option col-list qui permet de sélectionner les colonnes à afficher. Il suffit d'indiquer le numéro d'ordre des colonnes (de 1 à n) séparé par des virgules
• noborder: nouvelle classe pour l'option model pour un tableau sans aucune bordure. Utile pour partir de zéro pour créer son style.

Tous les paramètres

Pour montrer toutes les possibilités, je vais présenter les paramètres des 3 actions csv2table, csv2list et csv2def dans un unique tableau.

Rendez-vous à la fin du tableau pour le shortcode et les explications.

Le shortcode

Le code, avec seulement les premières lignes de données

{up table-par-lignes}
{up csv2table | model= blue
| header=Paramètre;Tbl;List;Def;[t-jaune tl]Commentaires 
| col=d-c-c-c-100
| col-style-1=font-weight:bold;white-space:nowrap
| css-head=#id.restables-clone tr td:nth-child(2)[text-align:left]td.st[background:yellowGreen;text-align:left !important]}
nom_action;     fic;  fic;  fic;   <strong>URL ou chemin et nom d'un fichier local</strong>
id;             [oui];[oui];[oui]; ID qui sera attribuée à la balise principale de l'action
[5st]gestion des données
separator;      "[b];";"[b];";"[b];"; séparateur des colonnes. Chaque action a ses spécificités. <mark>Voir sa documentation</mark>.
...

Les explications

en utilisant bien sûr l'action csv2table avec le "model=line"

Origine et mise en forme des données

Fichier externe

Pour les exemples précédents, nous avons saisi le contenu entre les shortcodes.
Il est possible d'indiquer le chemin et le nom d'un fichier comme argument de l'action

{up csv2table=https://lomart.fr/images/doc/android-version.csv 
| model=green | style=width:auto 
| header= version Android; nom de code }

2.3.3 – 2.3.7; Gingerbread
4.0.3 – 4.0.4; Ice Cream Sandwich 
4.1.x, 4.2.x et 4.3;Jelly Bean
4.4;KitKat
5.0 et 5.1;Lollipop
6.0;Marshmallow
7.0 et 7.1;Nougat
8.0 et 8.1;Oreo
9;Pie

Dans le cas d'un fichier contenant du code HTML, il est possible de le nettoyer avec l'option HTML

• html=0 : le code HTML est affiché. Les balises sont visibles.
• html=1 : aucun traitement, le code est exécuté
• html=liste balise : toutes les balises seront supprimées à l'exclusion de celles passées en paramètres sous la forme a,img,...

Pour les utilisateurs de Mac avec Excel, il faut utiliser l'enregistrement sous CSV UTF8 et même s'il indique que le séparateur sera une virgule, dans le paramètre de csv2list utiliser "separator=;"

Action UP

Les actions jcontent_... peuvent produire du contenu formaté qui peut être repris par csv2table

La liste des 4 dernières action de UP est obtenu par les shortcodes ci-dessous que je vous laisse analyser.
L'important étant le point-virgule entre les mots-clés pour définir le contenu renvoyé.

{up csv2table | model= blue | col=g-c | header=action;date création}
   {up jnews=8 | maxi=4 | main-tag=0 | item-tag=0}
      {title};{date-crea}
   {/up jnews=8}
{/up csv2table}

Code style dans contenu

Il est possible de styler classiquement le contenu à l'aide de balise HTML : mon texte en <strong>gras</strong>

Pour agir globalement sur la cellule, vous pouvez indiquer la ou les classes à appliquer sous la forme : [nom_classe(s)]contenu au tout début du texte. Vous pouvez utiliser toutes les classes disponibles : celles de UP, celles de votre template et celles de l'action. A l'heure où j'écris cette démo, l'action csv2table propose ces classes :

Vous pouvez très facilement ajouter les vôtres dans la feuille de style ou dans le paramètre css-head.

Mise en forme de la table

L'aspect général est donné par le paramètre model.
Ci-dessous les modèles (classes) fournis dans le fichier csv2table.css.

model non spécifié

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

model=blue

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

model=green

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

model=line

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

model=noborder v2.8

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

model=primary v2.9

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

model=secondary v2.9

title-1	title-2	title-3
Line-1-Col-1	Line-1-Col-2	Line-1-Col-3
Line-2-Col-1	Line-2-Col-2	Line-2-Col-3
Line-3-Col-1	Line-3-Col-2
Footer-1	Footer-2	Footer-3

Options webmaster