Saltar al contenido principal

Descripción general del componente tabla

El componente tabla le permite crear tablas en sus aplicaciones, desde simples visualizaciones de datos hasta tablas complejas que administran grandes conjuntos de datos con funciones avanzadas como búsqueda y filtrado. La implementación de los componentes es modular, lo que le permite seleccionar las funciones necesarias para su aplicación y excluir las innecesarias. El componente proporciona un conjunto de componentes principales componibles que se pueden ampliar o personalizar fácilmente. Permite crear implementaciones sencillas para casos de uso básicos, pero también proporciona la flexibilidad necesaria para los complejos.

Jutro Design System proporciona los diferentes componentes para manejar la estructura de la tabla (encabezados, filas, columnas), la paginación y los estados de la tabla. También facilita la implementación de características adicionales que complementan la solución base. Por ejemplo, al implementar el ordenamiento, los encabezados de columna incluyen indicadores de ordenamiento, pero es responsabilidad del desarrollador implementar la función de ordenamiento de datos para conectarse a la devolución de llamada proporcionada.

Para facilitar la implementación y servir de referencia, los ejemplos proporcionados incluyen algunas de estas características adicionales, mediante código personalizado o la biblioteca TanStack Table. Las características que se muestran en los ejemplos proporcionados son las siguientes:

  • Título y subtítulo. Encabezado que describe el contenido de la tabla.
  • Controles de tabla. Conjunto de controles para manipular cómo se muestran los datos, como la búsqueda y los filtros.
  • Acciones de la tabla. Conjunto de botones que realizan una operación en el conjunto de datos de la tabla, como agregar un nuevo registro o exportar datos.
  • Encabezados de columna. Rótulos para cada columna que identifican el tipo de datos. Los encabezados también pueden incluir la funcionalidad de ordenamiento.
  • Filas de datos. Conjunto completo de celdas que representa un solo elemento o registro. Las filas pueden incluir controles de selección en forma de casillas de verificación.
  • Acciones de fila. Conjunto de acciones en la última columna que un usuario puede realizar en una fila individual.
  • Paginación. Controles que permiten a los usuarios navegar por las páginas de datos y ajustar el número de filas que se muestran por página.
  • Estados de tabla. Retroalimentación visual clara que se proporciona cuando la tabla no puede mostrar filas de datos porque aún se está cargando, faltan de datos o se ha producido un error.

Componentes​

Parte de la solución del componente tabla es un conjunto de componentes de Jutro que puede utilizar para crear su implementación de tabla. Los componentes están diseñados para permitir la implementación de características adicionales no cubiertas por ellos mismos, como la búsqueda, el filtrado y el ordenamiento.

Estructura​

La estructura de la tabla se construye con un conjunto de componentes que definen la disposición y composición de la tabla y la organización del contenido. Son responsables de cumplir con los requisitos de accesibilidad y proporcionan un conjunto de propiedades y funciones de devolución de llamada para habilitar características adicionales. Estos componentes incluyen:

  • Table, que es el contenedor principal de la tabla, que proporciona la estructura y la disposición y composición.
  • TableHeader, que define la sección del encabezado de la tabla.
  • HeaderRow, que define una sola fila dentro del encabezado de la tabla, que contiene varias celdas de encabezado.
  • HeaderCell, que representa una sola celda de encabezado en una fila.
  • TableBody, que define la sección del cuerpo de la tabla y contiene las filas de datos.
  • BodyRow, que representa una sola fila en la tabla y contiene varias celdas.
  • BodyCell, que representa una sola celda en una fila y contiene datos o elementos interactivos.

Estos componentes deben anidarse adecuadamente para crear una estructura de tabla válida.

Los componentes de la estructura de la tabla son totalmente compatibles con los atributos colspan y rowspan, lo que le permite crear celdas que abarcan varias columnas o filas. Esto permite composiciones y disposiciones de tablas complejos, como encabezados agrupados, celdas de datos combinadas y presentación jerárquica de datos.

Para obtener más información sobre los componentes de la estructura de la tabla, consulte sus contratos de componentes.

Paginación​

La característica de paginación de tablas se implementa mediante el componente Pagination, que proporciona controles para navegar por las páginas de datos y ajustar la cantidad de filas que se muestran por página. El componente incluye propiedades y funciones de devolución de llamada que le permiten gestionar el estado de paginación y manejar las interacciones de los usuarios.

Para obtener más información sobre el componente Pagination, consulte los contratos de componentes.

Estados​

La característica de estados de tabla se implementa mediante un conjunto de componentes que proporcionan retroalimentación visual cuando la tabla no puede mostrar filas de datos, porque todavía se está cargando o faltan datos. Estos componentes incluyen:

  • TableLoader, que muestra un indicador de carga y un mensaje cuando la tabla está recuperando datos.
  • TableEmptyState, que muestra un mensaje configurable cuando no hay filas para mostrar en la tabla. También admite un botón de acción opcional para brindar a los usuarios una forma de ejecutar acciones, como volver a cargar una tabla.

