5.0.0-alpha7 – Lumo theme and core style update

Live Demo →
API Documentation →

✨ Updates

• You can now style the first body row with [part="row"][first]. Useful for canceling a row border for the first row.

🚨 Breaking changes

• The vaadin-grid-cell-content elements are now block containers instead of flex containers, and aligned to the center of the cell (instead of stretched).

Lumo

• Rows now have borders by default (previously opt-in, now opt-out).

• Lumo theme variants renamed (unify naming conventions):

  • borderless → no-border
  • row-dividers → no-row-borders
  • column-dividers → column-borders

v5.0.0-alpha6 — IE and Edge scrolling performance fix

Live Demo →
API Documentation →

Changes Since v5.0.0-alpha5:

• 2528ac5 Add tests for scrolling optimization
• 084cab3 Cleanup outer scroller logic
• 20bd9cd Defer setting state attributes to avoid Edge hiccups
• 4dc746c Sync with skeleton: Switch back to using function closures
• e5883af Fix src imports
• e0b505b Add test
• c1a9989 Add missing style for loading rows

v4.1.1 — IE and Edge scrolling performance fix

Live Demo →
API Documentation →

Changes Since v4.1.0:

• 1d407ed Add tests for scrolling optimization
• 26dd548 Cleanup outer scroller logic
• 1115962 Defer setting state attributes to avoid Edge hiccups

v5.0.0-alpha5 — Lumo version

Live Demo →
API Documentation →

⚠️ Breaking Changes:

• The element now uses vaadin-lumo-styles dependency instead of vaadin-valo-styles. When using with other Vaadin Elements, installing latest alpha versions is strongly recommended, to avoid having both packages installed and imported.

Changes Since v5.0.0-alpha4:

• 8a96a81 Migrate Valo to Lumo
• e6f34c1 Workaround mask-image CSS property to prevent crash in Edge
• 28d05d6 Add sudo: required in Travis config for running chrome-sandbox

v5.0.0-alpha4 — Fix tree-toggle icon name

Live Demo →
API Documentation →

Changes Since v5.0.0-alpha3:

• 438f464 Align with skeleton: add separate file for test suites
• d4a652c Hide internal stuff from API docs
• 197a2de Mark lifecycle callbacks as protected to fix polymer lint
• 17ae6ad Remove test ignore, align with skeleton
• 05d64ee Update demo helpers, use shared styles in demos
• c62495c Remove unused dev dependencies and imports in demos
• 3621c0b Update tree-toggle icon name

v5.0.0-alpha3 — Valo dependency update

Live Demo →
API Documentation →

⚠️ Breaking Changes:

• The element now uses vaadin-valo-styles dependency instead of vaadin-valo-theme. When using with other Vaadin Elements, installing latest alpha versions is strongly recommended, to avoid having both packages installed and imported.

Changes Since v5.0.0-alpha2:

• a355ba4 Update screenshot link

• a9211d9 Fix inline demo for webcomponents.org

• cc392f0 Update Valo dependency

  • Update other Vaadin dependencies as well
  • Remove unused paper-button dependency
  • Small fixes to the theme and demos

• 8737e22 Updated example screenshot

• 6599389 Add Getting Started and File Structure docs sections

• 7abfe93 Prevent text selection while column reorder on IE

• db19f38 Notify resize on appear

• b4c29be Fix tests

v4.1.0 - Tree support

Live Demo →
API Documentation →

New Features Since v4.0:

• Tree support for data provider:

  grid.dataProvider = function(params, callback) {
    // New request param: `params.parentItem`:
    // - `null` when first tree level is requested,
    // - parent item reference when a tree sublevel is requested.
    
    yourApiRequest(params, function(response) {
      // Callback expects items for the page, and total size of this tree level
      callback(response.items, response.totalLevelSize);
    });
  };

• New template variables for use in <vaadin-grid-column> body cell templates:

  • level (type: integer Number), current item’s level of the tree. First level is 0.
  • expanded (type: Boolean), true when current item’s tree sublevel is expanded. Supports two-way binding. Default is false, tree is collapsed.

• New helper element: <vaadin-grid-tree-toggle> for use in column templates:

  <vaadin-grid data-provider="[[treeDataProvider]]">
    <vaadin-grid-column>
      <template class="header">Name</template>
      <template>
  
        <vaadin-grid-tree-toggle
            leaf="[[!item.hasChildren]]"
            expanded="{{expanded}}"
            level="[[level]]">
          [[item.name]]
        </vaadin-grid-tree-toggle>
  
      </template>
    </vaadin-grid-column>
  </vaadin-grid>

• New <vaadin-grid> tree APIs:

  • expandItem(item) method
  • collapseItem(item) method
  • expandedItems array

• loading (Boolean, read-only, notifying) property API is exposed on the <vaadin-grid> element.

• loading state attribute on the row parts is available for theming

v5.0.0-alpha2

Live Demo →
API Documentation →

Changes Since v5.0.0-alpha1:

• 20b598a Update dependencies
• ed2c566 Fix ElementMixin route
• ebb6ed9 Fix screenshot path

v5.0.0-alpha1 - Use Valo theme by default

Live Demo →
API Documentation →

Changes Since v4.1.0-beta1:

• f972257 Bump dependencies versions

• 148e130 Use Vaadin.ElementMixin

• dbab831 Added basic example screenshot file.

• e88f7ae Add Valo theme variations demos [skip ci]

• da14af7 Add ThemableMixin documentation to Styling docs.

• 709da8d Fix wrong JSDoc annotation

• 66ed38c Drop legacy API for slots

• 77b239a Rename private column template properties

• c830633 Fix tests broken by Valo theme

• 1e2b30c Cleanup Valo theme

  • Move <vaadin-grid-sorter> and <vaadin-grid-tree-toggle> Valo theme
    styles into separate files
  • Make theme/valo/all-imports.html include Valo theme
  • Simplify <vaadin-grid-sorter> styles, remove default theme include
  • Small adjustments to crud demo

• cde941b Use Valo theme by default

v4.1.0-beta1

Live Demo →
API Documentation →

Changes Since v4.1.0-alpha6:

• 2ae740d Fix row details demos

• 9336e65 Run Polymer.flush() before measuring details cell height

New Features Since v4.0:

• Tree support for data provider:

  grid.dataProvider = function(params, callback) {
    // New request param: `params.parentItem`:
    // - `null` when first tree level is requested,
    // - parent item reference when a tree sublevel is requested.
    
    yourApiRequest(params, function(response) {
      // Callback expects items for the page, and total size of this tree level
      callback(response.items, response.totalLevelSize);
    });
  };

• New template variables for use in <vaadin-grid-column> body cell templates:

  • level (type: integer Number), current item’s level of the tree. First level is 0.
  • expanded (type: Boolean), true when current item’s tree sublevel is expanded. Supports two-way binding. Default is false, tree is collapsed.

• New helper element: <vaadin-grid-tree-toggle> for use in column templates:

  <vaadin-grid data-provider="[[treeDataProvider]]">
    <vaadin-grid-column>
      <template class="header">Name</template>
      <template>
  
        <vaadin-grid-tree-toggle
            leaf="[[!item.hasChildren]]"
            expanded="{{expanded}}"
            level="[[level]]">
          [[item.name]]
        </vaadin-grid-tree-toggle>
  
      </template>
    </vaadin-grid-column>
  </vaadin-grid>

• New <vaadin-grid> tree APIs:

  • expandItem(item) method
  • collapseItem(item) method
  • expandedItems array

• loading (Boolean, read-only, notifying) property API is exposed on the <vaadin-grid> element.

• loading state attribute on the row parts is available for theming