Vaadin 14 网格多线单元格

Question

我在一列中有很长的字符串，我想在我的网格中将它们显示为多行单元格。我正在使用 Vaadin 14 + Java 并尝试为特定列设置 CSS-Style Class：

Java-代码:

@CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {

    public RisikoGrid() {
         setSizeFull();

         // add the column to the grid
         addColumn(Entity::getAttribute).setHeader("MyCol")
            .setFlexGrow(10).setSortable(true).setKey("mycolumn");

         // set CSS style class for the specific column
         this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});

   }
}

CSS（共享-styles.css）

.grid-mycol{
    background: red;
    white-space: normal;
    word-wrap: break-word;
}

虽然我在网络浏览器 (chrome) 中使用检查器时确实看到了 class-名称，但未应用 css。

我需要更改什么才能使其正常工作？

编辑：这是我的样式的样子 - 我什至看不到 background:red 例如：

Answer 1

我调查了为什么我的 css 设置没有出现在检查器中，解决方案是对以下内容的微小改动：

@CssImport("./styles/shared-styles.css")

至

@CssImport(value = "./styles/shared-styles.css", themeFor = "vaadin-grid")

我猜网格的组件范围不同于全局 CSS。

现在有效。

Answer 2

您可以使用内置的 wrap-cell-content 主题变体来允许文本在单元格内换行。

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

请参阅 https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos 上的最后一个示例 – 那里的文本没有那么长，但如果您将浏览器 window 设置得足够窄，您会看到一些地址分两行。

Vaadin 14 网格多线单元格

Vaadin 14 grid multi-line cells

java

vaadin

vaadin-grid

vaadin14