RojeruTableSorter FREE

Tabla JavaScript ultra-ligera con ordenamiento, filtros, paginación y diseño completamente responsive.

✨ Características

• 🔍 Búsqueda global y filtros por columna
• 📱 Diseño responsive para móviles y escritorio
• 📊 Paginación con selección de registros por página
• ✅ Selección de filas (simple y múltiple)
• 🏷️ Sistema de badges para estados y colores
• 🔄 Ordenamiento por cualquier columna
• 🎨 Botones personalizables con funciones
• ⚡ Ultra ligero - Solo 15KB minificado

🚀 Instalación

Opción 1: NPM

npm install rojeru-tablesorter-free

Opción 2: CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/rojeru.tablesorter.free.css">
<!-- Font Awesome (requerido para iconos) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rojeru.tablesorter.free.js"></script>

📖 Uso Básico

HTML

<div id="miTabla"></div>

JavaScript

// Crear instancia
const tabla = new RojeruTableSorter();

// Datos de ejemplo
const datos = [
    { id: 1, nombre: 'Juan Pérez', email: '[email protected]', edad: 28, estatus: 'activo' },
    { id: 2, nombre: 'María López', email: '[email protected]', edad: 34, estatus: 'inactivo' }
];

// Configuración
tabla.ini('miTabla', {
    data: datos,
    columns: [
        { key: 'id', title: 'ID', width: '80px' },
        { key: 'nombre', title: 'Nombre', sortable: true },
        { key: 'email', title: 'Email' },
        { key: 'edad', title: 'Edad', sortable: true },
        { 
            key: 'estatus', 
            title: 'Estatus',
            badges: [
                { type: 'simple', value: 'activo', label: 'Activo', color: 'success' },
                { type: 'simple', value: 'inactivo', label: 'Inactivo', color: 'danger' }
            ]
        }
    ],
    tableTitle: 'Usuarios',
    rowsPerPage: 10,
    selectable: true,
    showSearch: true
});

⚙️ Configuración

| Opción | Tipo | Default | Descripción | |-----------------|-----------------|---------|-------------------------------------------------| | data | Array | [] | Obligatorio: Array de objetos con los datos. | | columns | Array | [] | Obligatorio: Configuración de columnas. | | tableTitle | String | null | Título de la tabla. | | rowsPerPage | Number | 10 | Filas por página. | | sortBy | String | null | Columna para orden inicial. | | sortOrder | String | 'asc' | 'asc' o 'desc'. | | selectable | Boolean | false | Habilitar selección de filas. | | showSearch | Boolean | false | Mostrar búsqueda global. | | scrollTop | Boolean | false | Scroll horizontal superior. |

Configuración de columnas

Cada columna puede tener estas propiedades:

{
    key: 'nombre',           // Obligatorio: clave del objeto de datos
    title: 'Nombre',         // Obligatorio: título de la columna
    width: '200px',          // Opcional: ancho fijo
    sortable: true,          // Opcional: permite ordenar (default: true)
    filtrable: true,         // Opcional: permite filtrar (default: true)
    visible: true,           // Opcional: mostrar/ocultar columna
    
    // Opcional: renderizado personalizado
    render: function(value, row) {
        return 'Sr./Sra. ' + value;
    },
    
    // Opcional: badges
    badges: [
        {
            type: 'simple',
            value: 'activo',
            label: 'Activo',
            color: 'success', // primary, secondary, success, danger, warning, info, main
            icon: 'fas fa-check'
        }
    ],
    
    // Opcional: botones
    buttons: [
        {
            text: 'Editar',
            icon: 'fas fa-edit',
            type: 'warning',
            onClick: function(params) {
                alert('Editando: ' + params.row.nombre);
            }
        }
    ],
    
    // Opcional: opciones para filtro tipo select
    selectOptions: [
        { value: 'opcion1', label: 'Opción 1' },
        { value: 'opcion2', label: 'Opción 2' }
    ]
}

🛠️ API

Métodos disponibles

// Inicializar tabla
tabla.ini(containerId, options);

// Cargar nuevos datos
tabla.loadData(newDataArray);

// Agregar fila (prepend = true para agregar al inicio)
tabla.addRow(rowObject, prepend = true);

// Eliminar fila (por objeto o índice)
tabla.removeRow(rowObject);
tabla.removeRow(0);

