Skip to main content

Dynamic Styling

in webforJ 25 and higher, it's possible to style individual rows and cells in the Table using custom part names. These names can be assigned dynamically based on your app's logic, giving you fine-grained control over the table’s appearance.

Row styling

The setRowPartProvider() method assigns part names to entire rows based on the data item they contain. This lets you highlight full rows that meet specific conditions—for example, alternating background colors for even rows.

These style names can be targeted using the ::part() selector in your CSS.

Shadow parts

The ::part() selector is a special CSS feature that allows you to style elements inside a component's shadow DOM—as long as those elements expose a part attribute. This is especially useful for styling internal parts of webforJ components, like rows or cells in a table.

For more on how shadow parts work and how to define and target them, see the Styling section.

Show Code

Cell styling

The setCellPartProvider() method styles individual cells based on both the data item and the column they belong to. This makes it ideal for highlighting specific values, like calling out ages preceding a threshold or invalid entries.

Like row parts, cell parts are defined by a name and targeted using the ::part() selector.

Show Code

Reacting to data updates

If your app modifies data programmatically, such as updating a user's age, the table will automatically re-evaluate and reapply any associated row or cell styles once the updated item is committed in the repository

Show Code