Quiero presentarte un generador de tablas en forma de texto, algo así como unas tablas ascii art donde la tabla se dibuja usando únicamente texto y donde tú puedes personalizar el contenido de cada celda.
Puedes añadir filas y columnas infinitas, elegir la alineación del contenido así como el separador de columnas, el relleno y la máxima longitud por cada columna.
También vas a poder personalizar el encabezado y añadir líneas separadoras de filas, todo totalmente ajustable.
Una vez que hayas generado tu tabla en forma de texto perfectamente alineada (no tienes que preocuparte por añadir los espacios por ti mismo para que quede alineada) puedes copiar el resultado como texto. Por ejemplo, la tabla generada en la imagen se ve así:
--------------------+--------------------+
Producto | Costo |
--------------------+--------------------+
ESP32-CAM | $200 |
--------------------+--------------------+
ICS43434 | $105.23 |
--------------------+--------------------+
No olvides que también puedes cambiar el ancho de cada columna y la herramienta online va a añadir el relleno necesario para alinear todo perfectamente.
Esto es una evolución de mi algoritmo para tabular texto con JavaScript ya que he añadido la opción para cambiar la alineación y he diseñado una interfaz gráfica fácil de usar para generar tablas en forma de texto sin superar cierto ancho.
Originalmente hice estas funciones para no sobrepasar el ancho del papel térmico en las impresoras térmicas, pero ahora lo he colocado en una herramienta online para generar tablas de solo texto para cualquier uso que le quieras dar.
Enlace a herramienta
Usa el generador de tablas como texto en el siguiente enlace: https://parzibyte.me/apps/tabulador-texto/
Código fuente
Este generador es open source así como el algoritmo inicial. He usado Vite con TypeScript que al final terminan compilando a JavaScript.
La descripción del repositorio es:
Convertir tabla a texto personalizando separador, alineación, relleno y longitud
De hecho las funciones fueron escritas originalmente con JS pero añadí TS para tener un tipado fuerte.
El fragmento de código importante que une las 2 cosas es el siguiente. Primero obtenemos el arreglo de cadenas en donde cada cadena del array representa una línea que conforma la tabla.
Recuerda que una fila no siempre cabrá dentro de una línea, dependiendo de los ajustes el algoritmo puede separarla en distintas líneas para no superar el ancho máximo:
const lineas = tabularDatos(fila.map((contenido: string, indice: number) => {
return {
alineacion: alineaciones[indice], contenido: contenido, maximaLongitud: longitudes[indice],
}
}), $relleno.value, $separador.value)
Después las unimos con saltos de línea y colocamos el resultado
en el elemento <pre> que está obtenido con querySelector dentro
de la variable $salida:
$salida.textContent += lineas.join("\n") + "\n";
El resto del código es muy simple. Hay que fijarnos en la función tabularDatos que queda definida así:
/**
*
* @param cadenas un arreglo de objetos. Cada objeto dentro del arreglo creará una nueva columna dentro de la tabla
* @param relleno
* @param separadorColumnas
* @returns
*/
export const tabularDatos = (cadenas: Array<{ contenido: string, maximaLongitud: number, alineacion: AlineacionTabulacion }>, relleno: string, separadorColumnas: string) => {
const [arreglosDeContenidosConMaximaLongitudSeparadas, mayorConteoDeBloques] = dividirCadenasYEncontrarMayorConteoDeBloques(cadenas)
let indice = 0;
const lineas = [];
while (indice < mayorConteoDeBloques) {
let linea = "";
for (const contenidos of arreglosDeContenidosConMaximaLongitudSeparadas) {
let cadena = "";
if (indice < contenidos.separadas.length) {
cadena = contenidos.separadas[indice];
}
if (cadena.length < contenidos.maximaLongitud) {
/*
En este punto ya sabemos que es obligatorio rellenar
la cadena porque sobra espacio, así que
aprovechamos para alinear
*/
const diferencia = contenidos.maximaLongitud - cadena.length;
if (contenidos.alineacion === AlineacionTabulacion.Izquierda) {
cadena = cadena + relleno.repeat(diferencia);
} else if (contenidos.alineacion === AlineacionTabulacion.Derecha) {
cadena = relleno.repeat(diferencia) + cadena;
} else if (contenidos.alineacion === AlineacionTabulacion.Centro) {
const rellenoIzquierdo = Math.floor(diferencia / 2);
const rellenoDerecho = diferencia - rellenoIzquierdo;
cadena = relleno.repeat(rellenoIzquierdo) + cadena + relleno.repeat(rellenoDerecho);
}
}
linea += cadena + separadorColumnas;
}
lineas.push(linea);
indice++;
}
return lineas;
}
Y luego tenemos la función que genera la tabla invocando a tabularDatos, obviamente
leyendo los parámetros de los campos de la interfaz:
const generar = () => {
if ($salida === null) {
return;
}
for (let i = 0; i < longitudes.length; i++) {
if (longitudes[i] <= 0) {
return alert("La longitud de cada columna debe ser mayor a 0");
}
}
$salida.textContent = "";
for (let i = 0; i < tabla.length; i++) {
const fila = tabla[i];
let lineasParaSeparar: string[] = [];
if ($usarLineaSeparadora.checked) {
lineasParaSeparar = tabularDatos(fila.map((_, indice: number) => {
return {
alineacion: alineaciones[indice], contenido: $contenidoLinea.value, maximaLongitud: longitudes[indice]
}
}), $rellenoLinea.value, $separadorLinea.value)
}
const lineas = tabularDatos(fila.map((contenido: string, indice: number) => {
return {
alineacion: alineaciones[indice], contenido: contenido, maximaLongitud: longitudes[indice],
}
}), $relleno.value, $separador.value)
if ($usarLineaSeparadora.checked) {
$salida.textContent += lineasParaSeparar.join("\n") + "\n";
}
$salida.textContent += lineas.join("\n") + "\n";
if (i + 1 >= tabla.length) {
if ($usarLineaSeparadora.checked) {
$salida.textContent += lineasParaSeparar.join("\n") + "\n";
}
}
}
return;
}
Esto que te he mostrado es la parte importante del código. Para ver el código fuente completo puedes ir a GitHub: https://github.com/parzibyte/tabulador-texto
Para ejecutarlo localmente necesitas Node 24.5.0. Descarga el código y después:
npm installnpm run dev- Visita http://localhost:5173/
- Cuando quieras compilar ejecuta
npm run buildy distribuye la carpeta dist