Documentación Droptables

 

Introducción

Droptables es una extensión de Joomla que se usa para administrar tablas HTML en Joomla con una interfaz similar a una hoja de cálculo.

Droptables-tabla-extensión

Principales características:

  • Gestionar tablas como en una hoja de cálculo.
  • 6 temas incluidos
  • Totalmente gestionado desde cualquier editor.
  • Sincronización de Excel y Google Sheets
  • Ahorro automático AJAX
  • Datos ordenados en el frontend
  • Celular, línea, editor de estilo de columna
  • Copiar celda con arrastrar y soltar
  • Copia la tabla completa en un clic
  • Formato de celdas HTML
  • Editor de código CSS avanzado

 

I. INSTALACIÓN DROPTABLES

1.1 Instalar

Nuestro componente es compatible con Joomla 3.x. Todas las características y las integraciones de terceros se incluyen en todas las membresías.
Para instalar nuestro componente, debe descargar la extensión .zip y usar el instalador estándar de Joomla.

joomla-install

 

Luego, haga clic en Examinar> Botón Cargar e instalar, los componentes, módulos y complementos se instalarán activados de forma predeterminada.

 

1.2 Actualización y actualizador automático

Para actualizar la extensión, puede instalar una nueva versión sobre la anterior descargando el archivo ZIP de JoomUnited o utilizar el actualizador automático (recomendado).

Droptable-actualización

El actualizador automático, que envía la notificación de actualización, está integrado en la extensión de Joomla que ha instalado. Por lo tanto, recibirás una notificación como cualquier otra extensión en el panel o mediante el menú: Extensión> Gestionar> Actualizar menú.

Inicie sesión en su cuenta para actualizar

Debe iniciar sesión en su cuenta de JoomUnited para actualizar todas las extensiones de JoomUnited de Joomla. Para iniciar sesión acceda a la configuración principal del componente y haga clic en Pestaña de actualización en vivo. En la parte inferior, encontrarás un botón de inicio de sesión.

actualización en vivo

 

Ingrese sus credenciales de JoomUnited, las mismas que usa para iniciar sesión aquí @ www.joomunited.com

login-joomunited

 

El botón se pondrá naranja, felicidades! ¡Ahora puede actualizar todas las extensiones de JoomUnited en este sitio web! Si su membresía ha caducado, recibirá un enlace de renovación y un texto que lo explicará.

vinculado a la cuenta

Nota: un solo inicio de sesión le permitirá actualizar todas las extensiones de JoomUnited (con respecto a su membresía). El inicio de sesión no caducará a menos que lo desconectes.

II. GESTIONAR TABLAS

2.1 Gestionar tablas desde artículo o componente

Cuando Droptables está instalado, tiene una entrada de componente, menú Componentes> Droptables y un botón editor que se muestra debajo de su editor. Haz clic en él para abrir la vista principal de Droptables.

droptables-editor

 

La interfaz del administrador de tablas se abre en una caja de luz desde el editor:

droptables-lightbox-open

 

Cuando quiera insertar una tabla en su editor, use el botón superior derecho Insertar esta tabla para ponerlo en tu articulo. Luego, la tabla se materializará con un área gris y un ícono similar a Excel.

tabla en el editor

 

Si hace clic en el área y luego en el botón Droptables nuevamente, se cargará la tabla agregada previamente.

 

2.2 Gestionar tablas y categorías

Las tablas se clasifican en categorías. Puedes tener tantas tablas como quieras dentro de las categorías. Para crear una categoría de tabla, haga clic en Nueva categoría de mesa en el centro superior. Para crear una nueva tabla simplemente haga clic en Crear mesa.

categorías de mesa

 

Nota: una categoría y una tabla predeterminadas ya se crearon durante la instalación del componente. Puede mover tablas y categorías de tablas con arrastrar y soltar.

movimiento de mesa

 

