vaadin-grid Overview

Overview

The vaadin-grid element is a free, flexible and high-quality Web Component for showing large amounts of tabular data. It is also a part of the vaadin-core-elements element bundle. See a detailed list of features on the vaadin-grid page.

The following chapters will guide you through the usage of vaadin-grid with code examples.

Data Sources: Data Sources chapter explains different ways of providing data for the grid and how to notify the element of any changes in the data.
Columns: Columns chapter shows how to define the columns that are displayed on the grid. This chapter also shows ways to customize the columns like defining the width, freezing some columns and allowing the user to hide/show columns.
Sizing and Styling: Sizing and Styling chapter gives examples on defining the size of the grid and adding some styles to individual rows, cells or the entire grid.
Headers and Footers: Headers and Footers chapter explains all about adding additional headers and footers with colspan and styling.
Formatting Data: Formatting Data chapter shows examples on how to add any elements inside the grid by using inline data in DOM or defining a renderer function.
Sorting Data: Sorting Data chapter gives an overview on how to enable sorting by certain column(s) and listen to related events.
Selection: Selection chapter explains different selection modes, how to deal with the selected rows and how to get notified when the selection changes.
Scrolling: Scrolling chapter has an example on how to programmatically control the scroll position of the grid.
Row Details: Row Details chapter introduces the row details feature, which allows opening a section of detailed information below a row.

Getting started

To install vaadin-grid to your project, you have three options. The recommended way is to use Bower.

1) Bower

Recommended way for installation is to use the Bower package manager. After creating a folder for your project, you can install the element (with all required dependencies) with the following command.

$ bower install --save vaadin-grid

Then use a normal HTML import to make the element available on your page.

<link rel="import" href="bower_components/vaadin-grid/vaadin-grid.html">

2) Vaadin CDN

You can also import the element without a local installation by using our CDN infrastructure.

<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html">

3) ZIP Download

As a third option, you can also download the required files locally by downloading the latest Vaadin Core Elements bundle as a zip package.

<link rel="import" href="libs/vaadin-grid/vaadin-grid.html">

Limitations

Some features found in the Grid component of Vaadin Framework like row editor, column resizing and column reordering are not yet supported.

License and Source Code

The vaadin-grid element is licensed under the Apache License 2.0. The source code is available on the GitHub project page.