Saltar al contenido

v1.0.3

es

En esta página

Resumen
Ejemplo
Parámetros
Eventos
Paquete
Controles relacionados

DataGrid

Complete

Tabla con ordenación (clic en un encabezado: ascendente, descendente, desactivada), filtros por columna, paginación, selección de filas y plantillas.

Ejemplo

Control DataGrid

Parámetros

DataGrid

Parámetro	Tipo	Descripción
`Adaptive`	`bool`	Muestra cada fila como una tarjeta en pantallas estrechas.
`AllowAdd`	`bool`	Muestra un botón Add que crea un elemento nuevo (vea NewItemFactory).
`AllowCardView`	`bool`	Agrega a la barra de herramientas un botón que alterna entre la tabla y la vista de tarjetas.
`AllowDelete`	`bool`	Muestra el comando Delete en la columna de comandos (pide confirmación).
`AllowEdit`	`bool`	Muestra el comando Edit en la columna de comandos.
`AllowPaste`	`bool`	Modo por lotes: agrega un botón Paste que rellena las celdas editables a partir de texto del portapapeles separado por tabulaciones.
`AllowView`	`bool`	Agrega un comando View que muestra la fila de solo lectura en un cuadro de diálogo.
`CardView`	`bool`	Muestra cada fila como una tarjeta en lugar de una fila de tabla. Úselo con @bind-CardView.
`CellNavigation`	`bool`	Convierte la cuadrícula en una cuadrícula de teclado: las flechas, Inicio, Fin, Re Pág y Av Pág se mueven entre celdas; Intro, F2 o Espacio activan el control de la celda.
`Class`	`string`	Clases CSS adicionales que se agregan al elemento raíz.
`ColumnMenu`	`bool`	Agrega a cada encabezado un botón de menú con comandos para ordenar y ocultar la columna.
`Columns`	`RenderFragment`	Definiciones de columnas: elementos DataGridColumn.
`DataProvider`	`Func<DataGridRequest, ValueTask<DataGridResult<TItem>>>`	Carga filas desde su lado: recibe el inicio, el número, la ordenación, los filtros, la búsqueda, los grupos y los agregados y un token de cancelación (cancelado cuando empieza una solicitud más reciente o se quita la cuadrícula), y devuelve un DataGridResult.
`Dense`	`bool`	Usa un relleno de celda más ajustado.
`DetailTemplate`	`RenderFragment<TItem>`	Contenido que se muestra bajo una fila cuando se pulsa su botón de expansión.
`EditMode`	`DataGridEditMode`	None, Row (en línea), Dialog o Batch (todas las filas a la vez).
`EmptyContent`	`RenderFragment`	Se muestra cuando no hay filas.
`ExportChoices`	`bool`	Convierte Export en un menú: CSV o JSON, vista actual, filas seleccionadas, todas las filas, columnas ocultas.
`ExportFileName`	`string`	Nombre de archivo de la exportación CSV, sin la extensión.
`FilterOperators`	`bool`	Agrega sobre cada cuadro de filtro una lista de operadores (contiene, empieza por, es igual a, mayor que, está vacío...).
`FormatRules`	`IEnumerable<DataGridFormatRule>`	Reglas que colorean celdas o filas: campo, operador de filtro, valor, gravedad y Cell o Row. Gana la primera regla que coincide.
`FreezeFirstColumn`	`bool`	Mantiene visible la primera columna al desplazarse lateralmente.
`FrozenColumns`	`int`	Número de columnas iniciales que permanecen a la vista mientras el resto se desplaza lateralmente.
`FrozenEndColumns`	`int`	Número de columnas del borde derecho que permanecen a la vista mientras la tabla se desplaza lateralmente.
`FrozenRows`	`int`	Número de filas que permanecen bajo el encabezado mientras el cuerpo se desplaza (requiere Height).
`GroupBy`	`Func<TItem, Object>`	Agrupa filas por el valor devuelto; cada grupo tiene un encabezado contraíble.
`GroupPanel`	`bool`	Agrega sobre la tabla una franja donde los usuarios agrupan filas arrastrando encabezados o eligiendo columnas.
`GroupSummary`	`bool`	Muestra los agregados de las columnas en las filas de grupo (calculados localmente o tomados de DataGridResult.Groups con un DataProvider).
`GroupTitle`	`string`	Texto antes del valor del grupo en el encabezado.
`Height`	`string`	Altura máxima del cuerpo de la cuadrícula, por ejemplo 24rem (28rem de forma predeterminada con VirtualScroll).
`ItemKey`	`Func<TItem, Object>`	Devuelve una clave estable por elemento, para que la selección y los detalles abiertos sobrevivan a las recargas.
`Items`	`IEnumerable<TItem>`	Las opciones entre las que elegir.
`KeyboardShortcuts`	`bool`	Ctrl+A seleccionar todo, Ctrl+C copiar las filas seleccionadas, Esc borrar la selección, Alt+flechas cambiar de página.
`Label`	`string`	Texto visible de la etiqueta (gráficos: nombre accesible; IconButton: nombre accesible y sugerencia).
`Loading`	`bool`	Muestra una barra de progreso sobre las filas.
`LoadingSkeleton`	`bool`	Muestra filas de marcador de posición durante la primera carga.
`LoadMore`	`bool`	Reemplaza el paginador por un botón Load more que agrega la página siguiente.
`MultiSort`	`bool`	Mayús+clic en los encabezados ordena por varias columnas; los encabezados muestran el orden.
`NewItemFactory`	`Func<TItem>`	Crea el elemento para una fila nueva; de forma predeterminada es el constructor sin parámetros.
`NoMatchContent`	`RenderFragment`	Contenido que se muestra cuando los filtros o la búsqueda no dejan filas (de forma predeterminada: un texto con Clear filters).
`PageSize`	`int`	Filas por página.
`PageSizeOptions`	`IEnumerable<int>`	Números de filas ofrecidos en una lista desplegable bajo la tabla.
`Paging`	`bool`	Muestra la barra de paginación (true de forma predeterminada).
`PastePreview`	`bool`	Modo por lotes: muestra qué cambiará un pegado y pregunta antes de aplicarlo (activado de forma predeterminada).
`PersistKey`	`string`	Recuerda la posición y el tamaño (Window), la división (Splitter) o el diseño de un DataGrid (ordenación, filtros, columnas, anchos, página) en el almacenamiento local con este nombre y los restaura la próxima vez.
`Reorderable`	`bool`	Permite que los usuarios muevan columnas arrastrando los encabezados o con el menú Columns.
`Resizable`	`bool`	Agrega un tirador de arrastre (y flechas) para cambiar el ancho de cada columna.
`RowClass`	`Func<TItem, string>`	Devuelve una clase CSS adicional para una fila.
`RowHeight`	`int`	Altura de fila en píxeles cuando VirtualScroll está activado (44 de forma predeterminada).
`RowMenu`	`Func<TItem, IEnumerable<MenuCommand>>`	Devuelve los comandos del menú contextual de una fila.
`RowReorder`	`bool`	Permite arrastrar filas unas sobre otras; gestione RowMoved para cambiar su lista.
`RowSeverity`	`Func<TItem, Severity?>`	Devuelve una gravedad para teñir una fila, o null.
`RowValidator`	`Func<TItem, IEnumerable<string>>`	Comprueba toda la fila después de aplicar la edición; devuelve textos de error.
`SelectedItems`	`IEnumerable<TItem>`	Filas seleccionadas. Úselo con @bind-SelectedItems.
`Selection`	`SelectionMode`	None (predeterminado), Single o Multiple.
`SelectionActions`	`RenderFragment<IReadOnlyList<TItem>>`	Botones en la barra de selección; recibe los elementos seleccionados.
`ServerBulkLimit`	`int`	Con DataProvider: el mayor número de filas que la cuadrícula pide en una solicitud para seleccionar todas las filas filtradas o exportarlas (10000 de forma predeterminada). Por encima solo se usan las filas de la página.
`ShowCopy`	`bool`	Muestra el botón de copiar.
`ShowFilters`	`bool`	Muestra un cuadro de filtro bajo el encabezado de cada columna filtrable.
`ShowPrint`	`bool`	Agrega un botón Print que imprime la tabla.
`ShowSearch`	`bool`	Agrega un cuadro de búsqueda que encuentra texto en todas las columnas y lo marca en las celdas.
`ShowSelectionBar`	`bool`	Muestra la barra con el recuento de seleccionados, seleccionar todas las filas y borrar la selección (selección Multiple).
`ShowToolbar`	`bool`	Muestra la barra de herramientas con el selector de columnas y la exportación CSV.
`Striped`	`bool`	Sombrea una de cada dos filas.
`Style`	`string`	Estilo en línea agregado al elemento raíz.
`ToolbarContent`	`RenderFragment`	Contenido adicional en la barra de herramientas de una cuadrícula con ShowToolbar, por ejemplo DataGridSpreadsheetButton.
`TypedFilters`	`bool`	Usa cuadros de filtro de número, fecha y sí/no según el tipo de los valores de la columna (activado de forma predeterminada).
`UndoRedo`	`bool`	Agrega Deshacer y Rehacer para las ediciones de filas guardadas, las filas agregadas y las eliminadas (botones y Ctrl+Z / Ctrl+Y).
`ValueFilters`	`bool`	Agrega a cada encabezado filtrable un filtro de lista de valores (buscar, seleccionar todo, borrar); funciona con elementos en memoria.
`VirtualScroll`	`bool`	Dibuja solo las filas visibles (las filas deben tener la RowHeight fija).