// Refrescar tabla
tabla.refreshRows();

// Destruir tabla (limpiar eventos)
tabla.destroy();

// Obtener filas seleccionadas
const seleccionadas = tabla.selectedRows; // Set de objetos

Eventos

Los eventos se manejan a través de las funciones de callback en los botones:

buttons: [
    {
        text: 'Acción',
        onClick: function(params) {
            // params.row - Datos de la fila
            // params.event - Evento del click
            // params.button - Elemento del botón
            // params.table - Instancia de la tabla
            console.log('Fila:', params.row);
        }
    }
]

🎨 Badges

Simple: Para valores específicos

badges: [
    { type: 'simple', value: 'activo', label: 'Activo', color: 'success' }
]

Condicional: Para comparaciones numéricas

badges: [
    { 
        type: 'conditional', 
        condition: '>', // >, <, >=, <=, ==, !=
        threshold: 50,
        label: 'Alto',
        color: 'danger'
    }
]

Múltiple: Para múltiples condiciones

badges: [
    {
        type: 'multiple',
        conditions: [
            { field: 'edad', op: '>', value: 30 },
            { field: 'saldo', op: '>', value: 1000 }
        ],
        label: 'VIP',
        color: 'main'
    }
]

📱 Responsive

La tabla se adapta automáticamente a dispositivos móviles:

• Escritorio: Vista de tabla tradicional
• Móvil: Vista tipo tarjeta (card layout)
• Los badges y botones se mantienen funcionales
• Los filtros se adaptan al espacio disponible

🔌 Integración con Frameworks

React

import React, { useEffect, useRef } from 'react';
import 'rojeru-tablesorter-free/dist/rojeru.tablesorter.free.css';
import 'font-awesome/css/font-awesome.min.css';

function MiTabla({ datos }) {
    const tablaRef = useRef(null);
    const instanciaTabla = useRef(null);

    useEffect(() => {
        if (!instanciaTabla.current) {
            instanciaTabla.current = new RojeruTableSorter();
        }

        instanciaTabla.current.ini('contenedorTabla', {
            data: datos,
            columns: [...],
            // ... otras opciones
        });

        return () => {
            if (instanciaTabla.current) {
                instanciaTabla.current.destroy();
            }
        };
    }, [datos]);

    return <div id="contenedorTabla" ref={tablaRef}></div>;
}

Vue 3

<template>
  <div ref="tablaContainer"></div>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue';
import 'rojeru-tablesorter-free/dist/rojeru.tablesorter.free.css';
import 'font-awesome/css/font-awesome.min.css';

export default {
  setup() {
    const tablaContainer = ref(null);
    let tablaInstancia = null;

    onMounted(() => {
      tablaInstancia = new RojeruTableSorter();
      tablaInstancia.ini(tablaContainer.value.id, {
        data: props.datos,
        columns: [...],
        // ... otras opciones
      });
    });

    onUnmounted(() => {
      if (tablaInstancia) {
        tablaInstancia.destroy();
      }
    });

    return { tablaContainer };
  }
};
</script>

Angular

// En tu componente
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';

declare var RojeruTableSorter: any;

@Component({
  selector: 'app-mi-tabla',
  template: '<div #tablaContainer></div>'
})
export class MiTablaComponent implements OnInit, OnDestroy {
  @ViewChild('tablaContainer') tablaContainer!: ElementRef;
  private tablaInstancia: any;

  ngOnInit() {
    this.tablaInstancia = new RojeruTableSorter();
  }

  ngAfterViewInit() {
    this.tablaInstancia.ini(this.tablaContainer.nativeElement.id, {
      data: this.datos,
      columns: [...],
      // ... otras opciones
    });
  }

  ngOnDestroy() {
    if (this.tablaInstancia) {
      this.tablaInstancia.destroy();
    }
  }
}

📄 Licencia

RojeruTableSorter FREE es gratuito para:

• Uso personal
• Uso comercial
• Proyectos open source
• Proyectos empresariales

Atribución: Opcional pero apreciada.

Restricciones:

• No puedes vender este código como propio
• No puedes eliminar los comentarios de autoría
• Debes mantener el archivo de licencia incluido

Para licencias empresariales o redistribución, contacta para la versión PRO.

🌟 Agradecimientos

• Font Awesome por los iconos
• Todos los contribuidores y usuarios