Estamos en una etapa inicial — ¡contáctanos!
Demo de Scroll-Jacking

La Tabla de Entidades

Un componente de tabla — cada función que un backoffice necesita, cero configuración por página

↓ Desplázate para controlar la animación
La Tabla de Entidades
Cada función.
Un componente.
Búsqueda, filtros, ordenación, selección, paginación, vista previa, acciones bulk, modos de vista — todo desde una única tabla metadata-driven.
La Tabla
Una tabla,
metadata-driven.
Columnas, tipos y orden provienen del endpoint meta de la entidad. Coloca el componente en cualquier página — se renderiza solo.
Paginación
Paging server-side,
integrado.
Navega grandes datasets sin cargar todo. Tamaño de página, registros totales y navegación — todo gestionado por el servidor.
Ejemplo de MetadataJSON
1{
2 "entity": "customers",
3 "columns": [
4 {
5 "key": "name",
6 "label": "Name",
7 "type": "text",
8 "sticky": true
9 },
10 {
11 "key": "status",
12 "label": "Status",
13 "type": "badge",
14 "options": ["Active", "Lead", …]
15 },
16 … 3 more columns
17 ]
18}
Búsqueda & Filtros
Encuentra cualquier cosa,
filtra todo.
Búsqueda global con scoping por campo, filtros estándar y un builder avanzado con operadores type-aware.
Gestión de Columnas
Tus columnas,
tus reglas.
Reordena, oculta y fija columnas. Zonas horarias IANA por registro. Todo persistido por usuario.
Selección & Cross-page
Selecciona entre páginas.
Nada se pierde.
Las selecciones sobreviven la paginación server. Ver solo seleccionados con paging client-side. Scroll horizontal preservado entre recargas.
Ordenación & Acciones de Fila
Ordena en tres estados.
Actúa en cualquier fila.
Asc, desc, nulo — un ciclo de tres estados. Acciones por fila aparecen al hover: editar, vista previa, duplicar, eliminar y custom.
Modos de Vista & Eliminación
Véelo a tu manera.
Incluso los eliminados.
Tabla, grid de tarjetas o lista de tarjetas. Alterna activos, eliminados o todos — filas soft-deleted mostradas con chrome rojo.
Operaciones Bulk & Vista Previa
Actúa sobre cientos.
Inspecciona uno cualquiera.
Eliminación, restauración, duplicación y exportación bulk. Panel de vista previa slide-out con navegación prev/next.
Una tabla.
Cada función.
Zero config.
Intro
🔒https://backoffice.acme.org/customers
AC
JD
Europe/Rome
Sistema / Configuración / Clientes
Emailtermina con.com
Nombre Email Estado
Onboarded El
Creado
Acme Corpinfo@acme.comActivo16 May 2026, 19:0015 Mar 2024
Globex Inchello@globex.comActivo16 May 2026, 19:0002 Apr 2024
Initechcontact@initech.comLead16 May 2026, 19:0010 May 2024
Umbrella Coadmin@umbrella.comInactivo20 Jun 2024
Stark Industriestony@stark.comActivo01 Jul 2024
1-8 / 247
Tamaño de página
1 / 31
System / Settings / Customers
NombreEmailEstadoCreado
Acme Corpinfo@acme.comActivo15 Mar 2024
Globex Inchello@globex.comActivo02 Apr 2024
Initechcontact@initech.comLead10 May 2024
Umbrella Coadmin@umbrella.comInactivo20 Jun 2024
1-25 / 247
Tamaño de página
1 / 10
Buscar En
All fields
Código
Nombre
Apellido
Empresa
Email
Teléfono
UUID
Razón de estado
Dirección
Ciudad
Estado/Región
País
Código postal
Emailtermina con.com
Filtros Avanzados
Estándar
Avanzado
Todos los criterios
Cualquier criterio
Emailtermina con.com
Onboarded At
16 May 2026, 19:00
16 May 2026, 19:00
16 May 2026, 19:00
Columnas
Campos fijos
Nombre
Campos de datos
Código
Email
Estado
Teléfono
Campos de auditoría
Creado El
Creado Por
Nombre
Acme Corp
Globex Inc
Initech
Umbrella Co
Stark Industries
Edit
Duplicar
Version history
Vista previa
Eliminar
NombreEstadoEliminado El
Acme OldEliminado01 Jun 2024
Beta CorpEliminado2024-07-15
Vista previa
1 / 124
Campos fijos
EmpresaAcme Corp
CódigoACM-001
Campos de datos
NombreJohn
ApellidoDoe
Emailinfo@acme.com
Teléfono+1 555-0100
EstadoActivo
Campos de auditoría
Actualizado el16 May 2026, 19:00
Versión42
Renderización metadata-driven
Columnas, tipos y orden provienen de la definición de la entidad. Coloca la tabla en cualquier página — se construye sola.
Paginación server-side
Navega grandes datasets sin cargar todo. El servidor gestiona el paging — tu navegador solo ve la página actual.
Registros totales
Siempre muestra qué filas estás viendo y cuántas existen en total. Se actualiza al instante al paginar o filtrar.
Filas por página
Elige cuántas filas caben en pantalla. Tu preferencia se recuerda para cada entidad.
Panel Buscar En
Abre el panel lateral derecho para limitar la búsqueda a columnas específicas. Todos los campos de texto están incluidos por defecto. Tu selección se recuerda por entidad.
Toolbar de Filtros & Acciones Bulk
Una segunda toolbar debajo de la principal. Alterna acciones bulk, limpia todos los filtros o revisa los badges de filtros activos — todo en una fila.
Limpiar todos los filtros
Elimina todos los filtros activos con un solo clic.
Badges de filtros activos
Cada badge muestra un campo, operador y valor. Haz clic en la × de cualquier badge para eliminar ese filtro al instante.
Builder de filtros avanzados
Un panel lateral derecho para construir filtros complejos multi-condición que van más allá de los filtros estándar.
Resetear todos los filtros
Limpia todos los filtros avanzados con un clic. Igual que Limpiar todo en la toolbar — resetea a sin filtros aplicados.
Criterios AND / OR
Alterna si todas las condiciones deben coincidir (AND) o si cualquiera puede coincidir (OR).
Vista previa de filtros
Cada filtro activo se muestra como una línea legible: campo, operador y valor. Edita o elimina un solo filtro sin empezar de nuevo.
Formulario de filtro dinámico
Elige un campo y el formulario se adapta automáticamente — los operadores coinciden con el tipo de columna y el input de valor cambia a date picker, selector de badge o input de texto.
Filtros estándar
Una lista simple de todos los campos filtrables. Cada campo de texto usa un operador contains — escribe cualquier subcadena y la tabla filtra al instante.
Operador contains
Cada campo de texto filtra con un match contains. No necesitas elegir un operador — solo escribe y los resultados se actualizan en vivo.
Zona horaria del navegador
Todos los valores datetime se formatean usando la zona horaria de tu navegador (mostrada en la topbar). El mismo valor UTC se muestra idéntico en todas las filas.
Modo registro IANA
Alterna para ver cada valor en su zona horaria local original. Los tiempos difieren por registro. Un badge muestra la zona horaria IANA que era local cuando se ingresaron los datos.
Selector de columnas
Muestra, oculta y reordena columnas arrastrándolas dentro de su sección. El orden cambia en tiempo real. Tu layout se guarda.
Campos fijos
Las columnas fijas permanecen visibles al hacer scroll horizontal. La columna más a la derecha para acciones de fila siempre es fija y no se puede ocultar ni mover.
Campos de auditoría
Los campos de auditoría rastrean quién creó o modificó un registro. Una entidad puede ser auditable o no — depende de la definición de la entidad en los metadata.
Columnas fijas
Nombre (izquierda) y Acciones (derecha) permanecen visibles al hacer scroll horizontal. La columna de acciones más a la derecha siempre es fija y no se puede ocultar ni mover.
Fija a la izquierda
La columna Nombre está marcada como fija en el selector de columnas. Permanece fijada en el borde izquierdo mientras otras columnas se desplazan debajo.
Fija a la derecha
Las acciones de fila siempre son fijas en el borde derecho. Esta columna no se puede ocultar ni reordenar.
Selección de filas
Haz clic en las checkboxes para seleccionar filas. Tu selección persiste a través de la paginación server-side — las filas seleccionadas permanecen seleccionadas incluso cuando paginas o recargas.
Seleccionar todo
La checkbox del header selecciona o deselecciona todas las filas de la página actual a la vez.
Contador de selección
El footer muestra cuántas filas están seleccionadas. Usa el toggle de ojo para ver solo las filas seleccionadas con paging client-side.
Ordenación — ciclo de 3 estados
Haz clic en cualquier columna para ciclar entre ascendente, descendente y sin orden. Una ordenación por defecto de los metadata siempre se aplica cuando no hay ordenación de usuario activa.
Sin ordenación de usuario
La ordenación por defecto definida en los metadata de la entidad siempre se aplica. Las columnas muestran un icono de flecha neutral hasta que haces clic.
Ascendente
El primer clic ordena ascendentemente. La flecha apunta hacia arriba y el header de la columna se resalta.
Descendente
El segundo clic invierte a descendente. Un tercer clic elimina la ordenación de usuario y vuelve al default de los metadata.
Acciones de fila
Editar, duplicar, historial de versiones, vista previa, eliminar y restaurar — más acciones custom definidas en los metadata de la entidad. Cada acción está bajo control RBAC. Las acciones admin-level requieren autenticación MFA step-up por acción antes de poder proceder.
Modos de vista
Cambia entre tabla, grid de tarjetas o lista compacta. Tu preferencia se recuerda entre sesiones.
Vista de grid de tarjetas
Cada fila se convierte en una tarjeta en un grid responsive. Mismos metadata, ordenación, filtrado y selección — solo un layout diferente.
Toolbar de vista de tarjetas
Todas las funciones de tabla siguen disponibles aquí — seleccionar todo, ordenar por columna y dirección — adaptadas para el modo de vista activo. Los toggles de zona horaria IANA también se detectan y renderizan automáticamente para cada columna datetime que los declara.
Vista de lista de tarjetas
Tarjetas horizontales se apilan verticalmente, mostrando más campos por tarjeta. Ideal para escanear registros detallados sin scroll horizontal.
Entidades Soft Deleted
Alterna entre activos, eliminados y todos los registros. Las filas soft-deleted se preservan con fondo rosado y opacidad reducida, nunca realmente eliminadas hasta que se purgan explícitamente.
Solo registros eliminados
Al cambiar al filtro deleted se muestran solo las entradas soft-deleted. Cada fila muestra fondo rosado, opacidad reducida y un badge Eliminado con el timestamp de eliminación.
Todos los registros
La vista de todos los registros une entradas activas y soft-deleted en una sola lista. Las filas eliminadas permanecen visualmente distintas con su fondo rosa, fáciles de identificar y restaurar.
Modo acciones bulk
La misma toolbar cambia al modo bulk cuando las filas están seleccionadas. Opera en registros seleccionados — incluso entre páginas diferentes — o en todo el dataset cuando los permisos RBAC lo permiten. La toolbar vuelve automáticamente a filtros cuando se aplican filtros.
Toggle de modo
Haz clic para cambiar entre filtros y acciones bulk. Cuando las filas están seleccionadas, la toolbar cambia automáticamente al modo bulk. Cuando se aplican filtros, cambia a filtros.
Formatos de exportación
Exporta filas seleccionadas o todo el dataset a XLSX o CSV — archivos reales generados server-side, no fakes client-side. La exportación HTML soporta templates custom con vista previa live, generación de PDF y output email-ready.
Duplicar registros
Crea una copia exacta del registro seleccionado — todos los campos clonados server-side mediante una única llamada API. Funciona con una fila o muchas a la vez.
Coming soon
Field-level control: choose which fields to copy, which to exclude, and which to manually set before duplicating.
Panel de vista previa
Un panel redimensionable dentro del área de tabla. Inspecciona los detalles completos de cualquier fila sin salir de la lista. Navega entre registros con prev/next — incluso entre páginas. Alterna modo edición, accede a acciones de fila o cierra — todo desde el header.