Droptables: Mesa de estilo

1. Formato en tabla

En la barra de herramientas, puede establecer el estilo de la celda, como: fuente, tamaño de fuente, estilo de texto, color de fondo de la celda, color del texto, alineación horizontal y vertical de la celda,... Se puede aplicar a una sola celda o a varias celdas.

La altura de las filas y el ancho de las columnas se pueden definir en píxeles. Vaya al menú Formato > Aplicar tamaño de columna/líneay seleccione Cambiar tamaño de columna / Cambiar tamaño de fila. En la ventana emergente, seleccione el rango y establezca los píxeles para las columnas o filas. Haga clic en Listo para finalizar.

2. Tema y opciones de clasificación

En cada tabla, puedes encontrar de selección de tema en el menú Tema. Simplemente haz clic en un tema para aplicarlo.

En el mismo menú Tema > Colores alternativos, la función "Estilo automático" te ayuda a colorear la línea de tu tabla con para el encabezado y el pie de página . Puedes seleccionar los estilos de la plantilla o crear los tuyos propios en la configuración del plugin.

El parámetro sortable te permite realizar la ordenación de datos AJAX en el frontend. Puedes verlo en el menú Formato > Ordenar.

La alineación de tabla consiste en alinear el div que contiene toda la tabla, por ejemplo, centrarla. Puedes encontrar esta opción en el menú Formato > Alinear tabla.

También está disponible como opción el resaltado de celdas. Puede activar las opciones Línea, Columna o Ambas en la configuración. Está desactivado por defecto. Puede ajustar el color y la opacidad del resaltado.

3. Agregar información sobre herramientas en las celdas

También está disponible una información sobre herramientas al pasar el ratón sobre la celda (se activa desde las opciones del componente). En cada celda de una tabla, puede ver la de información sobre herramientas al hacer clic derecho sobre ella.

Puedes configurar el ancho de la información sobre herramientas en píxeles. Esto te llevará a una información sobre herramientas con un editor para editar.

Agregue contenido y guárdelo, listo, la información sobre herramientas se mostrará en el lado público al pasar el mouse.

4. Administración de ACL y frontend

Puedes gestionar tus tablas desde la interfaz de Joomla. En el gestor de menús de Joomla, añade un elemento de menú nuevo , selecciona " Administrar tablas" como tipo y selecciona Droptables - Predeterminado" como plantilla.

Esto es lo que puedes ver en Droptables Manager desde el frontend.

Puedes usar la ACL de grupo de usuarios de Joomla para controlar las acciones de edición de tablas. Primero, para configurar quién puede ver las tablas, ve a "Roles de usuario" en Droptables .

Puedes establecer el propietario de una tabla desde el menú Tabla > Acceso a la tabla.

5. Congelación de filas y columnas

Congelación de columnas

La opción de congelar columnas está disponible en el menú Formato > Opciones de diseño adaptable. Puede congelar hasta 5 columnas. El conteo comienza desde la primera columna.

Para congelar columnas y filas, hay una opción adicional que le permite fijar la altura de la tabla (porque su contenedor de tabla puede tener una altura infinita).

Cuando hayas elegido la columna que deseas congelar, podrás desplazarte por la tabla y mostrar siempre la columna fija.

Congelación de filas

Puedes encontrarlo en el menú Formato > Encabezado de tabla; desde aquí puedes activar la opción y configurar las filas que deseas congelar (hasta 5 filas).

Si desea configurar la altura de la mesa, vuelva a las opciones de respuesta.

Luego, la primera fila se congelará en el frontend siguiendo la configuración.

6. Filtrado de datos de columnas

En el menú Formato > Filtros, encontrará una opción de filtrado . Para activarla, haga clic para habilitar los campos de filtrado de datos públicos.

Ejemplo de filtros:

7. Relleno de celda y radio del borde

Puede encontrar el icono de borde en la barra de herramientas que ayuda a ajustar el relleno y el radio del borde en la celda.

8. CSS personalizado

Vamos a ir un paso más allá. Si eres diseñador web y tienes conocimientos de edición CSS, podrás añadir CSS en Menú Formato > CSS personalizado. 

Las celdas, filas y columnas tienen coordenadas para identificarlas y aplicarles CSS personalizado. R representa la fila y C la columna. En este caso, la fila 1 (r1) y la columna 4 (c4) corresponden a dtr1 dtc4.

El código CSS se colorea usando un espejo de código. El código CSS puede tener menos código, ¡y funciona!

9. Tablas Joomla responsivas

¿Mis tablas son responsivas o utilizan el desplazamiento en dispositivos pequeños?

Ocultar Cols

Droptables gestiona el diseño adaptable con una herramienta de prioridad, como opción. Por defecto, la función adaptable está desactivada, lo que provoca un desbordamiento (aunque funciona perfectamente en dispositivos móviles). Para usar Ocultar columnas , ve a Menú Formato > Opciones adaptables.

El modo adaptable es avanzado; puedes definir una prioridad para ocultar columnas en dispositivos móviles. Cuando las columnas están ocultas, se mostrará un menú móvil con una casilla de verificación para forzar su visualización u ocultación. 
El tamaño de las columnas se fija durante la edición de la tabla. Si el tamaño de todas las columnas es demasiado grande para el contenedor, se producirá un desbordamiento y podrás desplazarte fácilmente en dispositivos móviles.

Tabla con desplazamiento (mejor para una pequeña cantidad de columnas)

Tabla con columnas ocultas (mejor para una gran cantidad de columnas)

Encabezado repetido

Esta es otra opción si desea insertar una tabla en un área pequeña de su sitio web. Debe ir a Formato de menú > Opciones de diseño adaptable.  Luego, seleccione Tipo de diseño adaptable > Encabezado repetido.

Habrá opciones para personalizar según su demanda:

• Punto de interrupción responsivo (px): seleccione un valor de punto de interrupción en píxeles para definir cuándo la tabla cambiará a este modo responsivo
• Altura máxima responsiva (px): cuando se activa el modo responsivo, dependiendo del valor del punto de interrupción, define una altura máxima para evitar una tabla muy larga
• Estilo de modo responsivo: aplique un estilo predeterminado para este modo responsivo o use los colores de la tabla

Después de eso, podrás ver cómo se verá la tabla en el frontend.

10. Descargar tabla

Para compartir su tabla, vaya al menú Tablay marque la "Exportar Excel" . El formato del archivo será *.xlsx al descargarlo en la interfaz.

11. Paginación

Esta función se encuentra en el menú Formato > Paginación de cada edición de tabla. Utilice el botón de alternancia para activarla y seleccione el número de filas que se mostrarán por página. 

12. Formato para celdas individuales 

Puedes configurar el formato: Fecha y hora, Monedas, Número para celdas individuales en Droptables. Primero, debes seleccionar una o varias celdas. Luego ve al menú Formato > Fecha y hora.

Después de esto, las Monedas y Números se pueden hacer de la misma manera.

13. Imprimir tabla en la interfaz

A veces, necesitas imprimir tu tabla. Para que aparezca el botón "Imprimir" en la interfaz, primero debes ir al menú "Tabla" y marcar "Imprimir" .