La categoría puede administrarse colocando el mouse sobre ella, podrá editar el nombre, copiar o eliminar la tabla.

nombre de la tabla

 

2.3 edición de la mesa

Para agregar datos en tablas, debes actuar como si estuvieras en un plan de cálculo. Hacer doble clic en una celda le brindará la posibilidad de actualizar el contenido, un solo clic para seleccionar una / algunas celdas (y para aplicar el estilo, por ejemplo).

edit-cell

Para agregar líneas o columnas, haga clic en el + en el borde de la tabla:

agregar tabla de líneas

 

O utilice el botón derecho.

clic derecho-agregar

 

Para copiar celdas, puede usar CTRL + C / CTRL + V o también puede colocar el mouse en la esquina inferior derecha de la celda y colocarlo en la dirección que desee.

copia-celda

 

Nota: todas las modificaciones se guardan instantáneamente automáticamente con un mensaje en la parte superior derecha. Tiene una opción para deshabilitar esta característica desde el Droptables> Opciones

tabla de guardado

 

 

Desde el menú que aparece al hacer clic con el botón derecho, puede deshacer las últimas modificaciones, todas las más recientes desde que recargó la página. Droptables guarda una copia de seguridad de la modificación que ha realizado y es capaz de restaurarla.

deshacer-acción

Las células también pueden ser fusionadas. Seleccione 2 celdas o más y luego haga un clic derecho. Un menú le permitirá hacer la fusión.

 

2.4 Edición de contenido avanzado

Recientemente hemos agregado una nueva característica en la interfaz de edición. Ahora puede agregar contenido HTML con un editor WYSIWYG dentro de cada celda. Seleccione una celda, en la parte derecha, vaya a la pestaña Formato> HTML

html-cell

 

Ahora cuando edites la celda, tendrás un editor HTML dentro. También incluye todo el botón de contenido del editor, aquí utilicé el botón de imagen, por ejemplo. Los botones del editor disponibles son configurables como una opción.

botón de editor

 

 

2.5 Excel y hoja de cálculo de importación / exportación

 

Puede importar y exportar hojas de cálculo en Droptables utilizando nuestra herramienta dedicada. Debe activarse desde la configuración: Componentes> Droptables> Opciones

excel-import

 

Las tablas se pueden importar desde Excel o Open Office. El formato será detectado automáticamente e importado. Tenga en cuenta que solo se importará la primera página de Excel. La exportación se puede realizar en formato Excel 2003 o 2007.

Excel - hoja de importación-exportación

 

También puedes importar o exportar. solo datos de la tabla o datos de tabla + estilos. Los datos de importación solo son muy útiles para conservar el diseño al importar.

 

III. El estilo de las tablas

3.1 Formato

La pestaña de formato está disponible a la derecha de la pantalla de forma predeterminada. Contiene diferentes parámetros de estilo.

 

formato de tabla

  • Tipo de célula: Por defecto o HTML (con editor). El tipo predeterminado le permite realizar cálculos con el HTML insertando contenido HTML como imágenes.
  • El fondo de la celda se trata de definir el color de fondo, por supuesto
  • Opciones de borde y fuente Se puede aplicar en celdas simples o múltiples.
  • La fila y columna de ancho / alto Se puede definir en píxeles. Seleccione la columna o fila en cualquier lugar de la tabla y valide el tamaño.

fila-columna-tamaño

También está disponible una sugerencia sobre el mouse del mouse (debe activarse desde las opciones de componentes). Al hacer clic en el botón de información sobre herramientas, puede editar el contenido visible en el mouse del mouse de la celda en la interfaz.

table-cell-tooltip

 

3.2 Tema y opciones de clasificación

 

En la pestaña de la tabla, aún en la parte derecha, tiene un selector de temas en miniatura. Simplemente haga clic en un tema para aplicarlo. Recomendamos encarecidamente aplicar temas en tablas nuevas, es realmente más fácil cambiar los datos en ese momento.

