Vaadin grid cell style

Flow
1

Hi,
I am using Vaadin grid (5.1.0) in a Polymer 3 (LitElement) application. I would like to change background color of some cells based on some of the values. I am able to achieve that by using like this.

<vaadin-grid-column   flex-grow="0" >
  <template class="header">Test</template>
  <template>
    <div class$="{{item.styleClass}}">
      [[item.testvalue]
]
    </div>
  </template>
  </vaadin-grid-column>

I set the styleClass while binding the grid. it works fine. But the issue is the background color I set is not applied the entire cell. It only shows up the text area where the value is displayed. Could you please suggest any solution for this or any other examples i can refer.

Thanks

2

Hi. Starting from 5.3.0, there is cellClassNameGenerator API to provide classes for underlying grid cells.

grid.cellClassNameGenerator = function(column, rowData) {
  return rowData.item.styleClass;
};

Note that you also need to define CSS in the dom-module (as the internal cells are inside shadow tree):

<dom-module id="my-grid-styles" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="cell"]
.item-style-class {
        font-style: italic;
      }
    </style>
  </template>
</dom-module>

See demo: https://vaadin.com/components/vaadin-grid/html-examples/grid-styling-demos

3

It worked. Thanks Serhii for the help

4

Hi Guys,

I am new to the Polymer.

Using polymer3(LitElement) with typescript, unable to implement the Styling for particular columns and the Sorting functionality.
If you guys have any working example, please share it.