@vaadin/grid

What is @vaadin/grid?

@vaadin/grid is a web component for displaying tabular data. It provides a flexible and customizable grid layout that can handle large data sets with features like sorting, filtering, and pagination.

What are @vaadin/grid's main functionalities?

Data Display

This feature allows you to display data in a tabular format. The code sample shows how to define columns for a grid, specifying the data path and header for each column.

<vaadin-grid>
  <vaadin-grid-column path="name" header="Name"></vaadin-grid-column>
  <vaadin-grid-column path="age" header="Age"></vaadin-grid-column>
</vaadin-grid>

Sorting

Enables sorting of columns by clicking on the column headers. The 'sortable' attribute is added to the columns to allow this functionality.

<vaadin-grid>
  <vaadin-grid-column path="name" header="Name" sortable></vaadin-grid-column>
  <vaadin-grid-column path="age" header="Age" sortable></vaadin-grid-column>
</vaadin-grid>

Filtering

Allows users to filter data within the grid. The code sample demonstrates how to use filter columns to enable filtering functionality.

<vaadin-grid>
  <vaadin-grid-filter-column path="name" header="Name"></vaadin-grid-filter-column>
  <vaadin-grid-filter-column path="age" header="Age"></vaadin-grid-filter-column>
</vaadin-grid>

Pagination

Handles large data sets by paginating the data. The 'size' attribute defines the total number of items, and 'page-size' specifies the number of items per page.

<vaadin-grid size="200" page-size="50">
  <!-- columns -->
</vaadin-grid>

Other packages similar to @vaadin/grid

ag-grid

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It offers advanced features like grouping, pivoting, and tree data. Compared to @vaadin/grid, ag-Grid provides more complex data manipulation capabilities and is suitable for enterprise applications.

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It focuses on simplicity and flexibility, allowing developers to create custom table components. Unlike @vaadin/grid, which is a web component, react-table is specifically designed for React applications.

handsontable

Handsontable is a JavaScript/HTML5 data grid component with Excel-like features. It is highly customizable and supports features like data validation, formulas, and conditional formatting. Handsontable is more focused on spreadsheet-like functionality compared to @vaadin/grid.

README

@vaadin/grid

A web component for showing tabular data.

Documentation + Live Demo ↗

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

<script>
  // Customize the "Address" column's renderer
  document.querySelector('#address').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>

Installation

Install the component:

npm i @vaadin/grid

Once installed, import the components in your application:

import '@vaadin/grid';
import '@vaadin/grid/vaadin-grid-column-group.js';
import '@vaadin/grid/vaadin-grid-filter-column.js';
import '@vaadin/grid/vaadin-grid-selection-column.js';
import '@vaadin/grid/vaadin-grid-sort-column.js';
import '@vaadin/grid/vaadin-grid-tree-column.js';

Themes

Vaadin components come with two built-in themes, Lumo and Material. The main entrypoint of the package uses the Lumo theme.

To use the Material theme, import the components from the theme/material folder:

import '@vaadin/grid/theme/material/vaadin-grid.js';
import '@vaadin/grid/theme/material/vaadin-grid-filter-column.js';
import '@vaadin/grid/theme/material/vaadin-grid-selection-column.js';
import '@vaadin/grid/theme/material/vaadin-grid-sort-column.js';
import '@vaadin/grid/theme/material/vaadin-grid-tree-column.js';

You can also import the Lumo version of the components explicitly:

import '@vaadin/grid/theme/lumo/vaadin-grid.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-filter-column.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-selection-column.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-sort-column.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-tree-column.js';

Finally, you can import the un-themed components from the src folder to get a minimal starting point:

import '@vaadin/grid/src/vaadin-grid.js';
import '@vaadin/grid/src/vaadin-grid-column-group.js';
import '@vaadin/grid/src/vaadin-grid-filter-column.js';
import '@vaadin/grid/src/vaadin-grid-selection-column.js';
import '@vaadin/grid/src/vaadin-grid-sort-column.js';
import '@vaadin/grid/src/vaadin-grid-tree-column.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 usage statistics at development time to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.