Documentation Droptables

 

introduction

Droptables est une extension Joomla utilisée pour gérer les tables HTML dans Joomla avec une interface de type feuille de calcul.

Droptables-table-extension

Caractéristiques principales:

  • Gérer les tableaux comme dans un tableur
  • 6 thèmes inclus
  • Entièrement géré par n'importe quel éditeur
  • Synchronisation Excel et Google Sheets
  • AJAX sauvegarde automatique
  • Données triables sur le frontend
  • Editeur de style de cellule, ligne, colonne
  • Copier une cellule avec drag'n drop
  • Copiez le tableau complet en un clic
  • Format des cellules HTML
  • Editeur de code CSS avancé

 

I. INSTALLATION DE DROPTABLES

1.1 Installer

Notre composant est compatible avec Joomla 3.x. Toutes les fonctionnalités et les intégrations tierces sont incluses dans toutes les adhésions.
Pour installer notre composant, vous devez télécharger le fichier d'extension .zip et utiliser le programme d'installation Joomla standard.

joomla-install

 

Cliquez ensuite sur Parcourir> Bouton Télécharger et Installer, le composant, les modules et les plugins seront installés, activés par défaut.

 

1.2 Mise à jour et mise à jour automatique

Pour mettre à jour l’extension, vous pouvez installer une nouvelle version sur l’ancienne en téléchargeant le fichier ZIP de JoomUnited ou utiliser le programme de mise à jour automatique (conseillé).

Droptable-update

Le programme de mise à jour automatique, qui envoie la notification de mise à jour, est intégré à l'extension Joomla que vous avez installée. Vous serez donc averti comme n'importe quelle autre extension du tableau de bord ou en utilisant le menu: Extension> Gérer> Menu de mise à jour.

Connectez-vous à votre compte pour mettre à jour

Vous devez vous connecter à votre compte JoomUnited pour mettre à jour toutes vos extensions JoomUnited Joomla. Pour vous connecter, accédez à la configuration principale du composant, puis cliquez sur le bouton Onglet mise à jour en direct. En bas, vous trouverez un bouton de connexion.

mise à jour en direct

 

Entrez vos identifiants JoomUnited, les mêmes que ceux que vous utilisez pour vous connecter ici @ www.joomunited.com

login-joomunited

 

Le bouton deviendra orange, félicitations! vous pouvez maintenant mettre à jour toutes les extensions JoomUnited sur ce site! Si votre adhésion est expirée, vous obtiendrez un lien de renouvellement et un texte expliquant cela.

lié au compte

Remarque: un seul identifiant vous permettra de mettre à jour toutes les extensions JoomUnited (en ce qui concerne votre adhésion). La connexion n'expire que si vous la déconnectez.

II. GÉRER LES TABLES

2.1 Gérer les tables à partir d'un article ou d'un composant

Lorsque Droptables est installé, vous avez une entrée de composant, menu Composants> Droptables et un bouton d'éditeur qui est affiché ci-dessous votre éditeur. Cliquez dessus pour ouvrir la vue principale Droptables.

droptables-éditeur

 

L’interface du gestionnaire de tables s’ouvre dans une lightbox à partir de l’éditeur:

droptables-lightbox-open

 

Quand vous voulez insérer une table dans votre éditeur, utilisez le bouton en haut à droite Insérer ce tableau pour le mettre dans votre article. Ensuite, le tableau sera matérialisé avec une zone grise et une icône semblable à Excel.

table-in-editor

 

Si vous cliquez sur la zone puis sur le bouton Droptables, la table ajoutée précédemment sera chargée.

 

2.2 Gérer les tableaux et les catégories

Les tableaux sont classés en catégories. Vous pouvez avoir autant de tables que vous le souhaitez dans les catégories. Pour créer une catégorie de table, cliquez sur Nouvelle catégorie de table en haut au centre. Pour créer une nouvelle table, cliquez simplement sur le bouton Créer un tableau.

tableaux-catégories

 

Remarque: une catégorie et une table par défaut sont déjà créées lors de l'installation du composant. Vous pouvez déplacer des tableaux et des catégories de tableaux par glisser-déposer.

table-move

 

La catégorie peut être gérée en mettant votre souris dessus, vous pourrez éditer le nom, copier ou supprimer le tableau.

nom de la table

 

2.3 Edition de la table

