Tablas de Datos (DataTable)

Las tablas de datos en Dinaup son estructuras de datos eficientes, manipulables mediante scripts. Permiten la organización, manipulación y generación de documentos en formatos como HTML, CSV y JSON,

¿Dónode se pueden crear tablas de datos?

Las tablas de datos están disponibles en los documentos dinámicos.

Casos de uso

Generar un JSON para exponer datos en un webhook.
Generar un JSON para iniciar VUE.js
Generar una tabla HTML para crear una plantilla de impresión. (Ej: Libro registro de facturas emitidas / recibidas)
Generar un CSV.
Generar un XML.

Ejemplo de uso

Consideremos un escenario donde necesitamos gestionar una lista de productos con su respectiva cantidad y precio unitario. Inicialmente, creamos la tabla y definimos sus columnas.

Usaremos las siguientes funciones

F.DataTable_New crea una instancia en memoria para almacenar la tabla de datos, devuelve el ID de la tabla.
F.DataTable_AddRow agrega una fila vacía a la tabla de datos.
F.DataTable_SetValueText asigna un valor de texto a una celda en la última fila agregada.
F.DataTable_SetValueNum asigna un valor numérico a una celda en la última fila agregada.
F.DataTable_SetValueMoney asigna un valor de moneda a una celda en la última fila agregada.

Ejemplo

    txt col_Producto = 'Producto'
    txt col_Cantidad = 'Cantidad'
    txt col_PrecioUnitario = 'Precio Unitario'
    num TablaID = F.DataTable_New(col_Producto, col_Cantidad, col_PrecioUnitario)

Para añadir datos a nuestra tabla, insertamos filas que representen cada producto:

    // Agregar un producto a la tabla
    F.DataTable_AddRow(v.TablaID)
    F.DataTable_SetValueText(v.TablaID, col_Producto, 'Café')
    F.DataTable_SetValueNum(v.TablaID, col_Cantidad, 2)
    F.DataTable_SetValueMoney(v.TablaID, col_PrecioUnitario, 5.00)

Cómo Renderizar

Una vez que la tabla está llena de datos, se puede renderizar en diferentes formatos para su visualización o exportación. A continuación, se muestra cómo renderizar la tabla creada en diferentes formatos:

// Renderizar en HTML
txt tablaHTML = F.DataTable_Build(v.TablaID, 'html|class="table table-striped"')

// Renderizar en CSV
txt tablaCSV = F.DataTable_Build(v.TablaID, 'csv')

// Renderizar en JSON
txt tablaJSON = F.DataTable_Build(v.TablaID, 'json')

Este proceso de renderización convierte la tabla de datos en una cadena en el formato deseado, lista para ser incorporada en documentos HTML, descargada como archivo CSV o utilizada en aplicaciones que consuman JSON.

Formatos disponibles para renderizar tabla de datos

CSV: Genera un archivo con datos separados por comas, ideal para hojas de cálculo o importaciones a bases de datos.
HTML: Produce una tabla HTML permitiendo personalización mediante atributos, adecuado para visualizaciones en páginas web.
JSON: Convierte datos en una estructura JSON estándar con todos los valores como strings, evitando errores de deserialización.
JSONF: Ofrece una representación JSON que mantiene los tipos de datos originales, para desarrollos que requieren precisión en el tipo de dato.

HTML Con VUE

Los documentos dinámicos puede generar HTML y documentos pdf. Una forma que recomendamos para separar la lógica de la interfaz es utilizar VUE.

<script src="https://cdn.dinaup.com/dinaup/link/Vue.js"></script>
<link href="https://cdn.dinaup.com/dinaup/link/bootstrap.min.css" rel="stylesheet">

<!-----  html,head, body.....  ----->

<div id="app">
    
    
    
</div>

<script>
 
    var app = new Vue({
        el: '#app',
        data: {
            "mjson1":  F.DataTable_Build(v.TablaJSON1, 'jsonf')
            "mjson2":   F.DataTable_Build(v.TablaJSON1, 'jsonf')
        }
    });

</script>

Formato avanzado HTML

Cuando una tabla de datos se renderiza a HTML, Dinaup asigna atributos que permiten formatear mediante CSS según el tipo de datos.