DataGridColumn

Parámetro	Tipo	Descripción
`Aggregate`	`DataGridAggregate`	Agrega un valor a la fila de resumen: Sum, Average, Min, Max o Count.
`Align`	`TextAlign`	Left (predeterminado), Center o Right.
`BadgeSeverities`	`IReadOnlyDictionary<string, Severity>`	Color de una columna Badge por valor.
`CellSeverity`	`Func<TItem, Severity?>`	Devuelve una gravedad para teñir una celda, o null.
`ColumnSpan`	`Func<TItem, int>`	Devuelve cuántas columnas abarca la celda de un elemento.
`DataBar`	`bool`	Dibuja una barra detrás de los números en relación con el mayor valor de la columna.
`Editable`	`bool`	Permite que los usuarios editen las celdas de la columna haciendo clic en ellas.
`EditOn`	`DataGridEditOn`	Always, Create (solo filas nuevas) o Update (solo filas existentes).
`EditorOptions`	`IEnumerable<KeyValuePair<string, string>>`	Pares de valor y etiqueta; el editor pasa a ser una lista.
`Field`	`string`	Nombre de propiedad del elemento (también funcionan nombres anidados como Address.City). Lee la celda, ordena y filtra cuando Value no está definido, y se envía a DataProvider como identificador de la columna (Title de forma predeterminada).
`Filterable`	`bool`	Muestra un cuadro de filtro para esta columna (true de forma predeterminada).
`Format`	`string`	Cadena de formato para números y fechas, p. ej. N0 o d.
`Group`	`string`	Texto del encabezado apilado sobre esta columna; las vecinas con el mismo texto comparten una celda.
`HelpText`	`string`	Una indicación que se muestra bajo el campo en el cuadro de diálogo de edición.
`Hidden`	`bool`	Oculta la columna al principio; los usuarios pueden mostrarla desde la barra de herramientas.
`ImageAlt`	`Func<TItem, string>`	Texto alternativo de una columna Image por fila.
`ImageHeight`	`int`	Altura de la imagen en píxeles (32 de forma predeterminada).
`LinkHref`	`Func<TItem, string>`	Dirección de una columna Link por fila (de forma predeterminada: el valor).
`LinkTarget`	`string`	Destino del enlace, por ejemplo _blank.
`Max`	`Double?`	Mayor valor permitido (ProgressBar: el valor que significa 100 %; Rating: número de estrellas).
`MaxLength`	`int?`	Mayor número de caracteres permitido.
`MaxWidth`	`string`	Container: ancho máximo fijo desde un punto de interrupción (Xs a Xxl). DataGridColumn: ancho máximo como longitud CSS; el tirador de redimensionado se detiene en él.
`MergeRows`	`bool`	Combina verticalmente las celdas vecinas que tienen el mismo texto.
`Min`	`Double?`	Menor valor permitido.
`MinLength`	`int?`	Menor número de caracteres aceptado al guardar una edición.
`Pattern`	`string`	Expresión regular con la que debe coincidir el texto editado.
`PatternMessage`	`string`	Texto de error que se muestra cuando Pattern no coincide.
`ProgressMax`	`Double`	Valor que llena una columna Progress (100 de forma predeterminada).
`Required`	`bool`	El editor rechaza un valor vacío.
`Sortable`	`bool`	Permite ordenar por esta columna (true de forma predeterminada).
`Template`	`RenderFragment<TItem>`	Contenido personalizado de la celda. La fila está disponible como contexto.
`Title`	`string`	Texto del título (encabezado del panel lateral, rótulo de pestaña, encabezado de columna, rótulo de paso).
`Type`	`DataGridColumnType`	Cómo se dibuja la celda: Text, Check, Image, Progress, Link, Badge o Dropdown.
`Validate`	`Func<TItem, Object, string>`	Paso de Stepper: se ejecuta antes de continuar, devuelva false para quedarse en el paso. Columna de DataGrid: recibe el elemento y el valor analizado y devuelve un texto de error o null.
`Value`	`Func<TItem, Object>`	Devuelve el valor de la celda. Se usa para mostrar, ordenar y filtrar.
`Width`	`string`	Skeleton: cualquier longitud CSS. Charts: ancho del dibujo en unidades SVG (el gráfico sigue adaptándose a su contenedor).