Pour ajouter des données dans des tableaux, vous devez agir comme si vous étiez dans un spreadsheat. Double-cliquer sur une cellule vous donnera la possibilité de mettre à jour le contenu, un simple clic pour sélectionner une / plusieurs cellules (et appliquer un style par exemple).

cellule d'édition

Pour ajouter une ligne ou des colonnes, cliquez sur le + de la bordure du tableau:

add-line-table

 

Ou utilisez le clic droit.

clic droit-add

 

Pour copier des cellules, vous pouvez utiliser CTRL + C / CTRL + V ou vous pouvez également placer votre souris dans le coin inférieur droit de la cellule et l'amener dans la direction souhaitée.

cellule de copie

 

Remarque: toutes les modifications sont instantanément sauvegardées automatiquement avec un message en haut à droite. Vous avez la possibilité de désactiver cette fonctionnalité à partir du Droptables> Options

table de sauvegarde

 

 

Dans le menu contextuel, vous pouvez annuler les dernières modifications, les dernières depuis que vous avez rechargé la page. Droptables conserve une sauvegarde de la modification que vous avez effectuée et peut la restaurer.

annuler l'action

Les cellules peuvent également être fusionnées. Sélectionnez 2 cellules ou plus puis faites un clic droit. Un menu vous permettra de faire la fusion.

 

2.4 Edition de contenu avancée

Nous avons récemment ajouté une nouvelle fonctionnalité dans l'interface d'édition. Vous pouvez maintenant ajouter du contenu HTML avec un éditeur WYSIWYG dans chaque cellule. Sélectionnez une cellule, sur la partie droite, allez dans l'onglet Format> HTML

cellule html

 

Maintenant, lorsque vous modifiez la cellule, vous aurez l'éditeur HTML à l'intérieur. Il inclut également tout le bouton de contenu de l'éditeur, ici j'ai utilisé le bouton d'image par exemple. Les boutons de l'éditeur disponibles sont configurables en option.

bouton d'éditeur

 

 

2.5 Excel / tableur import / export

 

Vous pouvez importer et exporter des feuilles de calcul au format Droptables à l'aide de notre outil dédié. Il doit être activé depuis la configuration: Composants> Droptables> Options

Excel-import

 

Les tableaux peuvent être importés à partir d'Excel ou d'Open Office. Le format sera détecté automatiquement et importé. Notez que seule la première page Excel sera importée. L'exportation peut être faite au format Excel 2003 ou 2007.

Excel - feuille-import-export

 

Vous pouvez également importer ou exporter données de table seulement ou données de la table + styles. Les données d'importation uniquement sont assez pratiques pour préserver votre mise en page lors de l'importation.

 

III. STYLE DES TABLES

3.1 Format

L'onglet Format est disponible à la droite de votre écran par défaut. Il contient différents paramètres de style.

 