HTML: Renderizado de Valores Sí / No

El renderizador de HTML produce este resultado en las celdas tipo Sí / No (bool).

<td data-s="1" data-f="1">Sí</td> <!-- Representa verdadero -->
<td data-s="0" data-f="1">No</td> <!-- Representa falso -->

Para aplicar estilos a estas celdas basándose en su valor booleano, se utiliza una combinación de los atributos data-f="1" (identificando el tipo de dato como booleano) y data-s (indicando el valor específico del dato). Los estilos asignan colores distintivos para resaltar visualmente los valores de verdadero y falso, mejorando la legibilidad y la interpretación de los datos:

 
/* Estilos para valores booleanos específicos */
.mi-estilo-tabla td[data-f="1"][data-s="1"] {
  color: #4CAF50; /* Color verde para "Sí" */
  font-weight: bold;
}

.mi-estilo-tabla td[data-f="1"][data-s="0"] {
  color: #F44336; /* Color rojo para "No" */
  font-weight: bold;
}

HTML: Renderizado de Valores Numéricos / Decimales

Cuando se trata de representar valores numéricos o decimales en HTML, el enfoque se centra en el uso de atributos de datos data-f, data-r, y data-s para especificar el formato, el rol (en este caso se mantiene en 0 como un valor placeholder, indicando que no se aplica un rol específico), y el signo del valor, respectivamente.

Esto facilita la aplicación de estilos condicionales y mejora la legibilidad de los datos numéricos:

<td data-f="3" data-r="0" data-s="+">123.45</td> <!-- Valor decimal positivo -->
<td data-f="3" data-r="0" data-s="-">-67.89</td> <!-- Valor decimal negativo -->
<td data-f="3" data-r="0" data-s="">0.00</td> <!-- Valor decimal neutro -->

/* Estilos para valores numéricos específicos */
.mi-estilo-tabla td[data-f="3"][data-s="+"] {
  color: #2E8B57; /* Color verde para valores positivos */
  font-weight: bold;
}

.mi-estilo-tabla td[data-f="3"][data-s="-"] {
  color: #DC143C; /* Color rojo para valores negativos */
  font-weight: bold;
}

.mi-estilo-tabla td[data-f="3"][data-s=""] {
  color: #000000; /* Color predeterminado para valores neutros */
}

HTML: Renderizado de Valores Moneda

Los valores de moneda se representan con una estructura HTML que descompone el valor en sus componentes principales, permitiendo estilizar de manera independiente el símbolo de la moneda, la parte entera, el separador decimal, y la parte decimal.

<td data-f="5" data-r="5" data-s="+">
  <span style="word-break: keep-all">
    <span class="penteramoneda">1.234</span><span class="numsepmoneda">,</span><span class="pdecimalmoneda">56</span>
      <span class="psimbolomoneda">€</span>
  </span>
</td>

/* Estilos CSS para la representación de valores de moneda */
.psimbolomoneda {
  font-weight: bold; /* Estilo para el símbolo de la moneda */
}
.penteramoneda, .pdecimalmoneda {
  color: #000000; /* Color para la parte entera y decimal */
}
.numsepmoneda {
  color: #666666; /* Color para el separador decimal */
}

HTML: Renderizado de Valores Porcentaje

Para los valores porcentuales, la estructura HTML se asemeja a la de los valores monetarios, con la diferencia de que se añade el símbolo de porcentaje al final. Los atributos de datos permiten aplicar estilos específicos a estos valores, mejorando la claridad visual.

<td data-f="5" data-r="6" data-s="+">
  <span style="word-break: keep-all">
    <span class="penteraporciento">78</span><span class="numsepporciento">,</span><span class="pdecimalporciento">9</span><span class="psimboloporciento">%</span>
  </span>
</td>

/* Estilos CSS para la representación de valores porcentuales */
.penteraporciento, .pdecimalporciento {
  color: #000000; /* Color para la parte entera y decimal */
}
.numsepporciento, .psimboloporciento {
  color: #666666; /* Color para el separador decimal y el símbolo de porcentaje */
  font-weight: bold; /* Negrita para el símbolo de porcentaje */
}

Last modified: 04 February 2025