tema-elección

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

 

Aún en la pestaña de la columna de la derecha de la tabla, el parámetro de marco 2 está aquí para definir el color de las líneas alternativas (línea1, línea2, línea1, línea2 ...)

dos cuadros

 

El parámetro clasificable le permite hacer una clasificación de datos AJAX en el frontend. Tenga en cuenta que si habilita la herramienta de filtro, una herramienta de clasificación de datos se habilitará de forma predeterminada.

mesa clasificable y de filtro

 

  • Usar tabla clasificable: Si no
  • Alinear la mesa: Centro / Derecha / Izquierda / Ninguno
  • Tipo de respuesta: Colgantes de desplazamiento / ocultación
  • Habilitar filtros: Si no
  • Habilitar paginación: Si no
  • Numero de filas por página: 10, 20, ...
  • Ordenar una columna por defecto: seleccione las columnas A, B o C, ...
  • Ordenar una columna por defecto: ASC / DESC

Filtro de datos y clasificación en frontend

filtro de datos

La alineación de la tabla se trata de alinear el div que contiene la tabla completa, centrar toda la tabla, por ejemplo. Las opciones de congelación de columnas y líneas congelarán la selección y permitirán un desplazamiento en el resto.

congelación de línea

 

¿Hacer que mis tablas respondan o usar el desplazamiento en dispositivos pequeños?

Droptables maneja el diseño responsivo con una herramienta de prioridad, como una opción. De forma predeterminada, la función de respuesta está deshabilitada, habrá un desbordamiento (aunque, aunque funciona bien en dispositivos móviles).

modo de respuesta

 

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 la 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.

Mesa con un pergamino (mejor para una pequeña cantidad de columnas)

responsive-table-scroll

 

Mesa con columna oculta (mejor por una gran cantidad de columnas)

responsive-table-cololumn-hide

 

Una luz de celda también está disponible como una opción. Puede habilitar esta característica en el configuración. Está deshabilitado por defecto. Puede ajustar el color y la opacidad de resaltar.

resaltado de mesa

 

3.3 Administración de ACL y Frontend

Es posible administrar sus tablas desde la interfaz de Joomla. Desde el gestor de menú de Joomla, añadir un nuevo menú elemento y seleccione como tipo Administre tablas y seleccione la interfaz Droptables como plantilla.


menu-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 frontend.

 

Puede utilizar 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 habilitar la función Habilitar el acceso a la tabla (ACL) en la configuración de Droptables.

frontend-table-edition

 

Además, puede controlar la visibilidad de la mesa para cada tabla desde la configuración de la tabla (Más pestaña). Seleccione un grupo de usuarios de Joomla para permitir que un grupo vea la tabla en el frontend.

user-group-acl

 

3.4 CSS personalizado

Vayamos un paso más allá. Si eres un diseñador web con habilidades de edición CSS, podrás agregar css desde la pestaña Más derecha.

Puede agregar relleno y radio de borde en la celda.

relleno-css

 

Las celdas, las líneas y las columnas tienen coordenadas para identificar cada una y aplicar un 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 está coloreado usando el código espejo. El código css puede ser menos código, ¡también funciona!

css-custom-table

 

 

IV. TABLA DE TABLAS

4.1 Crear una tabla con datos.

Puede generar gráficos a partir de datos de tabla, dentro de su contenido. Primero crea una tabla con datos para generar el gráfico.

La tabla no tiene que mostrarse con el gráfico en su contenido y puede generar varios gráficos a partir de una sola tabla.

 

Luego haz tu selección para generar el gráfico. Aquí, toda la tabla está seleccionada.

tabla de tablas

 

Luego haga clic en agregar un nuevo gráfico. Se generará un gráfico, respetando el rango de datos que ha seleccionado. En la parte derecha puede seleccionar el tipo de gráfico.

generar-gráfico

 

