RICHARD COLLAO

Durante el desarrollo de mi software MRP SIADO me tope con un problema relacionado con el detalle de los documentos (ordenes de compras, guiás y facturas) ya que para agregar nuevos items a un documento estos son seleccionados desde un campo tipo SELECT, el problema es que algunos ítems tienen el mismo nombre, lo cual no es extraño en un software de esta naturaleza ya que cada uno esta asociado a un id diferente en la base de datos y mantienen una relación referencial con campos de diferentes tablas como cuentas contables, stock, medidas, etc., por esta razón es necesario incluir la información relacionada de manera que los usuarios no se confundan y agreguen el item equivocado con todos los problemas que esto ocasionaría.

Como todos sabemos en una etiqueta tipo SELECT los datos se despliegan de manera similar a una tabla con una sola columna y múltiples filas, donde no es posible tabular la información en columnas.

¿Entonces como hacemos para mostrar esta información?

Una posible solución seria separar los datos mediante un carácter como una coma o un guion, el problema de esto es que al desplegar el componente, los datos se verían muy desordenados y serian difíciles de leer.

Otra solución seria usar un tipo de letra monoespaciado y formatear los datos para que se muestren equidistantes simulando columnas, esta es una buena opción pero rompe el diseño de la pagina al usar distintos tipos de fuentes.

Lo bueno de ser programador es que siempre podemos darle la vuelta a un problema, así que me dispuse a crear un componente que resolviera esta problemática, mi idea era crear un web component lamentablemente esta tecnología no era compatible con todos los navegadores, así que tuve que hacerlo como en la vieja escuela con VanillaJS pero aprovechando las nuevas características del estándar ES6, el resultado es un componente que en un arranque de originalidad llame SelectMultiColumns, pero que finalmente cumple con el propósito para el cual fue desarrollado, debo decir que funciona bastante bien incluso con mas de 2000 items probado en un entorno de producción.

https://github.com/RichardCollao/SelectMultiColumns