Tabelas

Tabela simples

Mais largo que a sala

Tabela com ações

Linhas listradas, iluminadas sob o ponteiro

Linhas que podem ser marcadas

Uma caixa no cabeçalho de cada linha, uma no cabeçalho para todas, e as ações acima: elas enviam as linhas marcadas para seu próprio endereço, e ficam fora de alcance enquanto nada estiver marcado.

Arquivos, um total, uma ação em cada linha

Caminhos lidos pelo seu nome, as pastas antes dele cortadas de seu início. A barra termina em quantas linhas há, e uma ação marcada como `all` funciona com nada marcado — ela pega todas as linhas, e lidera a barra quando é a esperada.

Filtros

Uma barra de filtros no cabeçalho da tabela, um menu discreto cada um, dizendo o que está restringindo uma vez que faz. No servidor eles vivem na consulta da página — cada opção é um link — e o controlador restringe as linhas a partir disso; em vue, são um valor entregue à página para sua API, ou aplicado pela tabela às linhas que já possui. Cada opção é uma caixa — redonda para uma escolha única — colorida pelo seu tom quando tem um, um status ou uma categoria.

Ordenação

Um cabeçalho que ordena é um link no servidor e um botão no vue: ascendente, descendente, depois de volta à ordem que a página declarou, que a lista abre e que sua seta mostra desde o início. Datas vazias vão por último de ambas as maneiras, e nomes comparam da forma como a língua os ordena. Aqui a tabela ordena as linhas que recebeu; um controlador que pagina sua lista lê a mesma consulta.

Ordenação no navegador, a partir do twig

`vue: true` entrega as mesmas colunas e linhas ao par do vue: ele ordena e busca toda a lista no navegador, sem recarregar a página. Para uma lista que a página mantém inteira — uma curta, ou uma que nenhuma api atende.

Ações em um seletor

A mesma barra quando há ações suficientes para preenchê-la: uma é escolhida, então aplicada.

Células com link e ícone

Estado de carregamento

Estado vazio

Alinhamento das colunas

Códigos, figuras e totais

`cell: 'code'` define um identificador na fonte monoespaçada; `cell: 'number'`, ou uma `unit`, escreve uma figura na localidade da página. `negative: true` desenha uma figura abaixo de zero no tom de erro, seu sinal de menos dizendo isso também. `totals` é uma linha que a página entrega, desenhada abaixo das outras — a tabela não soma nada, mantendo uma página ou uma lista filtrada. Desenhada pelo servidor, depois pelo vue.

A partir do markdown

Uma tabela escrita em markdown e passada por `markdown_ds`: as colunas, seu alinhamento e a marcação de cada célula são lidas do documento, e a tabela é desenhada aqui como qualquer outra. `markdown` mantém o simples `<table>`, para o que não for uma página — um e-mail, um feed.

Agrupar linhas

Uma linha que contém apenas um grupo não é uma linha: é a linha entre duas sequências delas, dada uma palavra. Ela se estende pela tabela e nomeia o que segue — a mesma leitura que um separador de menu.

Células de estado

Um estado é um círculo, nunca uma cor escolhida por alguém: a célula assume um nome de tipo, ou um tipo com uma contagem e um título, e desenha o ícone de status que o resto do sistema desenha. Nada para estilizar na página.

Cabeçalho fixo

Uma tabela longa é lida coluna por coluna tanto quanto linha por linha. Com `sticky`, o cabeçalho permanece visível enquanto as linhas rolam para baixo; uma página com algo fixo na parte superior indica o quão abaixo em `--table-sticky-top`.

Uma tabela em uma zona própria

Uma zona `zone--table` é dada à tabela inteira: o que a impulsiona na parte superior, suas páginas na parte inferior, fora do que rola, e entre elas o solo da tabela até o fundo da zona, mesmo para três linhas. Qualquer tabela pode ser inserida nela, escrita pelo servidor ou por um vue. Com `natural`, como a da esquerda, a tabela mantém a largura de suas colunas, nem esticada nem comprimida.

Tabela de entidade Vue

Tabela Vue com seleção

O mesmo contrato no cliente: as chaves marcadas voltam através de v-model:selected, cada ação é emitida como bulk-action, e uma com um endereço é enviada como a tabela do servidor a envia. Esses não têm, então a linha abaixo diz o que teria sido feito. Três linhas por página, o total no final da barra, e Arquivar tudo precisando de nada marcado.

Paginação sem um total

Quando a API não retorna um total, o paginador recorre ao anterior/próximo.

Paginação, gerada pelo servidor

`pagination(page, pages_count)` gera as páginas de uma lista como links: cada uma mantém a rota e a consulta da página em que está — uma busca, uma ordenação — e muda apenas `page`, contada a partir de 1. Os números exibidos são os do pager do vue: o primeiro, o último, o atual e seus vizinhos. `compact` mantém anterior e próximo em torno do número da página; `route` e `params` navegam por outro endereço.

Formatadores de data Vue