Estamos em estágio inicial — fale conosco!
Demo de Scroll-Jacking

A Tabela de Entidades

Um componente de tabela — cada função que um backoffice precisa, zero configuração por página

↓ Percorra para controlar a animação
A Tabela de Entidades
Cada função.
Um componente.
Pesquisa, filtros, ordenação, seleção, paginação, pré-visualização, ações em massa, modos de vista — tudo de uma única tabela metadata-driven.
A Tabela
Uma tabela,
metadata-driven.
Colunas, tipos e ordem vêm do endpoint meta da entidade. Coloque o componente em qualquer página — ele renderiza-se sozinho.
Paginação
Paging server-side,
integrado.
Navegue grandes datasets sem carregar tudo. Tamanho de página, registos totais e navegação — tudo gerido pelo servidor.
Exemplo 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}
Pesquisa & Filtros
Encontre qualquer coisa,
filtre tudo.
Pesquisa global com scoping por campo, filtros padrão e um builder avançado com operadores type-aware.
Gestão de Colunas
As tuas colunas,
as tuas regras.
Reordena, oculta e fixa colunas. Fusos horários IANA por registo. Tudo persistido por utilizador.
Seleção & Cross-page
Seleciona entre páginas.
Nada se perde.
As seleções sobrevivem à paginação server. Ver apenas selecionados com paging client-side. Scroll horizontal preservado entre recargas.
Ordenação & Ações de Linha
Ordena em três estados.
Age em qualquer linha.
Asc, desc, nulo — um ciclo de três estados. Ações por linha aparecem no hover: editar, pré-visualizar, duplicar, eliminar e custom.
Modos de Vista & Eliminação
Vê do teu jeito.
Incluindo os eliminados.
Tabela, grid de cartões ou lista de cartões. Alterna ativos, eliminados ou todos — linhas soft-deleted mostradas com chrome vermelho.
Operações em Massa & Pré-visualização
Age em centenas.
Inspeciona qualquer um.
Eliminação, restauro, duplicação e exportação em massa. Painel de pré-visualização slide-out com navegação prev/next.
Uma tabela.
Cada função.
Zero config.
Intro
🔒https://backoffice.acme.org/customers
AC
JD
Europe/Rome
Sistema / Configurações / Clientes
Emailtermina com.com
Nome Email Estado
Onboarded Em
Criado
Acme Corpinfo@acme.comAtivo16 May 2026, 19:0015 Mar 2024
Globex Inchello@globex.comAtivo16 May 2026, 19:0002 Apr 2024
Initechcontact@initech.comLead16 May 2026, 19:0010 May 2024
Umbrella Coadmin@umbrella.comInativo20 Jun 2024
Stark Industriestony@stark.comAtivo01 Jul 2024
1-8 / 247
Tamanho de página
1 / 31
System / Settings / Customers
NomeEmailEstadoCriado
Acme Corpinfo@acme.comAtivo15 Mar 2024
Globex Inchello@globex.comAtivo02 Apr 2024
Initechcontact@initech.comLead10 May 2024
Umbrella Coadmin@umbrella.comInativo20 Jun 2024
1-25 / 247
Tamanho de página
1 / 10
Pesquisar Em
All fields
Código
Nome
Apelido
Empresa
Email
Telefone
UUID
Razão do estado
Endereço
Cidade
Estado/Região
País
Código postal
Emailtermina com.com
Filtros Avançados
Padrão
Avançado
Todos os critérios
Qualquer critério
Emailtermina com.com
Onboarded At
16 May 2026, 19:00
16 May 2026, 19:00
16 May 2026, 19:00
Colunas
Campos fixos
Nome
Campos de dados
Código
Email
Estado
Telefone
Campos de auditoria
Criado Em
Criado Por
Nome
Acme Corp
Globex Inc
Initech
Umbrella Co
Stark Industries
Edit
Duplicar
Version history
Pré-visualização
Eliminar
NomeEstadoEliminado Em
Acme OldEliminado01 Jun 2024
Beta CorpEliminado2024-07-15
Pré-visualização
1 / 124
Campos fixos
EmpresaAcme Corp
CódigoACM-001
Campos de dados
NomeJohn
ApelidoDoe
Emailinfo@acme.com
Telefone+1 555-0100
EstadoAtivo
Campos de auditoria
Atualizado em16 May 2026, 19:00
Versão42
Renderização metadata-driven
Colunas, tipos e ordem vêm da definição da entidade. Coloque a tabela em qualquer página — ela constrói-se sozinha.
Paginação server-side
Navegue grandes datasets sem carregar tudo. O servidor gere o paging — o teu navegador vê apenas a página atual.
Registos totais
Mostra sempre quais linhas estás a ver e quantas existem no total. Atualiza-se instantaneamente ao paginar ou filtrar.
Linhas por página
Escolhe quantas linhas cabem no ecrã. A tua preferência é lembrada para cada entidade.
Painel Pesquisar Em
Abre o painel lateral direito para limitar a pesquisa a colunas específicas. Todos os campos de texto estão incluídos por defeito. A tua seleção é lembrada por entidade.
Toolbar de Filtros & Ações em Massa
Uma segunda toolbar abaixo da principal. Alterna ações em massa, limpa todos os filtros ou revê os badges de filtros ativos — tudo numa linha.
Limpar todos os filtros
Remove todos os filtros ativos com um único clique.
Badges de filtros ativos
Cada badge mostra um campo, operador e valor. Clica no × de qualquer badge para remover instantaneamente esse filtro.
Builder de filtros avançados
Um painel lateral direito para construir filtros complexos multi-condição que vão além dos filtros padrão.
Resetar todos os filtros
Limpa todos os filtros avançados com um clique. Igual a Limpar tudo na toolbar — reset para sem filtros aplicados.
Critérios AND / OR
Alterna se todas as condições devem coincidir (AND) ou se qualquer uma pode coincidir (OR).
Pré-visualização de filtros
Cada filtro ativo é mostrado como uma linha legível: campo, operador e valor. Edita ou remove um único filtro sem recomeçar.
Formulário de filtro dinâmico
Escolhe um campo e o formulário adapta-se automaticamente — os operadores correspondem ao tipo de coluna e o input de valor muda para date picker, seletor de badge ou input de texto.
Filtros padrão
Uma lista simples de todos os campos filtráveis. Cada campo de texto usa um operador contains — digita qualquer subcadeia e a tabela filtra instantaneamente.
Operador contains
Cada campo de texto filtra com um match contains. Não precisas de escolher um operador — basta digitar e os resultados atualizam ao vivo.
Fuso horário do navegador
Todos os valores datetime são formatados usando o fuso horário do teu navegador (mostrado na topbar). O mesmo valor UTC exibe-se identicamente em todas as linhas.
Modo de registo IANA
Alterna para ver cada valor no seu fuso horário local original. Os tempos diferem por registo. Um badge mostra o fuso horário IANA que era local quando os dados foram inseridos.
Seletor de colunas
Mostra, oculta e reordena colunas arrastando-as dentro da sua secção. A ordem muda em tempo real. O teu layout é guardado.
Campos fixos
Colunas fixas permanecem visíveis ao fazer scroll horizontal. A coluna mais à direita para ações de linha é sempre fixa e não pode ser ocultada ou movida.
Campos de auditoria
Campos de auditoria rastreiam quem criou ou modificou um registo. Uma entidade pode ser auditable ou não — depende da definição da entidade nos metadata.
Colunas fixas
Nome (esquerda) e Ações (direita) permanecem visíveis ao fazer scroll horizontal. A coluna de ações mais à direita é sempre fixa e não pode ser ocultada ou movida.
Fixa à esquerda
A coluna Nome está marcada como fixa no seletor de colunas. Permanece fixada na borda esquerda enquanto outras colunas se deslocam por baixo.
Fixa à direita
Ações de linha são sempre fixas na borda direita. Esta coluna não pode ser ocultada ou reordenada.
Seleção de linhas
Clica nas checkboxes para selecionar linhas. A tua seleção persiste através da paginação server-side — as linhas selecionadas permanecem selecionadas mesmo quando paginas ou recarregas.
Selecionar tudo
A checkbox do header seleciona ou desseleciona todas as linhas da página atual de uma vez.
Contador de seleção
O footer mostra quantas linhas estão selecionadas. Usa o toggle de olho para ver apenas as linhas selecionadas com paging client-side.
Ordenação — ciclo de 3 estados
Clica em qualquer coluna para alternar entre ascendente, descendente e sem ordenação. Uma ordenação padrão dos metadata é sempre aplicada quando nenhuma ordenação de utilizador está ativa.
Sem ordenação de utilizador
A ordenação padrão definida nos metadata da entidade é sempre aplicada. As colunas mostram um ícone de seta neutral até clicares.
Ascendente
O primeiro clique ordena ascendentemente. A seta aponta para cima e o header da coluna é realçado.
Descendente
O segundo clique inverte para descendente. Um terceiro clique limpa a ordenação de utilizador e volta ao padrão dos metadata.
Ações de linha
Editar, duplicar, histórico de versões, pré-visualizar, eliminar e restaurar — mais ações custom definidas nos metadata da entidade. Cada ação está sob controlo RBAC. Ações admin-level requerem autenticação MFA step-up por ação antes de poderem prosseguir.
Modos de vista
Alterna entre tabela, grid de cartões ou lista compacta. A tua preferência é lembrada entre sessões.
Vista de grid de cartões
Cada linha torna-se um cartão num grid responsive. Mesmos metadata, ordenação, filtragem e seleção — apenas um layout diferente.
Toolbar de vista de cartões
Todas as funções da tabela ainda estão disponíveis aqui — selecionar tudo, ordenar por coluna e direção — adaptadas para o modo de vista ativo. Toggles de fuso horário IANA também são automaticamente detetados e renderizados para cada coluna datetime que os declara.
Vista de lista de cartões
Cartões horizontais empilham-se verticalmente, mostrando mais campos por cartão. Ideal para analisar registos detalhados sem scroll horizontal.
Entidades Soft Deleted
Alterna entre ativos, eliminados e todos os registos. As linhas soft-deleted são preservadas com fundo rosado e opacidade reduzida, nunca verdadeiramente removidas até serem explicitamente purgadas.
Apenas registos eliminados
Ao mudar para o filtro deleted mostram-se apenas as entradas soft-deleted. Cada linha exibe fundo rosado, opacidade reduzida e um badge Eliminado com o timestamp de eliminação.
Todos os registos
A vista de todos os registos une entradas ativas e soft-deleted numa única lista. As linhas eliminadas permanecem visualmente distintas com o seu fundo rosa, fáceis de identificar e restaurar.
Modo de ações em massa
A mesma toolbar muda para o modo bulk quando as linhas estão selecionadas. Opera em registos selecionados — mesmo entre páginas diferentes — ou em todo o dataset quando as permissões RBAC o permitem. A toolbar volta automaticamente para filtros quando os filtros são aplicados.
Toggle de modo
Clica para alternar entre filtros e ações em massa. Quando as linhas estão selecionadas, a toolbar muda automaticamente para o modo bulk. Quando os filtros são aplicados, muda para filtros.
Formatos de exportação
Exporta linhas selecionadas ou todo o dataset para XLSX ou CSV — ficheiros reais gerados server-side, não fakes client-side. A exportação HTML suporta templates custom com pré-visualização live, geração de PDF e output email-ready.
Duplicar registos
Cria uma cópia exata do registo selecionado — todos os campos clonados server-side através de uma única chamada API. Funciona com uma linha ou muitas ao mesmo tempo.
Coming soon
Field-level control: choose which fields to copy, which to exclude, and which to manually set before duplicating.
Painel de pré-visualização
Um painel redimensionável dentro da área da tabela. Inspeciona os detalhes completos de qualquer linha sem sair da lista. Navega entre registos com prev/next — mesmo entre páginas. Alterna modo de edição, acede a ações de linha ou fecha — tudo a partir do header.