[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Paginación de cuadrícula/tabla Web Components
Las IU de tablas tabulares se utilizan habitualmente en muchos productos web. Crear una interfaz de usuario de tabla tabular desde cero no es fácil; sin embargo, Ignite UI for Web Components, crear una interfaz de usuario de tabla es simple y vincular grandes cantidades de datos locales o remotos a la cuadrícula Web Components es fácil. Dado que la cuadrícula está virtualizada de forma predeterminada, no es necesario incluir paginación de tablas para mostrar grandes conjuntos de datos. Se utiliza principalmente debido a sus formas más eficientes de organizar datos complejos en la interfaz de usuario. Con la paginación de tablas, los datos se pueden mostrar en un número determinado de filas, lo que permite a los usuarios "desplazarse" por sus datos, sin necesidad de una barra de desplazamiento. La interfaz de usuario para la paginación de tablas generalmente incluye elementos como la página actual, el total de páginas y las flechas/botones Anterior y Siguiente en los que se puede hacer clic y que permiten a los usuarios hojear las páginas, como se demuestra aquí:
La paginación de filas se habilita dentro de la Ignite UI for Web Components configurando la propiedad IsPagerVisible
. Además, puede limitar el número máximo de filas visibles configurando pageSize
.
Web Components Row Paging Example
Descripción general
Desde una perspectiva de UX, la paginación de tablas tiene ventajas y desventajas. Según un artículo reciente sobre UX Matters, aquí hay un desglose de lo bueno y lo malo cuando se trata de paginación de tablas.
Beneficios de la paginación de tablas:
- Limita la elección del usuario
- Los clics son medibles
Negativos de paginación de tablas:
- Los usuarios todavía tienen que desplazarse
- Los buscapersonas funcionan y se comportan de manera diferente de un sitio a otro
- Demasiados controles de UI pueden resultar confusos
- Los usuarios perciben la paginación como algo lento y engorroso.
- Es posible que los usuarios no noten los controles de paginación
- La carga de la página puede ser lenta
- Los usuarios no saben si las acciones se aplican a la página o al conjunto completo de datos.
Con la cuadrícula Web Components Ignite UI, permitimos al desarrollador agregar paginación; sin embargo, como la cuadrícula tiene un desplazamiento infinito integrado de forma predeterminada, recomendamos el desplazamiento infinito (o virtual) en lugar de agregar un buscapersonas a la cuadrícula. Con el desplazamiento virtualizado e infinito como experiencia de usuario predeterminada, obtienes:
- Mejor rendimiento sin dejar de tener control sobre la cantidad de datos que se "paginan" a través de la interacción de desplazamiento
- Enfoque natural para desplazarse por todo el contenido.
- Todas las interacciones son claras para el usuario final.
- Mapas de las interacciones naturales en una UX móvil
Web Components Grid/Page Synchronization
Cuando los usuarios interactúan con la cuadrícula, como ordenar y agrupar, y usted ha habilitado el buscapersonas Web Components en la cuadrícula, debe usar las siguientes funciones para garantizar que los datos de paginación Web Components estén sincronizados con la visualización de la tabla Web Components.
- aplicarclasificaciones
- aplicarGrupos
- aplicar filtros
API References
IgcGridComponent
IsPagerVisible
pageSize