Durante el desarrollo de mi software MRP SIADO me encontré con una limitación bastante concreta en la interfaz de ingreso de documentos como órdenes de compra, guías y facturas. Al momento de agregar nuevos ítems, estos debían seleccionarse desde un campo tipo SELECT. El problema aparecía cuando varios productos compartían el mismo nombre, algo completamente normal en un sistema de esta naturaleza, ya que cada registro mantiene relaciones distintas con stock, unidades de medida, cuentas contables y otros datos asociados.
En ese escenario no bastaba con mostrar una simple descripción. Era necesario entregar más contexto visual al usuario para que pudiera distinguir correctamente cada opción y evitar errores al agregar productos al documento.
El problema del SELECT tradicional
Como todos sabemos, una etiqueta SELECT despliega su contenido como una lista de opciones en una sola columna. Eso funciona bien en formularios sencillos, pero se vuelve insuficiente cuando necesitamos presentar varias referencias por cada elemento y mantener una lectura clara.
Una primera alternativa era concatenar los datos usando comas, guiones u otros separadores. El inconveniente de ese enfoque es que, al desplegar la lista, toda la información termina viéndose demasiado compacta y desordenada, especialmente cuando el número de registros comienza a crecer.
Otra posibilidad consistía en usar una fuente monoespaciada y ajustar espacios para simular columnas. Aunque técnicamente era viable, terminaba rompiendo la estética general de la interfaz y además dependía demasiado del espaciado para conservar la alineación.
El enfoque utilizado
A partir de esa necesidad decidí desarrollar un componente que permitiera mostrar múltiples columnas dentro de una interfaz de selección, manteniendo una experiencia de uso similar a la de un SELECT convencional, pero con una presentación mucho más clara para el usuario.
Mi idea inicial fue construirlo como un Web Component, pero en ese momento la compatibilidad entre navegadores todavía no resultaba suficientemente confiable para el contexto en que necesitaba utilizarlo. Por esa razón opté por desarrollarlo en VanillaJS, aprovechando varias características de ES6 para mantener el código modular, limpio y fácil de integrar.
El resultado fue un componente que terminé llamando SelectMultiColumns. Más allá del nombre, lo relevante es que permitió resolver un problema real de usabilidad: entregar más contexto por opción sin sacrificar legibilidad ni obligar al usuario a adivinar cuál era el ítem correcto.
Resultado y experiencia en producción
En la práctica el componente respondió bastante bien, incluso trabajando con más de 2000 ítems en un entorno de producción. Eso terminó confirmando que la idea no solo era útil en teoría, sino también suficientemente robusta para resolver el problema dentro de un sistema real.
Este tipo de soluciones quizá parezca pequeño a primera vista, pero terminan teniendo un impacto importante en la experiencia de uso de los sistemas administrativos. Cuando una interfaz ayuda a elegir mejor, también ayuda a reducir errores operativos y a trabajar con mayor seguridad.
Repositorio del proyecto:
https://github.com/RichardCollao/SelectMultiColumns