Estilos dinámicos 25.00
En webforJ 25 y versiones posteriores, es posible aplicar estilos a filas y celdas individuales de Table mediante nombres de partes personalizados. Estos nombres se pueden asignar dinámicamente según la lógica de tu aplicación, lo que te ofrece un control detallado sobre la apariencia de la tabla.
Estilos de filas
El método setRowPartProvider() asigna nombres de partes a filas enteras según el elemento de datos que contienen. Esto te permite resaltar filas completas que cumplan condiciones específicas, por ejemplo, alternar los colores de fondo de las filas pares.
Puedes seleccionar estos nombres de estilo con el selector ::part() en tu CSS.
El selector ::part() es una característica especial de CSS que permite aplicar estilos a los elementos dentro del shadow DOM de un componente, siempre que esos elementos expongan un atributo part. Esto resulta especialmente útil para aplicar estilos a partes internas de los componentes de webforJ, como las filas o celdas de una tabla.
Para obtener más información sobre el funcionamiento de las partes de sombra y cómo definirlas y seleccionarlas, consulta la sección Estilos.
Estilos de celdas
El método setCellPartProvider() aplica estilos a celdas individuales según el elemento de datos y la columna a la que pertenecen. Es ideal para resaltar valores específicos, como señalar edades que superan un umbral o entradas no válidas.
Al igual que las partes de fila, las partes de celda se definen mediante un nombre y se seleccionan con el selector ::part().
Responder a las actualizaciones de datos
Si tu aplicación modifica datos mediante programación, por ejemplo, al actualizar la edad de un usuario, la tabla volverá a evaluar y aplicar automáticamente los estilos de fila o celda asociados una vez que el elemento actualizado se confirme en el repositorio.
En esta demostración, las celdas de la columna Age se estilizan según un umbral: las edades mayores de 30 se muestran en verde, mientras que las edades de 30 o menos se muestran en rojo. Al hacer clic en el botón, la edad de Alice alterna entre 28 y 31, lo que activa setCellPartProvider para volver a aplicar el estilo correspondiente cuando se confirman los datos.
Filas alternas
Activa colores de fondo alternos para las filas y mejora la legibilidad:
// Apply striped row styling
table.setStriped(true);
Bordes
Configura qué bordes se muestran alrededor de Table, las columnas y las filas:
// Enable all borders
table.setBordersVisible(EnumSet.of(Table.Border.AROUND, Table.Border.COLUMNS, Table.Border.ROWS));
// Remove all borders
table.setBordersVisible(EnumSet.noneOf(Table.Border.class));
La demostración siguiente muestra una forma sencilla de adaptar la apariencia visual de Table al resto de tu aplicación mediante setStriped() y setBordersVisible().
Para obtener información sobre cómo usar el patrón Repository para administrar y consultar colecciones, consulta los artículos sobre Repository.
Sigue aprendiendo
ArtículoSpring Data JPA grid: sort, filter, and page in Java
ArtículoJava Data Grid: Build Fast, Sortable Tables with webforJ
ArtículoA Java design system built in: webforJ DWC tokens and themes
ArtículoJava web front end for a database: browse and edit
ArtículoMaking Data Display Less Boring in webforJ
ArtículoBuilding Better CSS with webforJ's Styling System