El gráfico se actualizará dinámicamente con respecto al cambio de datos en la tabla, no es necesario que se regenere.

 

4.2 Parámetros del gráfico

Una vez que haya agregado su gráfico, tiene algunas opciones en la columna de la derecha.

configuración de gráficos

 

los Cambiar fila / columna solo está disponible si ha seleccionado solo números en el conjunto de datos. Se le permitirá cambiar los datos de las columnas a la fila.

los Use la primera fila / columna como etiquetas parámetro le permite agregar etiqueta a su gráfico.

carta-titulos

 

Luego tiene opciones para establecer el ancho / alto, alinear, el color de su gráfico.

 

V. PARÁMETROS Y TRUCOS DROPTABLES

5.1 Parámetros

Para acceder a los parámetros globales de Droptables, vaya a Componente> Droptables> Opciones

droptables-paramaters

 

En las opciones, puede definir:
 

  • Las categorías de la mesa de acordeón de cierre automático.
  • Habilitar la importación / exportación de Excel
  • Elija el formato de exportación

droptable-settings2

 

  • Habilitar la información sobre herramientas en las celdas
  • Habilitar el guardado automático en AJAX, de lo contrario tendrás un Botón Guardar modificaciones
  • Habilitar el acceso a la tabla: Habilitar la limitación de acceso a la tabla (ACL). Le permite limitar los permisos de edición de tablas según los grupos de usuarios de Joomla
  • Resaltado de celdas: Active un color en la celda con el mouse sobre para ver a primera vista el contenido de una celda (Sólo en línea / Sólo en columna / Ambos)
  • Color de relieve: La celda resaltando color de hover
  • Resalte el color de la fuente: La celda de resaltado de la fuente para desplazar el color
  • Resaltando la opacidad: La celda resaltando el nivel de opacidad.
  • Habilitar panel derecho oculto: Si no
  • Periodicidad de sincronización de tablas: Retardo de sincronización automática de la tabla para archivo Excel o Google Sheets
  • Habilitar tabla de base de datos: Si no

 

5.2 permiso ACL

Una integración de Joomla ACL está disponible. Ahora puede restringir el acceso a la acción o la tabla para los editores de tablas. Esta restricción se aplica en todas las tablas.

mesas de acceso

 

Por ejemplo, si desea que un usuario administrador acceda y edite solo sus propias tablas, configure "editar" en negado y edite en "Permitido". También puede restringir:

  • La configuracion global
  • La interfaz de acceso
  • La creación de tablas.
  • La eliminación de tablas
  • Edición / edición propia
El usuario superadministrador siempre tendrá todos los permisos de edición para todas las tablas y categorías.

 

5.3 Cargar tablas en un módulo HTML personalizado

Droptables está diseñado para ser utilizado en todos los campos del editor WYSIWYG, solo necesita tener el complemento de contenido para ser llamado. La mayoría de las veces se activa de forma predeterminada.

Si no es el caso, como en el módulo personalizado de Joomla HTML, debe activarlo como arriba.

tabla en módulo

 

En la pestaña de opciones necesitas configurar la opción Preparar contenido para: Sí

 

5.4 Cálculo

Tienes una implementación de cálculo básica en Droptables. Los elementos disponibles son:

  • SUM, COUNT, CONCAT
  • MÍNIMO MÁXIMO PROMEDIO
  • FECHA, DIA, DIAS, DIAS360
  • O, xor, y

Para hacer una suma, escriba así en una celda (MAYÚSCULAS es obligatorio): = SUMA (A1; B2) o = SUMA (A1: B2)

Y puede configurar el símbolo para el cálculo de celdas en número, dinero o fecha.

