DataGrid · Documentación de Zeyn

Esta página está traducida del inglés. Leer la página en inglés

DataGrid muestra filas de una acción que recibe un DataQuery y devuelve Page<E>. La paginación, la ordenación, los filtros y los totales se ejecutan en el servidor, así que una tabla sobre un millón de filas cuesta al navegador lo mismo que una sobre cien.

Una tabla

DataGrid::of(search_samples)
    .paging(Paging::pages(8))
    .column(Sample::code).width(110).filter()
    .column(Sample::name).flex(1).filter()
    .column(Sample::unit).width(120).filter().badge(|u| match u {
        Unit::Piece => Tone::Neutral,
        Unit::Kg => Tone::Info,
        Unit::Liter => Tone::Brand,
    })
    .column(Sample::price).width(150).avg()
    .column(Sample::stock).width(150).sum().progress(120)
    .column(Sample::active).width(100).check_icon()
    .row_style(|s| match s.stock {
        0 => Some(RowStyle::Danger),
        1..=9 => Some(RowStyle::Warning),
        _ => None,
    })

Code	Name	Unit	Price	Stock
S-0001	Green tea 105	Piece	83,69 ₺	37
S-0002	Coffee beans 110	Liter	162,88 ₺	74
S-0003	Olive oil 115	Kg	242,07 ₺	111
S-0004	Honey 120	Piece	321,26 ₺	28
S-0005	Hazelnuts 125	Liter	400,45 ₺	65
S-0006	Dried apricots 130	Kg	479,64 ₺	102
S-0007	Cheese 135	Piece	558,83 ₺	19
S-0008	Bulgur 140	Liter	638,02 ₺	56
			Promedio 1.212,16 ₺	Suma 7.140

Ordena haciendo clic en una cabecera, escribe en un cuadro de filtro, arrastra una cabecera para mover una columna o su borde para cambiarle el tamaño. Los totales cubren todas las filas filtradas, no solo la página.

La acción

#[action(permission = "stock.product.read")]
pub async fn search_samples(q: DataQuery, store: SampleStore) -> Result<Page<Sample>> {
    Ok(q.apply(store.all()?))
}

DataQuery::apply filtra, ordena, totaliza y pagina un Vec en memoria, lo que sirve para listas pequeñas y pruebas. Un store respaldado por una base de datos lee el mismo DataQuery (página, orden, filtros, totales) y responde con SQL; consulta Datos y bases de datos.

Paginación

Paginación	Uso
`Paging::pages(n)`	Páginas numeradas, 50 filas salvo que se indique otra cosa
`Paging::infinite(n)`	Carga más filas al desplazarse
`Paging::virtual_scroll()`	Listas muy grandes; solo las filas visibles están en la página
`Paging::none()`	Listas cortas que caben en una página

El servidor limita el tamaño de página pida lo que pida el cliente.

Columnas

Llamada	Resultado
`.width(px)`, `.flex(n)`	Ancho fijo o una parte del ancho libre
`.filter()`	Un cuadro de filtro adecuado al tipo: texto, rango numérico, rango de fechas, lista de opciones
`.sum()`, `.avg()`, `.min()`, `.max()`	Totales en el pie. `sum` sobre una columna de texto no compila
`.badge(\|v\| tone)`	Muestra el valor como una insignia de color
`.progress(max)`	Una barra de 0 a `max`
`.check_icon()`	Una marca de verificación para `true`
`.link(\|row\| effect)`	Convierte la celda en un enlace que ejecuta un effect
`.pin_start()`, `.hidden()`	Fijada al inicio, u oculta hasta que el usuario la muestre
`.editable()`	Editable en el sitio, se guarda con `.edit_with(action)`

Filas

.on_open(|row| effect): doble clic o Enter en una fila.
.row_action(label, action, |row| input): un botón en cada fila.
.bulk_action(label, action, M::id): se ejecuta sobre las filas seleccionadas.
.row_menu(|row| ContextMenu): el menú contextual de una fila.
.row_style(|row| Option<RowStyle>): filas de peligro, advertencia o éxito.
.exportable(): exportación CSV de las filas filtradas, enviada en streaming por el servidor.

La referencia del DataGrid cubre vistas guardadas, maestro y detalle, agrupación, datos en árbol, edición en línea, navegación entre celdas, copiar y pegar, virtualización de columnas y accesibilidad.