DataTable

DataTable é a tabela que o painel usa para listar registros: posts, usuários, módulos, publicações, cópias de backup e as coleções. Ela tem legenda, cabeçalhos com escopo, uma área com rolagem que recebe foco em telas pequenas, interruptores (Ativo e Inativo), ações por linha e, se você pedir, caixas de seleção com ações em massa.

Quando usar

Use quando a sua tela mostrar uma lista de registros que a pessoa pode ler e, talvez, mudar linha a linha. Para um formulário de um registro só, use FormView. Para um resumo de números, use KpiRow.

Cada tabela da tela precisa de um id próprio. O prefixo padrão é tabela (ui/panel/data-table.ts:76), e duas tabelas com o mesmo id na mesma tela quebram os atributos de ligação (ui/panel/data-table.ts:60).

Uma tabela sem linhas não aparece vazia. Ela vira um EmptyState com o texto e o botão que você passar em empty (ui/panel/data-table.ts:123). Se a lista estiver numa página além da última, o paginador continua aparecendo junto.

Regras de cada parte:

• Texto puro é escapado; um SafeHtml é tratado como marcação confiável; um interruptor é um formulário POST de um botão (ui/panel/data-table.ts:27).
• Um interruptor com locked fica desativado e mostra o motivo em texto (ui/panel/data-table.ts:23).
• Uma ação de linha é um link (href) ou um POST que pede confirmação dentro da linha, com details (ui/panel/data-table.ts:30). Esse POST funciona sem JavaScript.
• Com bulkActions ou selectable, cada linha ganha uma caixa de seleção e a barra «Ações em massa» aparece sobre a tabela (ui/panel/data-table.ts:156 e :153).

Onde aparece no painel

• Publicações (/painel/publicacao): a fila de publicação (panel/screens/ops/publicacao.ts:100).
• Usuários (/painel/usuarios): a lista de usuários (panel/screens/users/list.ts:85).
• Módulos (/painel/modulos): um interruptor por módulo e o link «Configurar» (panel/screens/modules/modulos.ts:71).
• Backup (/painel/backup): a lista de cópias e a lista de arquivos (panel/screens/ops/backup.ts:86 e panel/screens/ops/backup-files.ts:111).
• Privacidade (/painel/privacidade): os registros encontrados por e-mail (panel/screens/ops/privacidade.ts:62).
• Em revisão (/painel/posts/em-revisao) e Histórico de revisões (/painel/posts/historico): modules/posts/screens/review.ts:50 e modules/posts/screens/history.ts:78.
• Coleções (Categorias, Tags, Séries, Páginas, Redirecionamentos, Inscritos e Bloqueios): as listas são montadas em panel/collections/routes.ts:367.
• Posts recentes, no painel da Visão geral: modules/posts/extensions.ts:54.

O exemplo de referência da galeria é a lista de posts, com ações em massa e paginação (ui/panel/data-table.gallery.ts).

Variantes e propriedades

DataTable

Pasta: ui/panel

Variantes

Id	Variante	Tom
data-table-posts-light	posts	light
data-table-modulos-light	modulos	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
id	string	Não	Prefix of every id; two tables on one screen MUST pass distinct ids. Default `tabela`.
caption	string	Sim	—
columns	readonly DataTableColumn[]	Sim	—
rows	readonly DataTableRow[]	Sim	—
empty	DataTableEmpty	Sim	—
csrf	string	Não	Token of the toggle, POST row-action and bulk forms.
selectable	boolean	Não	Row checkboxes; implied by `bulkActions`.
bulkAction	string	Não	Target of the bulk POST (`ids[]`, `action`, optionally `scope=all`).
bulkActions	readonly BulkAction[]	Não	—
pagination	Pagination	Não	—

Captura

A primeira variante do catálogo, a lista de posts com ações em massa, em 1280 px:

A mesma variante em 360 px, com a tabela rolável:

Origem

• ui/panel/data-table.ts: DataTable e os tipos de coluna, linha, ação e interruptor.
• ui/panel/data-table.gallery.ts: as variantes do catálogo.
• ui/panel/bulk.ts: o script das caixas de seleção, carregado quando há ações em massa.