@logo-elements/grid

A web component for showing tabular data.

<vaadin-logo-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="address" width="15em" flex-grow="2" header="Address"></vaadin-grid-column>
</vaadin-logo-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-logo-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 @logo-elements/grid -s

Once installed, import the components in your application:

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

For more detailed information, please visit:

Logo Elements Documentation ↗