```meta
title: @data — uma coleção como tabela, quadro, lista ou linha do tempo
description: As linhas de uma coleção do espaço numa página, com filtros, colunas, contagens e as vistas de quadro, lista de tarefas e linha do tempo.
```

_flows.md · documentação · [Blocos](/@docs/blocks)_

# @data

Mostra as linhas de uma coleção do espaço numa página: uma tabela por padrão, ou a mesma coleção como quadro, lista de tarefas, agenda ou linha do tempo.

Os exemplos leem a coleção `tarefas-exemplo`, declarada na página do [@schema](/@docs/blocks/schema) com sete tarefas de uma loja fictícia. Quem lê vê as vistas como estão; quem escreve no espaço arrasta um cartão, marca uma caixa, muda uma data.

## Tabela

```@data collection:tarefas-exemplo sort:ordem
@count
@column titulo
@column status format:badge
@column responsavel
@column prazo
```

~~~text
```@data collection:tarefas-exemplo sort:ordem
@count
@column titulo
@column status format:badge
@column responsavel
@column prazo
```
~~~

Uma linha `@column` por coluna, na ordem; sem nenhuma, todos os campos. `@count`, `@sum campo` e `@avg campo` imprimem uma conta sobre a tabela.

`format:` muda como a coluna aparece: `date`, `datetime`, `age`, `number`, `badge`, `link`, `text`, e três para arquivos. Num campo `url` ou `text` que guarda o endereço de um arquivo enviado ao site (`/f/…`), `format:video` toca o vídeo num player pequeno, `format:image` mostra a imagem em miniatura e `format:file` vira um link de download com o nome do arquivo.

## Filtros para o leitor

`filter_by:` vira abas (até cinco opções) ou um menu; `search:` põe uma caixa de busca. Um `@filter` na cerca restringe antes de tudo — aqui, nada do que está pronto.

```@data collection:tarefas-exemplo sort:prazo filter_by:status search:titulo
@filter status ne pronto
@column titulo
@column status format:badge
@column prazo
```

~~~text
```@data collection:tarefas-exemplo sort:prazo filter_by:status search:titulo
@filter status ne pronto
@column titulo
@column status format:badge
@column prazo
```
~~~

## Quadro

`view:board group:status`: uma coluna por opção do campo, cada linha um cartão. A primeira `@column` é o título do cartão.

```@data collection:tarefas-exemplo view:board group:status sort:ordem
@column titulo
@column responsavel
```

~~~text
```@data collection:tarefas-exemplo view:board group:status sort:ordem
@column titulo
@column responsavel
```
~~~

`wip:"fazendo=2"` marca uma coluna que passou do limite; `columns:"fazendo,revisao"` escolhe quais colunas aparecem; `order:ordem` deixa quem escreve reordenar os cartões.

## Lista de tarefas

`view:checklist done:pronto`: uma caixa por linha, ligada ao campo, com a contagem.

```@data collection:tarefas-exemplo view:checklist done:pronto sort:ordem
@column titulo
```

~~~text
```@data collection:tarefas-exemplo view:checklist done:pronto sort:ordem
@column titulo
```
~~~

## Linha do tempo

`view:timeline state:status`: cada linha um passo de uma [:::timeline](/@docs/blocks/timeline). `states:` diz qual valor do campo é cada marcador.

```@data collection:tarefas-exemplo view:timeline state:status states:"pronto=done, revisao=current, fazendo=current, ideia=upcoming" date:prazo sort:ordem
@column titulo
@column responsavel
```

~~~text
```@data collection:tarefas-exemplo view:timeline state:status states:"pronto=done, revisao=current, fazendo=current, ideia=upcoming" date:prazo sort:ordem
@column titulo
@column responsavel
```
~~~

## Um campo

`view:field`: um campo de uma linha, como o controle do tipo dele — o status do post na página do próprio post, a caixa de feito na página da tarefa. Os `@filter` escolhem a linha; `field:` diz o campo, e `fields:` põe vários lado a lado. Quem escreve no espaço muda o valor ali mesmo, e ele é salvo na hora. Aqui você só vê os valores: ninguém escreve no espaço da documentação, e as coleções de exemplo não aceitam envios de ninguém.

```@data collection:tarefas-exemplo view:field fields:status,prazo,pronto
@filter ordem eq 3
```

~~~text
```@data collection:tarefas-exemplo view:field fields:status,prazo,pronto
@filter ordem eq 3
```
~~~

## Agenda

`view:calendar date:prazo` põe cada linha no seu dia, num mês (ou numa semana, `period:week`) que o leitor avança e volta. Abre no período de hoje, ou no de `start:` — uma data (`start:2026-10-13`) ou um dia contado a partir de hoje (`start:today+2d`). Não está desenhada aqui: as tarefas de exemplo têm datas fixas.

~~~text
```@data collection:tarefas-exemplo view:calendar date:prazo
@column titulo
```
~~~

## O que precisa

Uma coleção do espaço, declarada com [@schema](/@docs/blocks/schema). Numa página publicada, a coleção precisa de `visibility:public` para o leitor ver as linhas. Todos os argumentos de cada vista estão na [Referência](/@docs/components).