Saltar al contenido principal

Droptables : Mesa de estilo

1. Formato en tabla

En la barra de herramientas, puede configurar 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.

 

formato de tabla

 

La altura de la fila y el ancho de la columna se pueden definir en píxeles. Vaya a Formato de menú > Aplicar tamaño de columna/línea y luego seleccione Cambiar tamaño de columna/Cambiar tamaño de fila . En la ventana emergente, puede seleccionar el rango y establecer px para columnas o filas. Haga clic en Listo para finalizar.

 

tamaño de fila-columna

 

 

2. Opciones de tema y clasificación

En cada tabla, puede encontrar de selección de Tema en Menú Tema . Simplemente haga clic en un tema para aplicarlo.

 

selección de temas

 

Si ya tiene datos en su tabla y aplica un tema, se eliminarán todos los datos. Si aplica un tema en una nueva tabla, se agregarán datos y estilos de ejemplo, que podrán editarse.

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

 

color alternativo

 

El parámetro ordenable le permite realizar la clasificación de datos AJAX en la interfaz. Puede verlo en Formato de menú > Ordenar .

 

tabla clasificable y de filtro

 

La alineación de la tabla consiste en alinear el div que contiene toda la tabla, centrar toda la tabla, por ejemplo. Puede encontrarlo en Formato de menú > Alineación de tabla .

 

alineación de mesa

 

También está disponible como opción un resaltado de celda. Puede habilitar las opciones Línea, Columna o Ambas en la configuración . Está deshabilitado de forma predeterminada. Puede ajustar el color y la opacidad del resaltado.

 

resaltado de tabla

 

3. Agregar información sobre herramientas en las celdas

También está disponible una información sobre herramientas al desplazar el mouse de la celda (debe activarse desde las opciones del componente). En cada celda de una tabla, puede ver la opción Información sobre herramientas al hacer clic derecho sobre ella.

 

información sobre herramientas de celda de tabla

 

Puede establecer el ancho de la información sobre herramientas en píxeles. Le llevará a una información sobre herramientas con un editor para editar.

 

editor de información sobre herramientas

 

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

 

información sobre herramientas

 

4. Administración de ACL y frontend

Es posible gestionar sus tablas desde la interfaz de Joomla. Desde el administrador de menús de Joomla, agregue un elemento de Menú nuevo y seleccione como tipo Administrar tablas y seleccione Droptables - Predeterminado como plantilla.

 

menú- droptables

 

Esto es lo que puede ver Droptables Manager desde la interfaz.

 

Droptables -frontend

 

Nota: Para mostrar la interfaz del administrador de tablas con pantalla completa en la interfaz, debe elegir Estilo de plantilla > Droptables .

 

Puede usar la ACL del grupo de usuarios de Joomla para controlar las acciones de edición de la tabla. Primero, para configurar quién puede ver las tablas, debe ir a Roles de usuario en la Droptables .

 

edición de mesa frontend

 

Puede configurar el propietario de una mesa desde Menú Mesa > Acceso a mesa.

 

user-group-acl

 

5. Congelación de filas y columnas

Congelación de columna

La congelación de columnas está disponible en Formato de menú > Opciones de respuesta . Puede congelar hasta 5 columnas. Se cuenta desde la primera col.

 

congelar la columna

 

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

 

altura de la mesa

 

Cuando haya elegido la columna para congelar, podrá desplazarse por su tabla y mostrar siempre la columna fija.

 

visualización de línea fija

 

Congelación en hileras

Puede encontrarlo en Formato de menú > Encabezado de tabla , desde aquí puede activar la opción y configurar las filas para congelar (hasta 5 filas).

 

encabezado-tabla-congelación-fila

 

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

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

 

congelar fila

 

6. Filtrado de datos de columna

Hay una opción de filtrado disponible en Formato de menú > Filtros . Puede activarlo haciendo clic para habilitar los campos de filtrado de datos públicos.

 

filtro de clasificación

 

Ejemplo de filtros:

 

filtro de datos

 

7. Relleno de celda y radio de borde

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

 

borde de relleno

 

 

8. CSS personalizado

Vayamos un paso más allá. Si es diseñador web y tiene conocimientos de edición de CSS, podrá agregar CSS en Formato de menú > CSS personalizado .

 

CSS personalizado

 

Las celdas, filas y columnas tienen coordenadas para identificar cada una y aplicarle CSS personalizado. R es fila, C es columna. Aquí está la fila 1 (r1), columna 4 (c4) = dtr1 dtc4

 

coordenadas-css

 

El código CSS se colorea usando código espejo. El código CSS puede ser menos código, ¡también funciona!

 

css-custom-table

 

9. Tablas receptivas de Joomla

¿Mis tablas responden o usan el desplazamiento en dispositivos pequeños?

Ocultar columnas

Droptables maneja el diseño receptivo con una herramienta de prioridad, como opción. De forma predeterminada, la función de respuesta está deshabilitada, habrá un desbordamiento (aunque funciona muy bien en dispositivos móviles). Para utilizar Ocultar columnas , debe ir a Formato de menú > Opciones de respuesta.

 

col-ocultante-responsiva

 

El modo de respuesta es avanzado, puede definir una prioridad para ocultar columnas en tamaños móviles.
Cuando las columnas están ocultas, se mostrará un menú móvil con una casilla de verificación para forzar la visualización/ocultación de las columnas. El tamaño de la columna se fija durante la edición de la tabla. Si el tamaño de todas las columnas es demasiado grande para el contenedor, tendrá un desbordamiento y podrá desplazarse fácilmente en dispositivos móviles.

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

 

desplazamiento de tabla responsivo

 

Tabla con columna oculta (mejor para una gran cantidad de columnas)

 

responsive-table-cololumn-hide

 

Encabezado repetido

Esta es otra opción si desea insertar una tabla en un área pequeña de su sitio. Debes navegar hasta Formato de menú > Opciones de respuesta. Luego seleccione Tipo responsivo > Encabezado repetido.

 

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 de respuesta (px): cuando se activa el modo de respuesta, según el valor del punto de interrupción, defina una altura máxima para evitar una tabla muy larga
  • Estilo de modo de respuesta: aplique un estilo predeterminado para este modo de respuesta o use los colores de la tabla

Después de eso, puede ver cómo se verá la tabla en la interfaz.

 

interfaz-encabezado-repetido

 

10. Descargar tabla

Para compartir su tabla con el público, navegue hasta Tabla de menú y marque la botón Exportar Excel . El tipo de archivo será *.xlsx cuando se descargue en la interfaz.

 

exportar-excel

 

11. Paginación

Puede encontrar esta función en Formato de menú > Paginación en cada edición de tabla. Utilice el botón de alternancia para habilitar y elegir el número de filas que se mostrarán en una página.

 

opción de paginación

 

12. Formato para celdas individuales 

Puede configurar el formato: fecha y hora, monedas, número de celdas individuales en Droptables . Primero, debe seleccionar una o varias celdas. Luego vaya a Formato de menú > Fecha y hora.

 

celdas de fecha y hora

 

Después de eso, las monedas y el número se pueden hacer de la misma manera.

 

13. Imprimir tabla en la interfaz

A veces, necesitas imprimir tu tabla. Entonces, para mostrar el botón Imprimir en la interfaz, primero debe navegar a la Tabla de menú y marcar del botón Imprimir .

 

botón de impresión