Para obtener más información sobre los componentes de estados de la tabla, consulte sus contratos de componentes.

Extensión del componente tabla​

El componente tabla está diseñado para ampliarse con funcionalidades adicionales, como búsqueda, ordenamiento, acciones de fila, entre otras. Estas características no se implementan como parte de los componentes de Jutro, pero se pueden agregar a través de código de React personalizado o bibliotecas externas. Los componentes de la tabla proporcionan propiedades y funciones de devolución de llamada que le permiten implementar estas características de acuerdo con los requisitos de su aplicación. También garantizan que las tablas con funcionalidades adicionales cumplan con los estándares de accesibilidad.

La documentación del componente tabla incluye ejemplos que demuestran cómo implementar funcionalidades adicionales. Todos los ejemplos están desarrollados con y sin integración de TanStack Table, para que pueda evaluar mejor el método que mejor se adapte a los requisitos de su aplicación.

Para obtener más información acerca de los ejemplos, consulte ejemplos.

Extensión con código de React personalizado​

Puede extender el componente tabla escribiendo código de React personalizado que utilice las propiedades y las funciones de devolución de llamada proporcionadas por los componentes de Jutro. Este método le permite implementar características específicas adaptadas a las necesidades de su aplicación y tener el control sobre el comportamiento y la apariencia de la tabla.

Los ejemplos sirven como punto de partida para los desarrolladores que buscan mejorar las implementaciones de sus tablas con funcionalidades adicionales mediante el uso de código de React personalizado. Reutilizan componentes e íconos de Jutro, por eso, al seguir los ejemplos, estará seguro de que la característica implementada se corresponde con Jutro Design System.

Integración con bibliotecas externas​

El componente tabla está diseñado para funcionar sin problemas con o sin bibliotecas externas, como TanStack Table. Esto permite a los desarrolladores mejorar las implementaciones de tablas mediante la integración de funcionalidades componibles de bibliotecas populares, o bien, usar los componentes de tabla sin dependencias externas. En los ejemplos de implementaciones de las características de la tabla, se ve cómo se pueden aplicar las integraciones de TanStack Table. Si bien en los ejemplos se utiliza TanStack Table, puede integrar otras bibliotecas que se adapten mejor a las necesidades de su aplicación.

Una de las principales ventajas de utilizar bibliotecas externas es la capacidad de aprovechar sus funcionalidades incorporadas, como el ordenamiento, el filtrado u otros aspectos de la gestión de datos. Esto puede reducir significativamente el tiempo y el esfuerzo de desarrollo, así como proporcionar una implementación de tablas más robusta y rica en características.

Ejemplos​

Los ejemplos del componente tabla están disponibles tanto en las páginas de documentación mencionadas antes como en Storybook en Jutro. Visualmente, son uniformes en ambas plataformas, pero hay algunas diferencias en la estructura del código y las dependencias; en función de ellas, puede decidir cuáles se adaptan mejor a sus necesidades. Las principales características de los ejemplos son:

  • Estructura del código. Los ejemplos de la documentación están diseñados para presentar una característica singular y el ejemplo de código utiliza dependencias y cantidad de código mínimas. Los ejemplos de Storybook están estructurados para facilitar el análisis de múltiples características. El código compartido y las dependencias se organizan en diferentes archivos.
  • TanStack Table. Los ejemplos en ambas plataformas tienen una versión que usa TanStack Table para parte de la lógica de administración de datos, con el objetivo de mostrar cómo se pueden integrar bibliotecas externas en la implementación de tablas.
  • Simulación de obtención de datos asíncrona. En ambas plataformas, los ejemplos de las características que se usan normalmente cuando la tabla maneja la obtención de datos asíncrona tienen una versión que lo simula, para demostrar cómo manejar casos de carga de datos en implementaciones de tablas. Se aplica a las funciones de paginación, búsqueda y ordenamiento.
  • Prueba de ejemplos en su IDE. Los ejemplos en las páginas de documentación se presentan como fragmentos de código dentro del contenido de la documentación. Para probarlos en su IDE, copie los fragmentos de código en archivos en un solo directorio y utilícelos. Los ejemplos de Storybook pueden hacer referencia a archivos que no están disponibles en la pestaña Código fuente, por eso, utilizarlos en su IDE puede requerir una configuración adicional.
  • Edición dinámica. Puede experimentar con el código y ver resultados inmediatos utilizando la pestaña Controles en la característica de edición dinámica de Storybook. Los ejemplos de documentación requieren copiar el código en su IDE para realizar ediciones y probarlas.

Para explorar los ejemplos de componentes de tabla, visite:

Accesibilidad​

El componente tabla se construye con la accesibilidad como principio fundamental, implementando el patrón de cuadrícula. El componente cuenta con navegación por teclado completa, semántica ARIA adecuada y compatibilidad con lectores de pantalla para garantizar una experiencia de usuario inclusiva.

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

  • La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
  • El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
  • El elemento se puede operar con teclado, así como con mouse.
  • Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.