Tablas

Tabla simple

Más ancho que la habitación

Tabla con acciones

Filas a rayas, iluminadas bajo el puntero

Filas que pueden ser marcadas

Una casilla en la cabeza de cada fila, una en el encabezado para todas, y las acciones arriba: publican las filas marcadas a su propia dirección, y se mantienen fuera de alcance mientras nada esté marcado.

Archivos, un total, una acción en cada fila

Rutas leídas por su nombre, las carpetas antes se cortan desde su inicio. La barra termina en cuántas filas hay, y una acción marcada como `todo` funciona con nada marcado — toma cada fila y guía la barra cuando es la esperada.

Filtros

Una barra de filtros en la cabeza de la tabla, un menú discreto cada uno, diciendo a qué se reduce una vez que lo hace. En el servidor viven en la consulta de la página — cada opción es un enlace — y el controlador reduce las filas a partir de ello; en vue son un valor entregado a la página para su api, o aplicados por la tabla a las filas que ya tiene. Cada opción es una caja — redonda para una elección de uno — coloreada por su tono cuando tiene uno, un estado o una categoría.

Ordenación

Un encabezado que ordena es un enlace en el servidor y un botón en vue: ascendente, descendente, luego de vuelta al orden que la página declaró, que la lista abre y que su flecha muestra desde el inicio. Las fechas vacías van al final de ambas maneras, y los nombres se comparan como los ordena el idioma. Aquí la tabla ordena las filas que se le dieron; un controlador que paginó su lista lee la misma consulta en su lugar.

Ordenación en el navegador, desde twig

`vue: true` entrega las mismas columnas y filas al gemelo de vue: ordena y busca toda la lista en el navegador, sin carga de página. Para una lista que la página mantiene completa — una corta, o una que ninguna api sirve.

Acciones en una selección

La misma barra cuando hay suficientes acciones para abarrotarla: se elige una, luego se aplica.

Celdas de enlace e ícono

Estado de carga

Estado vacío

Alineación de columnas

Códigos, cifras y totales

`cell: 'code'` establece un identificador en la cara mono; `cell: 'number'`, o una `unit`, escribe una cifra en la localidad de la página. `negative: true` dibuja una cifra por debajo de cero en el tono de error, su signo menos lo dice también. `totals` es una fila que la página entrega, dibujada debajo de las demás — la tabla no suma nada, manteniendo una página o una lista filtrada. Dibujada por el servidor, luego por vue.

Desde markdown

Una tabla escrita en markdown y pasada por `markdown_ds`: las columnas, su alineación y el marcado de cada celda se leen del documento, y la tabla se dibuja aquí como cualquier otra. `markdown` mantiene el simple `<table>`, para lo que no es una página — un correo, un feed.

Agrupar filas

Una fila que lleva solo un grupo no es una fila: es la línea entre dos series de ellas, dado una palabra. Se extiende por la tabla y nombra lo que sigue — la misma lectura que un separador de menú.

Celdas de estado

Un estado es un círculo, nunca un color que alguien eligió: la celda toma un nombre de tipo, o un tipo con un recuento y un título, y dibuja el ícono de estado que el resto del sistema dibuja. Nada para estilizar en la página.

Encabezado pegajoso

Una tabla larga se lee columna por columna tanto como fila por fila. Con `sticky`, el encabezado permanece a la vista mientras las filas se desplazan por debajo; una página con algo propio fijado en la parte superior indica cuán abajo en `--table-sticky-top`.

Una tabla en una zona propia

Se le da a la tabla una zona `zone--table` completa: lo que la impulsa en la parte superior, sus páginas en el pie, fuera de lo que se desplaza, y entre ellos el suelo de la tabla hasta el fondo de la zona, incluso para tres filas. Cualquier tabla puede ir en ella, escrita por el servidor o por un vue. Con `natural`, como la de la izquierda, la tabla mantiene el ancho de sus columnas, ni estiradas ni comprimidas.

Tabla de entidad Vue

Tabla Vue con selección

El mismo contrato en el cliente: las claves marcadas regresan a través de v-model:selected, cada acción se emite como acción masiva, y una con una dirección se publica como la tabla del servidor la publica. Estas no tienen ninguna, por lo que la línea de abajo dice lo que se habría hecho. Tres filas por página, el total al final de la barra, y Archivar todo sin necesidad de nada marcado.

Paginación sin un total

Cuando la API no devuelve un total, el paginador recurre a anterior/siguiente.

Paginación, dibujada por el servidor

`pagination(page, pages_count)` dibuja las páginas de una lista como enlaces: cada uno mantiene la ruta y la consulta de la página en la que se encuentra — una búsqueda, un orden — y solo cambia `page`, contado desde 1. Los números mostrados son los del paginador de vue: el primero, el último, el actual y sus vecinos. `compact` mantiene anteriores y siguientes alrededor del número de página; `route` y `params` pasan por otra dirección.

Formateadores de fecha Vue