Descargar
Documentación
Ejemplos
Github
Contacto
Spanish
SpanishEnglish

Redimensionar columnas y tablas HTML

cache

Sobre este plugin

colResizable es un plugin jQuery para permitir redimensionar columnas y tablas HTML manualmente, posicionando el cursor entre dos celdas contiguas y arrastrando con el cursor. Es compatible tanto con dispositivos táctiles y equipos con ratón.

Se trata de un plugin altamente optimizado en cuanto a tamaño, no requiere de ninguna otra librería adicional, y es completamente funcional con la gran mayoría de navegadores actuales: IE7+, Firefox, Chrome y Opera (aunque también brinda soporte parcial para IE6).

La característica principal de colResizable es que puede ser aplicado tanto sobre tablas con diseño líquido (porcentual) como aquellas que fueron dimensionadas empleando un valor fijo en pixeles. Tras redimensionar una columna, el tamaño de la tabla permanecerá inmutable, y en caso de que el contenedor sea redimensionado y la tabla sea de diseño líquido, esta se seguirá comportando según lo esperado adaptándose al tamaño disponible.

También soporta refrescos de página, postbacks y updatePanels, permaneciendo la distribución de columnas en el último estado conocido antes de actualizar.

colResizable también puede ser utilizado como selector de rangos múltiples.

Ejemplo básico

A continuación, se muestra un ejemplo básico:


columnacolumnacolumnacolumna
celda celdaceldacelda
celdaceldaceldacelda
celdaceldaceldacelda
Probar jsfiddle Más ejemplos

Características

colResizable fue desarrollado porque no se encontró ningún otro plugin similar con las siguientes características:

  • Compatibilidad tanto con tablas de diseño líquido (porcentual) como basado en píxeles
  • Redimensionar una columna no altera el tamaño total de la tabla (opcional)
  • Compatible con dispositivos táctiles (teléfonos móviles, tablets, etc)
  • Persistencia de la distribución de columnas después de un postback
  • Posibilidad de personalizar la apariencia
  • No requiere de recursos adicionales (css, imagenes, etc)
  • Compatibilidad entre navegadores (IE7+, Chrome, FireFox, Safari)
  • No tiene dependencias de otras librerías
  • Tamaño muy reducido
  • Eventos

Modo de empleo

Para poder utilizar este plugin, el primer paso es incluir las referencias a jQuery y posteriormente al archivo colResizable.min.js en la sección de cabecera del documento. Posteriormente, cuando se desee que una tabla (o colección de tablas) permitan redimensionamiento de columnas, se referenciarán mediante un selector jQuery invocando al método colResizable()

Los separadores de columna empleados para redimensionar la tabla, serán ubicados de acuerdo a la distribución de los elementos de la primera fila. Es por ello, que no está recomendado utilizar valores de colspan en las celdas de la cabecera. Si por algún motivo fuese estrictamente necesario, se podrá lograr el efecto deseado agregamdo una fila adicional justo encima de la cabecera sin altura para que no sea visible pero cumpla su función.

También es importante mencionar que es altamente recomendable definir explícitamente el ancho de la tabla, ya sea directamente mediante el atributo width, mediante el objeto style, o indirectamente a través de una regla CSS en una hoja de estilos.

<head>
  <script src="js/jquery.js"></script>
  <script src="js/colResizable.min.js"></script>
</head>
<body>	 
  <table width="100%" >
    <tr> <th> columna </th> <th> columna </th> </tr>
    <tr> <td> celda </td> <td> celda </td> </tr>							
    <tr> <td> celda </td> <td> celda </td> </tr>							
  </table>	
</body>

$(function(){
  $("table").colResizable();
});

Atributos

colResizable dispone de atributos para personalizar aspectos tanto de apariencia como de comportamiento:



resizeMode:

[tipo: string] [por defecto: 'fit'] [versión: 1.6]



Permite establecer como se va a comportar el redimensionamiento de las columnas, por el momento estos son los posibles valores:
  • 'fit': es el método de redimensionamiento por defecto. La tabla no cambia de tamaño, y al redimensionar una columna esta toma o cede espacio de la columna adyacente.
  • 'flex': en este método de redimensionamiento cada columna puede cambiar de tamaño independientemente sin afectar a las colindantes, con la limitación de que la tabla nunca excederá el tamaño disponible en su contenedor superior
  • 'overflow': cada columna se puede redimensionar independientemente de manera que al cambiar el tamaño de una columna también se cambia el tamaño de la tabla al completo. Se permite exceder el tamaño del contenedor superior, con lo cual será necesario agregar un scroll horizontal


