📊 Guía de Uso: Vista de Tabla de Datos
¿Qué es la Vista de Tabla?
La Vista de Tabla transforma proyectos en bases de datos estructuradas donde cada tarea representa una fila de datos. Es perfecta para gestionar información tabular como:
- 👥 Bases de datos de clientes
- 📦 Inventarios de productos
- 📞 Listas de contactos
- 💼 Catálogos de servicios
- 📊 Registros de ventas
- 🎯 Seguimiento de métricas
Acceso a la Vista
Método 1: Automático
Cuando abres un proyecto tipo DATA_TABLE, la vista de tabla se activa automáticamente.
Método 2: Manual
- Selecciona un proyecto tipo DATA_TABLE
- Click en el botón "Tabla" (ícono de tabla) en el sidebar
- La vista mostrará los datos en formato tabular
Interfaz de la Vista
Header (Barra Superior)
- Nombre del proyecto y contador de registros
- Botón "Agregar Fila": Crea un nuevo registro
- Barra de búsqueda: Busca en todas las columnas
- Selector de filtro: Filtra por columna específica
Tabla Principal
- Encabezados clickeables: Click para ordenar por esa columna
- Campos requeridos: Marcados con asterisco rojo (*)
- Tipos de datos visuales: Cada tipo tiene su representación
- Acciones por fila: Editar y eliminar
Footer (Barra Inferior)
- Información de columnas y filas totales
- Contador de registros filtrados
- Indicador de ordenamiento activo
Tipos de Datos Soportados
📝 String (Texto)
- Texto libre
- Se muestra truncado si es muy largo
- Ejemplo: Nombres, descripciones, notas
🔢 Number (Número)
- Valores numéricos con formato de miles
- Ejemplo: Precios, cantidades, edades
✅ Boolean (Verdadero/Falso)
- Checkbox en edición
- ✓ (verde) o ✗ (rojo) en visualización
- Ejemplo: Activo/Inactivo, Si/No
📅 Date (Fecha)
- Solo fecha sin hora
- Formato localizado
- Ejemplo: Fecha de nacimiento, vencimiento
🕐 DateTime (Fecha y Hora)
- Fecha completa con hora
- Ejemplo: Última actualización, registro
- Campo de email con validación
- Link clickeable (mailto:)
- Ejemplo: Contacto, email principal
🔗 URL
- Campo de URL con validación
- Link clickeable (abre en nueva pestaña)
- Ejemplo: Website, perfil social
📦 JSON
- Objeto JSON completo
- Muestra previsualización formateada
- Ejemplo: Metadatos, configuraciones
Operaciones CRUD
➕ Agregar Nueva Fila
- Click en "Agregar Fila" en la esquina superior derecha
- Se abre una nueva fila con fondo azul claro
- Completa los campos (los campos con * son obligatorios)
- Click en el botón verde (Guardar)
- O click en X (Cancelar) para descartar
Nota: Se crea automáticamente una nueva tarea contenedora para la fila.
✏️ Editar Fila Existente
- Click en el botón azul (Editar) en la columna de acciones
- La fila cambia a modo edición con fondo amarillo
- Modifica los campos necesarios
- Click en botón verde (Guardar) para confirmar
- O X (Cancelar) para descartar cambios
🗑️ Eliminar Fila
- Click en el botón rojo (Eliminar) en la columna de acciones
- Confirma la eliminación en el diálogo
- La fila se elimina permanentemente
⚠️ Advertencia: Esta acción no se puede deshacer.
Búsqueda y Filtrado
Búsqueda Global
La barra de búsqueda en el header busca en todas las columnas:
Ejemplo: Buscar "acme" encontrará:
- Empresa: "Acme Corporation"
- Email: "[email protected]"
- URL: "https://acme.com"
Características:
- ✅ Búsqueda insensible a mayúsculas/minúsculas
- ✅ Busca en valores de texto, números, emails, URLs
- ✅ Resultado en tiempo real
- ✅ Click en ✗ para limpiar búsqueda
Filtro por Columna
Para filtros más específicos:
- Selecciona una columna del dropdown "Sin filtro"
- Aparece un campo de texto adicional
- Escribe el valor a filtrar para esa columna
- Los resultados se actualizan en tiempo real
Ejemplo:
Columna: "Activo"
Valor: "true"
Resultado: Solo clientes activos
Combinación de Filtros
Puedes usar búsqueda global + filtro de columna simultáneamente:
Búsqueda: "tech"
Filtro en "País": "España"
Resultado: Empresas tech en España
Ordenamiento
Ordenar por Columna
- Click en el encabezado de cualquier columna
- Primer click: Orden ascendente (↑)
- Segundo click: Orden descendente (↓)
- El ícono indica la dirección actual
Tipos de Ordenamiento
- Texto: Orden alfabético (A-Z o Z-A)
- Números: Orden numérico (1-9 o 9-1)
- Fechas: Orden cronológico (antigua-reciente o reciente-antigua)
- Boolean: false primero, luego true
Indicador Visual
El footer muestra el ordenamiento activo:
Ordenado por: Empresa (↑)
Validaciones
Campos Requeridos
Los campos marcados con asterisco rojo (*) son obligatorios:
- No puedes guardar una fila sin completarlos
- Recibirás un alert indicando el campo faltante
Validación de Tipos
- Email: Formato válido de correo
- URL: Debe empezar con http:// o https://
- Number: Solo acepta valores numéricos
- Date/DateTime: Formato de fecha válido
Ejemplos de Uso
Ejemplo 1: Base de Datos de Clientes
Schema:
- col_company (String, requerido) // Nombre de empresa
- col_email (Email, requerido) // Email de contacto
- col_phone (String) // Teléfono
- col_revenue (Number) // Ingresos anuales
- col_active (Boolean, default: true) // Estado activo
- col_contract_date (Date) // Fecha de contrato
Operaciones típicas:
- ➕ Agregar nuevo cliente → Click "Agregar Fila"
- 🔍 Buscar cliente → Usar búsqueda global
- 📊 Ver solo activos → Filtrar por "Activo" = "true"
- 📈 Ordenar por ingresos → Click en columna "Ingresos"
Ejemplo 2: Inventario de Productos
Schema:
- col_sku (String, requerido) // Código de producto
- col_name (String, requerido) // Nombre
- col_category (String) // Categoría
- col_price (Number) // Precio
- col_stock (Number, default: 0) // Stock disponible
- col_supplier (String) // Proveedor
- col_last_order (Date) // Último pedido
Operaciones típicas:
- 🔍 Buscar producto → Por SKU o nombre
- 📊 Stock bajo → Filtrar por "Stock" < 10
- 💰 Productos caros → Ordenar por "Precio" descendente
- 📅 Últimos pedidos → Ordenar por "Último pedido" descendente
Ejemplo 3: Registro de Reuniones
Schema:
- col_date (DateTime, requerido) // Fecha y hora
- col_title (String, requerido) // Asunto
- col_attendees (String) // Participantes
- col_decisions (String) // Decisiones tomadas
- col_action_items (JSON) // Tareas asignadas
- col_recording (URL) // Link a grabación
Operaciones típicas:
- ➕ Nueva reunión → Agregar fila con fecha/hora
- 📅 Ver cronológicamente → Ordenar por "Fecha"
- 🔍 Buscar tema → Búsqueda global
- 📎 Abrir grabación → Click en URL
Integración con IA
Comandos para Agregar Datos
"Agrega un nuevo cliente: Global Tech, email [email protected], ingresos 3M, activo"
La IA creará una operación para agregar la fila automáticamente.
Comandos de Consulta
"¿Cuántos clientes activos tenemos?"
La IA leerá los datos y responderá con el conteo.
"¿Cuál es el cliente con mayores ingresos?"
La IA analizará la columna de ingresos y te dirá.
"Resume los ingresos totales por región"
La IA puede hacer análisis agregados de los datos.
Comandos de Modificación
"Marca a Acme Corporation como inactivo"
La IA actualizará el campo boolean.
"Actualiza el email de TechStart a [email protected]"
La IA modificará la fila específica.
Atajos y Tips
Productividad
- Usa Tab: Navega entre campos al editar
- Enter para buscar: Presiona Enter después de escribir
- Ordena antes de filtrar: Mejor flujo de trabajo
- Búsqueda amplia primero: Luego refina con filtros
Mejores Prácticas
✅ Define campos requeridos: Solo los esenciales ✅ Usa defaults: Valores por defecto ahorran tiempo ✅ Nombres claros: Columnas con nombres descriptivos ✅ Valida tipos: Email/URL en vez de String genérico ✅ Documenta en descripciones: Usa el campo description
Limitaciones Actuales
⚠️ No hay paginación: Todas las filas se cargan (puede ser lento con >1000 registros) ⚠️ Sin exportación directa: Usa la IA para generar reportes ⚠️ Edición de una fila a la vez: No edición masiva (próximamente) ⚠️ Sin drag & drop: Usa ordenamiento por columnas
Próximas Funcionalidades
🚀 Planeado:
- Paginación de resultados
- Edición inline (doble click)
- Exportar a CSV/Excel
- Importar desde CSV
- Edición masiva (checkboxes)
- Gráficos y dashboards
- Fórmulas calculadas
- Relaciones entre tablas
Soporte Técnico
Documentación Relacionada
- Diseño Técnico: Arquitectura completa
- Modelos de Datos: Definiciones de tipos
- Componente DataTableView: Código fuente
Datos de Ejemplo
El proyecto "📊 Base de Datos de Clientes" incluye:
- 2 clientes de ejemplo
- 6 columnas configuradas
- Todos los tipos de datos en uso
Troubleshooting
"No veo la vista de tabla"
→ Asegúrate de que el proyecto sea tipo data_table
"Los datos no se guardan" → Completa todos los campos requeridos (marcados con *)
"La búsqueda no encuentra nada" → Verifica que haya datos en las columnas que buscas
"El ordenamiento no funciona" → Solo columnas con datos se pueden ordenar correctamente
Versión: 1.0.0
Fecha: Octubre 2025
Autor: ProjectOS Team