Customizando un JTable, hágalo usted mismo en 5 simples pasos (Leer con la voz de Sprayette)

El objetivo de este artículo es modificar un JTable para que quede totalmente distinto y mejorado. Si no les sirve tal como queda al final, no se preocupen ya que pueden sacar buenas ideas de los pasos intermedios. Empecemos, el objetivo es tranformar:

En…

Manos a la obra (como diría mi abuelo) …

Paso 1:  Modificar el Modelo del JTable JDefaultTableModel

Para no meter mágia y misticismo en esto, vamos a usar directamente el editor de Netbeans. Para ello seleccionamos la Tabla, y en las propiedades buscamos “model” y le damos a los tres puntitos “…” Esto va a abrir un editor muy simple, la idea es dejar sin filas la tabla y con solo dos columnas (para este caso la primera tiene el icono y la segunda tiene el texto).

Deberían configurar algo como esto:

Cuando terminemos ya deberíamos tener nuestra tabla en el siguiente estado:

Paso 2:  Que no se muestre la cabecera del JTable

Esto es muy simple de hacer, pero es por la mayoría desconocido. La idea es que la cabecera (Icono – Texto) esté, pero no se muestre. Para esto seleccionamos el JTable, y buscamos en el cuadro de propiedades “tableHeader” y le damos a los tres puntitos “…“. La idea aca es poner un null como parametro del constructor para esto, dentro del editor, seleccionamos en el combo “Código Personal” y ponemos (null).

Vamos avanzando y seguro ya tenemos algo como ésto:

Paso 3: Creando el Renderizador de las celdas

Este es el “killer step” de la idea, donde la mayoria toma aire, cuenta hasta 10 y tira la compu al patio no sin antes recordar a la madre de los desarrolladores de sun y desear que les pase un Focus por arriba.
Lo que tenemos que hacer es crear una clase que será utilizada para renderizar las celdas, en ella vamos a escribir como se va a mostrar cada una y de que forma. Parece sumamente complicado, salvo que tenemos un As bajo la manga, los jLabel.
El jLabel si tiene algo de bueno es que podemos mostrar un icono/imágen en él, entonces sería buena idea poder hacer que cada celda del JTable sea un jLabel.
El código de esta clase se los dejo a continuación y comentado, luego hago unas breves acotaciones:

/**
 * Descripción:  Un renderizador de celdas de un JTable que pone
 * un jLabel en cada una de las celdas para que se pueda poner
 * un icono/imagen
 * @version 1.0
 * @author Iuga
 * @cambios
 * @todo
 */

public class IconCellRenderer extends DefaultTableCellRenderer
{
/**
 * Acá redefinimos como se muestra, vemos q ahora lo forzamos a
 * trabajar con JLabel, pero si no lo es, por ejemplo un String
 * igual lo muestro llamando a Super
 */
public Component getTableCellRendererComponent (JTable table, Object value, boolean isSelected,boolean hasFocus, int row, int column)
{
if(value instanceof JLabel)
{
JLabel label = (JLabel)value;
           label.setOpaque(true);
fillColor(table,label,isSelected);
return label;
}
else
{
return super.getTableCellRendererComponent(table, value, isSelected, hasFocus, row, column);
}
}

/**
 * Este método es para que pinte el fondo del JLabel cuando
 * lo seleccionamos para que no quede en blanco, desentonando
 * con el resto de las celdas que no son JLabel
 */
public void fillColor(JTable t,JLabel l,boolean isSelected )
{
if(isSelected)
{
l.setBackground(t.getSelectionBackground());
l.setForeground(t.getSelectionForeground());
}
else
{
l.setBackground(t.getBackground());
l.setForeground(t.getForeground());
}
}
}

Como vemos, redefinimos dos métodos de DefaultTableCellRenderer, el primero indica que y como vamos a mostrar la celda (y vemos que trabajamos con JLabel) y el segundo método está atento a los cambios de color para ahcerlo uniforme y que no desentonen los colores.
Ahora lo que resta es pasarle el Rederer al JTable para que use éste en lugar del Default.

jTable1.setDefaultRenderer(Object.class,new IconCellRenderer());

En este punto no tenemos cambios visuales, así que sigamos con el siguiente paso

Paso 4:  Llenando el JTable con datos de Prueba

Ahora a probar el producto terminado. Vamos a cargar algunas filas con datos, vamos con los datos de una sola fila para que se entienda la idea:

Object[] fila = new Object[2];
 ImageIcon icon = new ImageIcon(getClass().getResource("/res/iconos/plantillas/vacio.png"));
 fila[0] = new JLabel(icon);
 fila[1] = "Presupuesto en Blanco";

Como vemos el primer valor del Array es un JLabel con un icono y sin texto. (Nota: Si, podríamos haber hecho una sola columna y que muestre icono y texto al mismo tiempo, pero era para mejorar el ejemplo y demostrar que podemos mezclar JLabels y otros tipos de datos sin complicar el modelo).

Una vez que tenemos los datos solo queda agregarlos al modelo de la tabla:

DefaultTableModel modelo = (DefaultTableModel)jTable1.getModel();
modelo.addRow(fila);

Paso 5: Mejorando la Visual del JTable y la altura de las celdas

Primero tenemos que ajustar, en cada caso, la altura de las celdas de acuerdo al tamaño de los iconos/imágenes que mostremos, así no nos corta la imágen como en el caso anterior.

// Donde 50 es el tamaño que querramos en la celda según lo q necesitemos
jTable1.setRowHeight(50);

Ahora podemos cambiar un poco el tamaño de la tabla para que quede acorde a los datos y el tamaño de las celdas. Para esto nuevamente recurrimos a la facilidad que nos da Netbeans y vamos a otro editor haciendo “click derecho” en la JTable y en “Contenido de la Tabla…” y vamos a la segunda Solapa “Columnas“, en cada una podemos configurar el tamaño mínimo, sugerido y máximo.

Todo lo bueno tiene fin, y este fue el nuestro, ya con esto tenemos nuestro JTable modificado completamente y si seguimos bien los pasos deberíamos tener algo como esto:

Lo que sigue es llenar la tabla con datos a nuestro antojo, poner o sacar columnas, simplemente modificarla a nuestro antojo.

Intente ser lo más claro y lento posible, para que no pase cual libros de análisis matemático con las demostraciones (bueno y estamos demostrando este teorema, y seguimos con este paso, ahora este otro …. un momento!! COMO LLEGO A ESE PASOOOOOO ES IMPOSIBLEEEEE  y Lluvia de puteadas al autor). Cualquier duda q tengan preguntenla y voy a intentar resolverselas. Hasta el proximo tutorial