How to apply theme on tables

selfless-beaver · December 13, 2023, 6:06am

Hi im using table in my application i want to apply theme like grid (theme=“wrap-cell-content no-border row-stripes” ) on it, how can i apply it on table

import org.vaadin.stefan.table.Table;
im using this table , can anyone help

quirky-zebra · December 13, 2023, 6:39am

Those are grid themes, therefore those only apply to the official grid component. The mentioned table is a third party addon, which you have to style yourself with css.

Tatu2 · December 15, 2023, 7:30am

I think that add-on does not have anything similar

Tatu2 · December 15, 2023, 7:32am

I have similar theme variants in my BeanTable add-on though

github.com

TatuLund/bean-table/blob/v24/src/main/resources/META-INF/resources/frontend/styles/bean-table.css

.bean-table thead {
    font-weight: 700;
    background: var(--lumo-contrast-5pct);
    position: relative;
    height: var(--lumo-size-xs);
}

.bean-table thead tr {
    height: 0px;
}

.bean-table[theme~="padding"] thead th {
    padding-top: var(--lumo-space-s);
    padding-bottom: var(--lumo-space-s);
    padding-left: var(--lumo-space-xs);
    padding-right: var(--lumo-space-xs);
}

.bean-table[theme~="padding"] tbody td {
    padding-left: var(--lumo-space-s);

This file has been truncated. show original

If HtmlTable API allows you to add class names to right elements, you could apply similar CSS to it, as the both are based on native Table elemetn.