Eventos

DataGrid

Evento	Tipo	Descripción
`CardViewChanged`	`EventCallback<bool>`	Se genera cuando el usuario alterna entre la tabla y las tarjetas.
`OnLoadError`	`EventCallback<Exception>`	Se genera con la excepción cuando DataProvider falla; la cuadrícula no muestra entonces ninguna fila. Sin un controlador, el error va al límite de errores.
`OnRowDeleting`	`EventCallback<DataGridRowChange<TItem>>`	Se ejecuta después de la confirmación; defina Error en el argumento para cancelar la eliminación.
`OnRowSaving`	`EventCallback<DataGridRowChange<TItem>>`	Se ejecuta antes de conservar una fila; defina Error en el argumento para cancelar y mostrar el texto.
`PageSizeChanged`	`EventCallback<int>`	Se genera cuando se elige otro tamaño de página.
`RowAdded`	`EventCallback<TItem>`	Se genera con el nuevo elemento tras guardarlo; agréguelo a su lista.
`RowDeleted`	`EventCallback<TItem>`	Se genera con el elemento tras confirmar la eliminación; quítelo de su lista.
`RowMoved`	`EventCallback<DataGridRowMove<TItem>>`	Se genera cuando una fila se suelta sobre otra: el elemento, los índices de página (FromIndex, ToIndex), los índices en toda la lista ordenada y filtrada (AbsoluteFromIndex, AbsoluteToIndex; PageOffset es la diferencia) y el elemento sobre el que se soltó (TargetItem).
`RowSaved`	`EventCallback<TItem>`	Se genera con el elemento después de aplicarle una edición válida.
`RowsPasted`	`EventCallback<int>`	Se genera con el número de filas rellenadas por Paste.
`SelectedItemsChanged`	`EventCallback<IEnumerable<TItem>>`	Se genera cuando cambia la selección.
`StateChanged`	`EventCallback<DataGridState>`	Informa del DataGridState tras cada cambio de ordenación, filtros, columnas, anchos o página.

DataGridColumn

Evento	Tipo	Descripción
`Edited`	`EventCallback<DataGridEdit<TItem>>`	Se genera con el elemento y el nuevo texto cuando se confirma una edición.

Paquete

DataGrid forma parte de RayCraft Complete. Paquete: RayCraft.Blazor.Complete. Se obtiene del feed privado de RayCraft y requiere una licencia activa. Consulte Primeros pasos.

DataGridPdfButtonUn botón que exporta el DataGrid conectado a un archivo PDF.

Enviar comentariosVersión 1.0.3