table sort js

Table-sort-js.

• Descripción: Biblioteca de clasificación de tabla HTML con tipos de clasificación Inferencia Builtin y Extensión del navegador disponible. #Vanillajs

• Manifestación

• Documentación. (trabajo en progreso)

• Paquete NPM. y jsdelivr

• Extensiones del navegador Firefox y Chrome: ¡Tablas de cualquier sitio web que visite se vuelva ordenable!

Instalar instrucciones.

• Opción 1 : Cargar como script desde una red de entrega de contenido (CDN):

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

O versión no minificada (¡tamaño más grande, pero más fácil de depurar!):

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

Ejemplo sobre cómo usar tabla-sort-js con html

• Opción 2: Instalar desde NPM:

 npm install table - sort - js 

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

Ejemplos sobre el uso de la tabla-sort-js con marcos frontends como react.js y vue.js

Para hacer las mesas ordenables:

• Agregue class="table-sort" a etiquetas HTML <Table>.
• Haga clic en los encabezados de la tabla para clasificar las columnas.

Clases:

<table> clases

Descripción

"Table-sort"

¡Haz que la mesa sea ordenable! (Palabras, números, fechas, tamaños de archivo) ...

"Arrows de mesa"

Mostrar flechas ascendentes o descendentes. Admite flechas personalizadas; Por ejemplo: "Table-Arrows-⇈⇋⇊"

"Infre sin clase"

Desactiva la inferencia para agregar clases de clasificación automáticamente, por ejemplo, sorte de archivo, fechas-dmy-sort), etc.

"Recuerda clasificar"

Si hacer clic en diferentes columnas, recuerda la especie de columna original.

"Celular-sorte"

clasificar las células (TD) en lugar de las filas de tabla (TR); Útil para mantener filas de mesa con clases/atributos en su lugar.

<th> clases	Descripción
"Data-sort"	Ordenar por atributos de datos, por ejemplo, <td data-sort = "42">. Útil para hacer clases personalizadas.
"fechas-mdy-sort"	Clasificaciones de fechas en el estilo de EE. UU. MM/DD/YYYY FORMAT;. Eg (28/12/2023). Puede usar "/" o "-" como separador. Overides inferió la clase "fechas-dmy-sort".
"Onload-Sort"	Ordene la columna en la carga de la página. Simula un clic del usuario. (solo puede ordenar Onload para una columna)
"DISHAT-SORT"	No permitir la clasificación de la tabla por esta columna específica.

<th> clases inferidas.	Descripción
"Numérica-sorte"	Números de clasificación que incluyen decimales: positivos, negativos (tanto en representaciones menos como de paréntesis).
	Admite monedas comunes, por ejemplo, $ £ € ¥) y signos porcentuales, por ejemplo, EG (0.39%)
"fechas-dmy-sort"	Clasifica las fechas en formato DD/mm/aa yyyy. Eg (18/10/1995). Puede usar "/" o "-" como separador.
"Fechas-SORT"	Fechas de clasificación en ISO 8601 yyyy/mm/dd formato. Eg (2021/10/28). Use "/" o "-" como separador.
"File-Size-Sort"	El tamaño de los archivos (b-> tib) usa el prefijo binario. (por ejemplo, 10 b, 100 kib, 1 MIB); espacio opcional entre número y prefijo.
"Runtime-sort"	Clasifica el tiempo de ejecución en horas y segundos, por ejemplo (10h 1m 20s). Útil para clasificar la columna de tiempo de ejecución de acciones de GitHub ...

<th> clases que cambian los valores predeterminados.	Descripción
"Orden-by-Desc"	Ordene descendiendo en primer clic. (el valor predeterminado es aescendente)
"Alpha-sort"	Clasificar alfabéticamente (Z11, Z2); El valor predeterminado es la clasificación natural (Z2, Z11).
"Punt-sort"	Ordenar puntuación; El valor predeterminado ignora la puntuación.

Desarrollo:

Si desea contribuir, las instrucciones de instalación se pueden encontrar aquí.