calcular ajustes

 

  • Formatos de fecha: Establecer formato de fecha para cálculos de fecha
  • Posición del símbolo: Para hacer un cálculo de celda en el dinero, defina la posición predeterminada del símbolo de moneda
  • Símbolo (s) de moneda: Para hacer un cálculo de celda en dinero, defina el símbolo de moneda predeterminado
  • Símbolo decimal: Para hacer un cálculo de celda, defina el símbolo decimal predeterminado
  • Conteo decimal: Número de dígitos después del símbolo decimal
  • Mil símbolo: Para hacer un cálculo de celda, defina el símbolo de mil predeterminado

VI. EXCEL Y HOJAS DE GOOGLE SYNC

6.1 sincronización de archivos de Excel

Es posible ejecutar una sincronización entre una tabla que ha creado y un archivo de Excel ubicado en su servidor (en cualquier lugar). Desde la pestaña derecha llamada "Tabla", en la parte inferior tienes un bloque para vincular un archivo de Excel a la tabla.

Sync-Excel-Choice

Al hacer clic en el Botón de navegación, podrá seleccionar un Excel en cualquier lugar de su servidor, aquí se trata de un archivo cargado a través del administrador de medios (/ carpeta de imágenes).

archivo-examinar-excel

 

Una vez que su archivo de Excel esté vinculado a la tabla, puede golpear el Botón para obtener datos para importar datos desde el archivo de Excel.

fetch-excel-data

 

Nota: solo se tomarán los datos de Excel, no los estilos, por lo que el estilo global de su tabla permanecerá intacto en la importación.

 

Advertencia: dependiendo de la memoria disponible en su servidor, no podrá importar archivos de Excel muy grandes (por ejemplo, más de 1000 filas).

 

6.2 Sincronización con Google Sheets

Droptables ofrece una posibilidad de sincronización de Google Sheets. Sus hojas de Google deben ser " publicado en la web"para sincronizar. Primero, abra su hoja de Google Drive y publíquela como página web usando el menú Archivo.

publicar en la web

 

Luego, obtendrá acceso al enlace del archivo de Google Sheets, copie este enlace.

enlace publicado

 

Y pegarlo en Droptables pestaña "Tabla". Has terminado Ahora puede obtener datos de sus hojas de Google.

google-sheet-data

 

6.3 Excel automática y Google Sheets sync

Sobre el enlace del archivo también puede activar una sincronización automática de datos. Droptables obtendrá los datos automáticamente en un intervalo regular.

período de sincronización

Una vez que se activa, se muestra una notificación después del título de la tabla.

notificación de sincronización automática

 

El retardo de sincronización se puede configurar en la configuración Droptables.

 

VII. Tablas de la base de datos

 

Droptables le permite crear tablas a partir de las tablas de su base de datos. De la configuración del componente, deberías Habilitar tabla de base de datos.

base de datos config

 

Volver al panel, en primer lugar, usted elige Tabla de la base de datos categoría y luego haga clic Crear mesa , entonces todas las tablas en su base de datos serán listadas abajo. A continuación, podrá seleccionar tablas y columnas de su base de datos. Al pulsar control puedes seleccionar varias tablas, columnas.

selección de base de datos


En la selección de columnas, puede definir un título personalizado y un orden predeterminado para sus datos en la tabla, cuando se muestra en el lado público.

columna-titulo y orden


Luego tienes algunas opciones y filtros para aplicar a tus tablas:

  • Un nivel predeterminado de paginación (para ser utilizado con una gran cantidad de datos)
  • Número de filas para la paginación.
  • Aplicar algún filtro a sus datos, es decir. Una columna puede ser igual, diferente ... de un valor definido.
  • La posibilidad de agrupar algunos valores en las columnas.

base de datos-opción-tabla


Finalmente, puede previsualizar y generar su tabla como cualquier otra tabla. Cuando se genere la tabla, seguirá teniendo acceso al origen de la base de datos de la tabla y, por ejemplo, puede agregar una columna en la tabla.

base de datos generada por tablas

Nota: la única diferencia es que los temas no se pueden aplicar a las tablas, pero puede personalizar toda la visualización como en cualquier otra tabla.