<vaadin-grid>
Live Demo ↗ | API documentation ↗
<vaadin-grid> is a free, high quality data grid / data table Polymer element, part of the Vaadin Core Elements.
<template is="dom-bind">
<x-data-provider data-provider="{{dataProvider}}"></x-data-provider>
<vaadin-grid data-provider="[[dataProvider]]" size="200">
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header"></template>
<template>
<iron-image src="[[item.picture.thumbnail]]"></iron-image>
</template>
</vaadin-grid-column>
<vaadin-grid-column width="calc(50% - 100px)">
<template class="header">First Name</template>
<template>[[item.name.first]]</template>
</vaadin-grid-column>
<vaadin-grid-column width="calc(50% - 100px)">
<template class="header">Last Name</template>
<template>[[item.name.last]]</template>
</vaadin-grid-column>
</vaadin-grid>
</template>
Running demos and tests in browser
-
Fork the
vaadin-grid
repository and clone it locally. -
Make sure you have npm installed.
-
When in the
vaadin-grid
directory, runnpm install
and thenbower install
to install dependencies. -
Run
polymer serve --open
, browser will automatically open the component API documentation. -
You can also open demo or in-browser tests by adding demo or test to the URL, for example:
Running tests from the command line
- When in the
vaadin-grid
directory, runpolymer test
Following the coding style
We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running gulp lint
, which will automatically lint all .js
files as well as JavaScript snippets inside .html
files.
Creating a pull request
- Make sure your code is compliant with our code linters:
gulp lint
- Check that tests are passing:
polymer test
- Submit a pull request with detailed title and description
- Wait for response from one of Vaadin Elements team members
License
Apache License 2.0