disable:

[tipo: boolean] [por defecto: false] [versión: 1.0]



Cuando se establece su valor en true destruye todos los eventos y elementos adicionales del DOM creados por el plugin previamente sobre una tabla o colección de tablas. Es absolutamente indispensable deshabilitar manualmente el plugin para cualquier tabla que pretenda ser eliminada del árbol de elementos del documento dinámicamente. También es necesario desabilitar el plugin temporalmente antes de realizar cualquier cambio sobre la tabla, tales como agregar filas, columnas, o agregar contenido a las celdas (se adjunta un ejemplo en el archivo de descargas).


disabledColumns:

[tipo: array] [por defecto: [ ] ] [versión: 1.6]



Array con los indices de las columnas a excluir, de manera que es posible que determinadas columnas no puedan cambiar de tamaño, por ejemplo para columnas de iconos, etc.


liveDrag:

[tipo: boolean] [por defecto: false] [versión: 1.0]



Este atributo permite definir que la actualización del layout de la tabla se realice mientras el usuario se encuentra redimensionando una columna (true) o cuando el proceso haya terminado (false). LiveDrag consume proporcionalmente muchos más recursos de CPU por lo que su uso no es aconsejado para tablas extremadamente grandes o complicadas si se va a ejecutar en computadoras con pocos recursos.


postbackSafe:

[tipo: boolean] [por defecto: false] [versión: 1.3]



Este parámetro permite especificar que deseamos que el ancho de las columnas definido manualmente por el usuario perdure después de refrescar el browser o después de realizar un postback en páginas que empleen lógica en el lado del servidor (como .NET o PHP). Esta característica solo está disponible en browsers con soporte para sessionStorage (todos los browsers modernos), pero puede ser emulado en browsers más antiguos como IE7 e IE8 incluyendo una referencia al script sessionStoraje.js. Nótese que algunos navegadores no permiten el acceso a sessionStorage cuando la página es ejecutada localmente a través del sistema de archivos, por lo cual para poder testear correctamente esta característica se recomienda probarlo cuando la página ya se encuentra alojada en el servidor web (o alternativamente emplear Chrome u Opera localmente con propósitos de prueba los cuales no tienen esta limitación). Una vez que la página esté alojada en internet, todos los browsers se comportarán de manera similar por lo cual no tiene por qué preocuparse por temas de compatibilidad.


partialRefresh:

[tipo: boolean] [por defecto: false] [versión: 1.5]



Este atributo se tiene que establecer en true cuando la tabla se encuentra dentro de un updatePanel o cualquier otro tipo de contenedor sobre el que se aplique un refresco parcial empleando ajax. Conviene que el atributo ID de la tabla no varíe antes y despúes del refresco parcial.


headerOnly:

[tipo: boolean] [por defecto: false] [versión: 1.2]



Atributo que permite limitar el tamaño vertical de las anclas de redimensionamiento al disponible en la fila de cabecera, evitando que se expandan hasta completar el alto total disponible en la tabla.


draggingClass:

[tipo: string] [por defecto: valor de uso interno] [versión: 1.0]



Se trata de la clase CSS que será asignada a los separadores de columna mientras están siendo arrastrados por el usuario. Su propósito principal es el de personalizar la apariencia.


innerGripHtml:

[tipo: string] [por defecto: cadena vacía] [versión: 1.0]



Permite definir un bloque de HTML que será insertado en cada uno de los separadores de columnas para permitir personalizar su representación visual. Este atributo puede ser utilizado en conjunto con draggingClass para obtener resultados aún más concretos.


minWidth:

[tipo: number] [por defecto: 15] [versión: 1.1]



El valor indica el ancho mínimo permitido para las columnas medido en píxeles.


hoverCursor:

[tipo: string] [por defecto: "e-resize"] [versión: 1.3]



Permite la definición del cursor que será empleado cuando el usuario se posicione sobre los pivotes de redimensionamiento.


dragCursor:

[tipo: string] [por defecto: "e-resize"] [versión: 1.3]



Permite la definición del cursor que será empleado mientras el usuario redimensiona una columna.


flush:

[tipo: boolean] [por defecto: false] [versión: 1.3]



