Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vaadin/grid

Package Overview
Dependencies
Maintainers
19
Versions
404
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/grid

A free, flexible and high-quality Web Component for showing large amounts of tabular data

  • 22.0.0-alpha8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
80K
increased by7.12%
Maintainers
19
Weekly downloads
 
Created
Source

<vaadin-grid>

Live Demo ↗ | API documentation ↗

<vaadin-grid> is a free, high quality data grid / data table Web Component, part of the Vaadin components.

npm version Published on Vaadin Directory Discord

<vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
  <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
  <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column>
  <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column>
  <vaadin-grid-column id="addresscolumn" width="15em" flex-grow="2" header="Address"></vaadin-grid-column>
</vaadin-grid>

<script>
  // Customize the "Address" column's renderer
  document.querySelector('#addresscolumn').renderer = (root, grid, model) => {
    root.textContent = `${model.item.address.street}, ${model.item.address.city}`;
  };

  // Populate the grid with data
  const grid = document.querySelector('vaadin-grid');
  fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
    .then((res) => res.json())
    .then((json) => (grid.items = json.result));
</script>

Screenshot of vaadin-grid, using the default Lumo theme

Installation

Install vaadin-grid:

npm i @vaadin/grid --save

Once installed, import it in your application:

import '@vaadin/grid/vaadin-grid.js';

Getting started

Vaadin components use the Lumo theme by default.

To use the Material theme, import the correspondent file from the theme/material folder.

Entry points

  • The component with the Lumo theme:

    theme/lumo/vaadin-grid.js

  • The component with the Material theme:

    theme/material/vaadin-grid.js

  • Alias for theme/lumo/vaadin-grid.js:

    vaadin-grid.js

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

License

Apache License 2.0

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Keywords

FAQs

Package last updated on 12 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc