table sort js

Table-sort-js.

• Description: Bibliothèque de tri de table HTML avec Tri Type Inférence Inférence et extension du navigateur disponible. #Vanillajs

• Démo

• Documentation. (travail en cours)

• Package NPM. et jsdelivr

• Firefox et Chrome Extensions du navigateur: les tables de tout site Web que vous visitez deviennent triables!

Installer des instructions.

• Option 1 : Chargez en tant que script à partir d'un réseau de livraison de contenu (CDN):

 < script src = "https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js" > </ script >

Ou version non mini (plus grande taille, mais plus facile à déboguer!):

 < script src = "https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js" > </ script >

Exemple sur la façon d'utiliser Table-Sort-Js avec HTML

• Option 2: Installer à partir de NPM:

 npm install table - sort - js 

 import tableSort from "table-sort-js/table-sort.js" ;

Exemples sur l'utilisation de Table-Sort-Js avec des frameworks frontend tels que react.js et vue.js

Pour rendre les tables triables:

• Ajouter class="table-sort" aux balises HTML <Bile>.
• Cliquez sur les en-têtes de table pour trier les colonnes.

Cours:

Classes <tableaux	Description
"Table-sort"	Rendez la table triable! (Mots, nombres, dates, tailles de fichiers) ...
"Arrions de table"	Afficher les flèches ascendantes ou descendantes. Prend en charge les flèches personnalisées; Par exemple: "Table-Arrows-⇈⇋⇊"
"sans classe"	Désactivez l'inférence pour ajouter automatiquement les classes de tri, par exemple (fichier-size-sort, dates-dmy-sort), etc.
"Rappelez-vous-sort"	Si cliquer sur différentes colonnes se souvient de la colonne d'origine.
"cellules-sort"	trier les cellules (TD) plutôt que les rangées de table (TR); Utile pour garder les lignes de table avec des classes / attributs en place.

Classes	Description
"Data-Strat"	Trier par attributs de données, par exemple <td data-sort = "42">. Utile pour faire des sortes personnalisées.
"dates-mdy-sort"	Trie les dates au format MM / DD / YYYY de style américain;. par exemple (28/12/2023). Peut utiliser "/" ou "-" comme séparateur. Suredents a déduit la classe "dates-dmy-sort".
"onload-sort"	Trier la colonne sur le chargement de la page. Simule un clic de l'utilisateur. (ne peut trier que sur une colonne)
"Désactiver le sort"	Interdire le tri du tableau par cette colonne spécifique.

<th> Classes déduites.	Description
"Numérique-sort"	Trie les nombres, y compris les décimales - positifs, négatifs (dans les représentations moins et les parenthèses).
	Prend en charge les devises communes, par exemple (£ € ¥) et pour pourcentage de panneaux, par exemple (0,39%)
"dates-dmy-sort"	Trie les dates au format DD / mm / yyyy. EG (18/10/1995). Peut utiliser "/" ou "-" comme séparateur.
"dates-memd-sort"	Trie dates au format ISO 8601 Yyyy / mm / dd. par exemple (2021/10/28). Utilisez "/" ou "-" comme séparateur.
"fichier-size-sort"	Trie les tailles de fichiers (B-> TIB) utilise le préfixe binaire. (par exemple 10 B, 100 kib, 1 MIB); Espace facultatif entre le nombre et le préfixe.
"Runtime-Sort"	Trie l'exécution en quelques minutes et secondes, par exemple (10h 1m 20s). Utile pour trier la colonne de temps d'exécution des actions GitHub ...

<th> Classes qui changent par défaut.	Description
"Order-by-DESC"	Commandez en descendant sur le premier clic. (la valeur par défaut est éventée)
"alpha-sort"	Trier alphabétiquement (Z11, Z2); La valeur par défaut est un tri naturel (Z2, Z11).
"ponctuel-sort"	Trier la ponctuation; par défaut ignore la ponctuation.

Développement:

Si vous souhaitez contribuer, l'installation d'instructions peut être trouvée ici.