Este parámetro solo aplica cuando postbackSafe está activado. Su propósito es borrar los datos previamente almacenados sobre los anchos de cada columna definidos manualmente por el usuario para que al refrescar el navegador o ejecutar un postback las columnas regresen a su estado originario.


marginLeft:

[tipo: string / null] [por defecto: null] [versión: 1.3]



Permite modificar el margen lateral izquierdo a aplicar al grupo de pivotes de redimensionamiento. Esta opción solo es relevante cuando la tabla sobre la que se aplica contiene márgenes definidos explícitamente, en cuyo caso su valor será el mismo que el empleado para la tabla, por ejemplo "auto", "20%" o "50px". El motivo por el cual este parámetro es requerido cuando se define un margen para la tabla radica en la imposibilidad de acceder directamente mediante JavaScript a las reglas CSS aplicadas a un elemento en su unidad de medida original (%, em, valores "auto" etc). Curiosamente únicamente IE lo permite de manera sencilla sin tener que deducirlo interpretando manualmente las hojas de estilo del documento.


marginRight:

[tipo: string / null] [por defecto: null] [versión: 1.3]



Actúa del mismo modo que el parámetro previamente mencionado pero en este caso aplica al margen lateral derecho.


fixed:

[OBSOLETO: emplear 'resizeMode'] [tipo: boolean] [por defecto: true] [versión: 1.5]



Es utilizado para definir como funciona el mecanismo de redimensión. En modo fixed redimensionar una columna no altera el tamaño total de la tabla, lo cual implica que al incrementar una columna la siguiente se contrae. Si fixed se establece en false cada columna se puede contraer o expandir independientemente alterando el tamaño total de la tabla.


Eventos

onResize:

[tipo: callback function] [por defecto: null] [versión: 1.0]



Cuando se define una función callbak para este evento, será invocada cada vez que el usuario haya terminado de modificar la distribución de columnas de una tabla. Desde la función delegada se podrá obtener una referencia a la tabla específica que fue actualizada a través del atributo currentTarget del evento capturado por parámetros.


onDrag:

[tipo: callback function] [por defecto: null] [versión: 1.1]



Este evento se gatilla mientras el usuario redimensiona una columna únicamente si liveDrag está activado. Es de especial utilidad cuando se emplea como slider. La función callback puede obtener una referencia a la tabla a la que se refiere a través del atributo currentTarget del evento capturado por parámetros.


Ejemplos

Ejemplo de atributos y eventos



En el siguiente ejemplo, los separadores de columnas han sido personalizados para visualizarse con una apariencia definida por el usuario. Ello puede lograrse mediante la definición de un fragmento de HTML que será insertado en cada separador de columnas y utilizando algunas reglas de CSS que permitan definir su aspecto visual. También se puede definir la clase CSS que será asignada mientras se arrastra una columna para cambiar su apariencia durante el proceso.

En el ejemplo, también se ha definido un callback para capturar cuando se produce un cambio en la dimensión de las columnas.


headerheaderheader
cellcellcell
cellcellcell
cellcellcell



$(function(){
  
  var onSampleResized = function(e){  
    var table = $(e.currentTarget); //tabla redimensionada
  };  

 $("#sample").colResizable({
    liveDrag:true,
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging", 
    onResize:onSampleResized
  });    
  
});


Persistencia tras refrescar la página o postBack



colResizable también soporta opcionalmente la persistencia de los tamaños de columna tras actualizar la página:


headerheaderheader
cellcellcell
cellcellcell
cellcellcell



var postbackSample = function(){
	$("#updatePanelSample").colResizable({
		liveDrag:true, 
		postbackSafe:true,
		partialRefresh:true
	});	
}

var fakePostback = function(){
	//simulate postback here 
	setTimeout(function(){
		//on postback over
		onPostbackOver();
	}, 700);
};

var onPostbackOver = function(){
	postbackSample();
};


Tablas líquidas (basadas en tamaños porcentuales)



En el siguiente ejemplo, se muestra la que posiblemente sea la característica principal de este plugin: la capacidad de trabajar correctamente tanto con tablas cuyo tamaño ha sido definido en píxeles, como en porcentaje. De esta manera, y puesto que redimensionar una columna no afecta al tamaño total de la tabla, si el elemento contenedor es redimensionado la tabla se adaptará según lo esperado. Para comprobarlo, arrastre de la esquina inferior derecha.


headerheaderheaderheader
cellcellcellcell
cellcellcellcell
cellcellcellcell


Redimensionamiento de tipo 'flex'



Estableciendo el parametro resizeMode en 'flex' se establece que cada una de las columnas puede cambiar su tamaño independientemente haciendo crecer o encojer la tabla a la que pertece, siempre y cuando no se excedan las dimensiones establecidas por el contenedor padre.


headerheaderheader
cellcellcell
cellcellcell
cellcellcell


$("#flexSample").colResizable({resizeMode:'flex'});


Redimensionamiento de tipo 'overflow'



Permite redimensionar las columnas independientemente variando el tamaño de la tabla que lo contiene. Se permite overflow con respecto al contenedor padre, con lo cual podría ser necesario agregar un scroll horizontal.


headerheaderheader
cellcellcell
cellcellcell
cellcellcell


$("#overflowSample").colResizable({resizeMode:'overflow'});


Selector de rangos múltiples



colResizable permite ser utilizado como selector de rangos múltiples, pudiendo personalizar ampliamente su apariencia. En el ejemplo a continuación se muestra un hipotético control que permite al usuario seleccionar su ingesta promedio de ciertos tipos de alimentos para valorar sus habitos alimenticios:




También es posible visualizarlo de una manera más tradicional empleando el atributo gripInnerHtml para personalizar la apariencia de los elementos pivote. Los valores porcentuales asociados a cada rango pueden ser calculados fácilmente comparando el tamaño de cada columna con el tamaño total disponible en la tabla, como se muestra a continuación:


Rangos: 25%, 25%, 25%, 25%




$("#sample5").colResizable({
	liveDrag:true, 
	draggingClass:"rangeDrag", 
	gripInnerHtml:"<div class='rangeGrip'></div>", 
	onResize:onSlide,
	minWidth:8
});	


var onSlider = function(e){
	var columns = $(e.currentTarget).find("td");
	var ranges = [], total = 0, i, s = "Rangos: ", w;
	for(i = 0; i<columns.length; i++){
		w = columns.eq(i).width()-10 - (i==0?1:0);
		ranges.push(w);
		total+=w;
	}		 
	for(i=0; i<columns.length; i++){			
		ranges[i] = 100*ranges[i]/total;
		carriage = ranges[i]-w
		s+=" "+ Math.round(ranges[i]) + "%,";			
	}		
	s=s.slice(0,-1);		
	$("#sample5Text").html(s);
}


También es posible destacar un rango si únicamente se requiere obtener las dimensiones de uno de los sectores del slider. Para ello será suficiente con aplicar un estilo distintivo para la columna (o columnas) que nos interese destacar, como se muestra en el ejemplo:



Rango seleccionado: 50.0% comienza en: 25.0%




var onSlide = function(e){
    var columns = $(e.currentTarget).find("td");
    var ranges = [], total = 0, i, w;
    for(i = 0; i<columns.length; i++){
        w = columns.eq(i).width()-14 - (i==0?1:0);				
        ranges.push(w);
        total+=w;
    }		 
    for(i=0; i<columns.length; i++){			
        ranges[i] = 100*ranges[i]/total;											
    }		   			
    $("#text").html("Rango seleccionado: " ranges[1]+ "%");
}

Descargar


VersiónHistorial de cambiosDescargarFuente
Versión 1.6Historial de cambios 1.6
Versión 1.5Historial de cambios 1.5
Versión 1.4Historial de cambios 1.4
Versión 1.3Historial de cambios 1.3
Versión 1.2Historial de cambios 1.2
Versión 1.1Historial de cambios 1.1
Versión 1.0Liberada versión 1.0

Licencia

colResizable puede ser utilizado tanto en proyectos personales como comerciales. El código fuente también es proporcionado con fines educativos y para permitir modificaciones concretas. En ambos casos, tanto si es utilizado como modificado, será necesario incluir una referencia a su autor, citando su nombre completo y referencia al plugin original.

colResizable se distribuye bajo las licencias MIT y GPL.

Créditos

colResizable ha sido desarrollado íntegramente por Álvaro Prieto Lauroba en el 2011. No dude en contactarme si necesita más información.

Agradecimientos

Agradecimientos a Patricia Laborda Rubio por ser la mejor, a Bacu-Bacu y a todo el equipo de desarrollo de jQuery.

Acceso rápido