format de table

  • Type de cellule: défaut ou HTML (avec l'éditeur). Le type par défaut vous permet de calculer avec HTML l'insertion de contenu HTML comme des images.
  • Le fond de la cellule est sur la définition de la couleur de fond bien sûr
  • Options de bordure et de police peut être appliqué sur une ou plusieurs cellules
  • La ligne et la largeur de la colonne / hauteur peut être défini en pixels. Sélectionnez une colonne ou une ligne n'importe où dans la table et validez la taille.

rangée-colonne-taille

Une info-bulle sur le survol de la souris par cellule est également disponible (doit être activée à partir des options du composant). En cliquant sur le bouton d'info-bulle, vous pouvez modifier le contenu visible au survol de la souris avec la souris.

info-bulle de tableau

 

3.2 Options de thème et de tri

 

Sur l'onglet du tableau, toujours sur la partie droite, vous avez un sélecteur de thème de vignettes. Il suffit de cliquer sur un thème pour l'appliquer. Nous vous recommandons vivement d’appliquer des thèmes sur de nouvelles tables, c’est vraiment plus facile de modifier les données.

choix de thème

Si vous avez déjà des données dans votre table et que vous appliquez un thème, toutes les données seront supprimées. Si vous appliquez un thème à une nouvelle table, des exemples de données et un style seront ajoutés et peuvent être modifiés.

 

Toujours dans l'onglet de colonne de droite du tableau, le paramètre 2 frame est ici pour définir la couleur des lignes alternatives (line1, line2, line1, line2 ...)

deux images

 

Le paramètre sortable vous permet de faire un tri de données AJAX sur le frontend. Notez que si vous activez l’outil de filtrage, un outil de tri de données sera activé par défaut.

table de tri et de filtrage

 

  • Utiliser un tableau triable: Oui Non
  • Aligner la table: Centre / Droite / Gauche / Aucun
  • Type sensible: Défilement / masquage des colonnes
  • Activer les filtres: Oui Non
  • Activer la pagination: Oui Non
  • Nombre de lignes par page: 10, 20, ...
  • Trier un cloumn par défaut: sélectionnez cloumn A, B ou C, ...
  • Ordre trier une colonne par défaut: ASC / DESC

Filtre de données et tri sur le frontend

filtre de données

La table align est à peu près aligner la div qui contient la table entière, centrez toute la table par exemple. Les options de gel des colonnes et des lignes gèlent la sélection et permettent un défilement sur le reste.

gel de ligne

 

Rendre mes tables réactives ou utiliser le défilement sur de petits appareils?

Droptables gère le design réactif avec un outil prioritaire, en option. Par défaut, la fonctionnalité responsive est désactivée, il y aura un débordement (mais cela fonctionne très bien sur mobile).

mode réactif

 

Le mode réactif étant avancé, vous pouvez définir une priorité pour masquer les colonnes sur les tailles de mobiles. Lorsque les colonnes sont masquées, un menu du mobile avec une case à cocher sera affiché pour forcer l'affichage / le masquage des colonnes.
La taille de la colonne est fixée lors de l'édition de la table. Si la taille de toutes les colonnes est trop grande pour le conteneur, vous aurez un débordement et vous pourrez facilement faire défiler sur des appareils mobiles.

Tableau avec un rouleau (mieux pour une petite quantité de colonnes)

responsive-table-scroll

 

Table avec colonne cachée (mieux pour une grande quantité de colonnes)

responsive-table-cololumn-hide

 

Une cellule hightlight est également disponible en option. Vous pouvez activer cette fonctionnalité dans le configuration. Il est désactivé par défaut. Vous pouvez ajuster la couleur et l'opacité de la surbrillance.

surlignage

 

3.3 ACL et administration frontend

Il est possible de gérer vos tables à partir de l’interface Joomla. À partir du gestionnaire de menus Joomla, ajouter un nouveau menu article et sélectionnez comme type Gérez les tables et sélectionnez l'interface Droptables comme modèle.


menu-droptables

 

 

Voici ce que vous pouvez voir dans Droptables Manager depuis le frontend.

Droptables-frontend

 

Remarque: pour afficher l’interface du gestionnaire de tables en mode plein écran dans le frontal, vous devez choisir Style de modèle> Frontend Droptables.

 

Vous pouvez utiliser la liste de contrôle d'accès Joomla User Group pour contrôler les actions d'édition de table. Tout d'abord, pour configurer les personnes autorisées à afficher les tables, vous devez activer la fonctionnalité Activer l'accès aux tables (ACL) dans la configuration Droptables.

frontend-table-edition

 

De plus, vous pouvez contrôler la visibilité de l’avant de la table pour chaque table à partir des paramètres de la table. (Plus d'onglet). Ramassez un groupe d'utilisateurs Joomla pour permettre à un groupe de voir la table sur le front-office.

user-group-acl

 

3.4 CSS personnalisé

Allons un pas plus loin. Si vous êtes un webdesigner avec des compétences en édition CSS, vous pourrez ajouter des CSS à partir de le bon onglet Plus.

Vous pouvez ajouter un remplissage et un rayon de bordure sur la cellule.

padding-css

 

Les cellules, les lignes et les colonnes ont des coordonnées pour les identifier et leur appliquer des CSS personnalisés. R est la ligne, C est la colonne. Ici c'est la ligne 1 (r1), la colonne 4 (c4) = dtr1 dtc4

css-coordonnées

 

Le code CSS est coloré à l'aide du code miroir. Le code CSS peut être moins de code, cela fonctionne aussi!

css-custom-table

 

 

IV TABLEAU DE TABLES

4.1 Créer une table avec des données

Vous pouvez générer des graphiques à partir de données de table, à l'intérieur de votre contenu. Commencez par créer un tableau avec des données pour générer un graphique.

Les tableaux ne doivent pas nécessairement être affichés avec le graphique dans votre contenu et vous pouvez générer plusieurs graphiques à partir d'un seul tableau.

 

Puis effectuez votre sélection afin de générer un graphique. Ici, toute la table est sélectionnée.

table à cartes

 

Puis cliquez sur ajouter un nouveau graphique. Un graphique sera généré, en respectant la plage de données que vous avez sélectionnée. Sur la partie droite, vous pouvez sélectionner le type de graphique.

générer-graphique

 

Le graphique sera mis à jour de manière dynamique en ce qui concerne le changement de données dans le tableau. Vous n'avez pas besoin de le régénérer.

 

4.2 Paramètres du graphique

Une fois votre graphique ajouté, vous avez quelques options dans la colonne de droite.

paramètres de graphique

 

le Changer de ligne / colonne est uniquement disponible si vous avez sélectionné uniquement des nombres dans le jeu de données. Vous serez autorisé à passer des données de colonnes en lignes.

le Utilisez la première ligne / colonne comme étiquettes Ce paramètre vous permet d’ajouter une étiquette à votre graphique.

titres de cartes

 

Ensuite, vous avez des options pour définir la largeur / hauteur, aligner, couleur de votre graphique.

 

V. PARAMÈTRES ET ASTUCES DE DROPTABLES

5.1 paramètres

Pour accéder aux paramètres globaux Droptables, allez dans Composant> Droptables> Options

droptables-paramaters

 

Dans les options, vous pouvez définir:
 

  • Les catégories de table à fermeture automatique
  • Activer l'import / export Excel
  • Choisissez le format d'exportation

droptable-settings2

 

  • Activer l'info-bulle sur les cellules
  • Activer la sauvegarde automatique dans AJAX, sinon vous aurez un Bouton Enregistrer les modifications
  • Activer l'accès à la table: Activer la limitation d'accès à la table (ACL). Vous permet de limiter les autorisations d'édition de table en fonction des groupes d'utilisateurs Joomla
  • Cellule en surbrillance: Activer une couleur sur une cellule au-dessus de la souris pour voir au premier regard un contenu de cellule (Ligne uniquement / Colonne seulement / Les deux)
  • Surligner la couleur: La cellule soulignant la couleur de survol
  • Mettez en surbrillance la couleur de la police: La cellule mettant en surbrillance la couleur de survol de la police
  • Souligner l'opacité: La cellule mettant en évidence le niveau d'opacité
  • Activer le panneau droit caché: Oui Non
  • Tableau périodicité: Délai de synchronisation automatique de la table pour un fichier Excel ou Google Sheets
  • Activer la table de base de données: Oui Non

 

5.2 permission ACL

Une intégration Joomla ACL est disponible. Vous pouvez maintenant restreindre l'accès aux actions ou aux tables pour les éditeurs de tables. Cette restriction s'applique sur toutes les tables.

tables d'accès

 

Par exemple, si vous voulez qu'un utilisateur administrateur n'accède qu'à ses propres tables et ne les modifie, définissez «edit» sur «refusé» et éditez «propre» sur «Autorisé». Vous pouvez également limiter:

  • La configuration globale
  • L'accès à l'interface
  • La création de tables
  • La suppression des tables
  • Edition / propre édition
Le super administrateur aura toujours toutes les autorisations d'édition pour toutes les tables et toutes les catégories.

 

5.3 Charger des tableaux dans un module personnalisé HTML

Droptables est conçu pour être utilisé dans tous les champs de l'éditeur WYSIWYG, il vous suffit de disposer du plug-in de contenu pour pouvoir être appelé. La plupart du temps, il est activé par défaut.

Si ce n'est pas le cas, comme dans le module personnalisé Joomla HTML, vous devez l'activer comme ci-dessus.

table dans le module

 

Dans l'onglet Option, vous devez définir l'option. Préparer le contenu pour: Oui

 

5.4 Calcul

Vous avez une implémentation de calcul de base dans Droptables. Les éléments disponibles sont:

  • SOMME, COMPTE, CONCAT
  • MIN MAX MOY
  • DATE, JOUR, JOURS, JOURS360
  • OU XOR ET

Pour faire une somme, tapez comme ceci dans une cellule (UPPERCASE est obligatoire): = Somme (A1; B2) ou = Somme (A1: B2)

Et vous pouvez configurer le symbole pour le calcul des cellules sur le nombre, l'argent ou la date.

calculer les paramètres

 

  • Formats de date: Définir le format de date pour les calculs de date
  • Position du symbole: Pour effectuer un calcul de cellule sur de la monnaie, définissez la position par défaut du symbole monétaire.
  • Symbole (s) de devise: Pour effectuer un calcul de cellule sur de l'argent, définissez le symbole monétaire par défaut
  • Symbole décimal: Pour effectuer le calcul de cellule, définissez le symbole décimal par défaut
  • Nombre décimal: Nombre de chiffres après le symbole décimal
  • Mille symbole: Pour effectuer le calcul de cellule, définissez le symbole mille par défaut

VI. EXCEL ET GOOGLE SHEETS SYNC

6.1 Synchronisation des fichiers Excel

Il est possible d’effectuer une synchronisation entre une table que vous avez créée et un fichier Excel situé sur votre serveur (n’importe où). Dans l'onglet de droite intitulé "Table", vous avez en bas un bloc permettant de lier un fichier Excel à la table.

sync-excel-choice

Sur cliquez sur le Bouton Parcourir, vous pourrez sélectionner un Excel n’importe où sur votre serveur. Ici, il s’agit d’un fichier chargé via le gestionnaire de médias (dossier / images).

fichier-parcourir-excel

 

Une fois que votre fichier Excel est lié à la table, vous pouvez cliquer sur le bouton Bouton de récupération de données importer des données à partir du fichier Excel.

fetch-excel-data

 

Remarque: Seules les données seront extraites d'Excel, pas les styles, de sorte que le style global de votre tableau ne sera pas modifié lors de l'importation.

 

Attention: en fonction de la mémoire disponible sur votre serveur, vous ne pourrez pas importer de très gros fichiers Excel (plus de 1000 lignes par exemple).

 

6.2 Synchronisation avec Google Sheets

Droptables offre une possibilité de synchronisation Google Sheets. Vos Google Sheets doivent être " publié sur le web"pour être synchronisé. Commencez par ouvrir votre feuille à partir de Google Drive et publiez-la en tant que page Web à l'aide du menu Fichier.

publier sur le Web

 

Ensuite, vous aurez accès au lien de fichier Google Sheets, copiez ce lien.

publié-lien

 

Et le coller dans Droptables Onglet “Table”. Vous avez terminé! vous pouvez maintenant récupérer les données de vos Google Sheets.

google-sheet-data

 

6.3 Synchronisation automatique Excel et Google Sheets

Au-dessus du lien de fichier, vous pouvez également activer une synchronisation automatique des données. Droptables ira chercher les données automatiquement à intervalles réguliers.

période de synchronisation

Une fois activé, une notification est affichée après le titre du tableau.

notification de synchronisation automatique

 

Le délai de synchronisation peut être défini dans la configuration Droptables.

 

VII. TABLES DE BASE DE DONNEES

 

Droptables vous permet de créer des tables à partir de vos tables de base de données. À partir des paramètres du composant, vous devriez Activer la table de base de données.

base de données config

 

Retour au tableau de bord, tout d'abord, vous choisissez Table de la base de données catégorie et puis cliquez sur Créer un tableau , toutes les tables de votre base de données seront listées ci-dessous. Ensuite, vous pourrez sélectionner des tables et des colonnes dans votre base de données. En appuyant sur contrôle, vous pouvez sélectionner plusieurs tables, colonnes.

sélection de base de données


Lors de la sélection des colonnes, vous pouvez définir un titre personnalisé et un ordre par défaut pour vos données dans la table, lorsqu'elles sont affichées du côté public.

titre de colonne


Ensuite, vous avez quelques options et filtres à appliquer à vos tables:

  • Un niveau de pagination par défaut (à utiliser avec une grande quantité de données)
  • Nombre de lignes pour la pagination
  • Appliquez un filtre à vos données, par exemple. une colonne peut être égale, différente ... d'une valeur définie
  • La possibilité de regrouper des valeurs dans les colonnes

option de table de base de données


Enfin, vous pouvez prévisualiser et générer votre table comme n'importe quelle autre table. Lorsque votre table est générée, vous avez toujours accès à la table Source de la base de données et vous pouvez par exemple ajouter une colonne à votre table.

base de données générée

Remarque: la seule différence est que les thèmes ne peuvent pas être appliqués aux tableaux, mais vous pouvez personnaliser tout l'affichage comme dans n'importe quel autre tableau.