Tabela de dados

AlpopDataTable renderiza colunas, formatadores, slots de célula e paginação. Funciona com rows locais ou dados remotos via fetchData. Compõe a Tabela base e o Chip base para a renderização e o contador. Erros são emitidos no evento error; os textos de estado vazio e de paginação são resolvidos pelo tradutor (veja Chaves de tradução), com props para sobrescrever.

Pessoas

3 pessoas

Nome	Cidade	Status
Ada Lovelace	São Paulo	Ativo
Linus Torvalds	Curitiba	Inativo
Grace Hopper	Recife	Ativo

1-3 de 3

102030

alpop-data-table(
  title="Pessoas",
  badge-label="pessoas",
  :columns="columns",
  :rows="rows",
  :total="rows.length"
)
  template(#cell(status)="{ row }")
    alpop-badge(:variant="row.status === 'active' ? 'success' : 'neutral'")
      | {{ row.status }}

Colunas

Cada coluna pode ser uma string ou um objeto:

• label: chave do campo na linha (e nome do slot de célula)
• text: texto do cabeçalho
• formatter(value, row, column): formata o valor da célula
• value: chave alternativa ou função para extrair o valor

Props

Conteúdo

Prop	Tipo	Padrão	Descrição
title	String	""	Título exibido no cabeçalho do cartão
icon	String	null	Ícone do cabeçalho (quadrado de ícone do cartão)
description	String	null	Linha secundária abaixo do título
badgeLabel	String	""	Sufixo do contador exibido ao lado do título (ex.: "pessoas")
columns	Array	[]	Definição das colunas
formatters	Object	{}	Formatadores por coluna, keyed pelo label; o formatter da própria coluna tem precedência
rows	Array	[]	Linhas (modo local)
loading	Boolean	false	Força o estado de carregamento
emptyText	String	null	Texto exibido quando não há linhas; null usa o tradutor (pt-BR: "Nenhum registro")

Dados remotos

Prop	Tipo	Padrão	Descrição
fetchData	Function	null	Busca remota ({ page, perPage }); ativa o modo remoto
formatResponse	Function	null	Normaliza a resposta para { rows, pagination }
reloadKey	String|Number|Object|Array	null	Ao mudar, refaz a busca a partir da página 1 (só no modo remoto)

Paginação

Prop	Tipo	Padrão	Descrição
total	Number	0	Total de registros (modo local)
currentPage	Number	1	Página atual
perPage	Number	10	Itens por página
perPageOptions	Array	[10, 20, 30]	Opções do seletor de itens por página
hasPrev	Boolean	false	Força o estado da seta "anterior"
hasNext	Boolean	false	Força o estado da seta "próxima"
infoTemplate	String	""	Texto fixo de contagem; tem precedência sobre infoFormatter
infoFormatter	Function	null	Formata o texto de contagem a partir de { from, to, total }

Dimensões

Prop	Tipo	Padrão	Descrição
columnWidths	Array	[]	Larguras CSS por coluna, na ordem de columns
minWidth	String	"100%"	Largura mínima da tabela
bodyMinHeight	String	""	Altura mínima do corpo (CSS)
bodyMinHeightMobile	String	""	Altura mínima do corpo em telas ≤ 800px
fullHeight	Boolean	false	Estica o cartão para ocupar a altura disponível

Slots

A tabela é renderizada dentro de um Cartão, então o cabeçalho é literalmente o do cartão. O contador fica ao lado do título; header-actions alinha ações à direita.

Slot	Props	Descrição
header-actions	—	Ações à direita do cabeçalho
cell(<label>)	{ row, column, index }	Conteúdo customizado da célula daquela coluna
empty	—	Exibido quando não há linhas

Eventos

Evento	Payload	Quando
loaded	{ rows, pagination }	Busca remota concluída com sucesso
error	Error	Busca remota falhou
page-change	Number	Página alterada (nos modos local e remoto)
update:perPage	Number	Itens por página alterados (usado por v-model:perPage)

loaded e error só são emitidos no modo remoto (com fetchData). Respostas de requisições obsoletas são descartadas, então apenas a busca mais recente emite.