24.6.2 • Published 10 days ago

@vaadin/grid v24.6.2

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 days ago

@vaadin/grid

A web component for showing tabular data.

Documentation + Live Demo ↗

npm version

<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.

vaadinelementscomponentswebcomponentsweb-componentsgriddatagriddatatabledata-griddata-table
@open-wc/dedupe-mixin@polymer/polymer@vaadin/a11y-base@vaadin/checkbox@vaadin/component-base@vaadin/lit-renderer@vaadin/text-field@vaadin/vaadin-lumo-styles@vaadin/vaadin-material-styles@vaadin/vaadin-themable-mixinlit
@everything-registry/sub-chunk-975web-components-sdkowlcms-firmataruhil-ui@arcgis/core@aire-ux/aire-wizard@aire-ux/aire-overlay@aire-ux/aire-switch@c6o/vaadin-core@ddd-qc/files@digital-realty/ix-gridvaadin-flow-bom@holochain-playground/elements@hilla/react-components@gameon/on-ui-components@geoscene/core@logo-elements/grid@majinno/vaadin-components-import@mistio/mist-list@rajithareddy/testcustom@descope/web-components-ui@zalastax/nolb-_vaa@vaadin-component-factory/vcf-lookup-field@vaadin/vaadin-grid@vaadin/grid-pro@vaadin/crud@vaadin/react-components@vaadin-component-factory/keyboard-shortcut-manager@vaadin-component-factory/vcf-autocomplete@vaadin/vaadin-core
24.5.7

10 days ago

24.6.2

10 days ago

24.4.18

10 days ago

24.7.0-alpha5

10 days ago

24.6.1

16 days ago

24.7.0-alpha4

14 days ago

24.7.0-alpha3

22 days ago

24.7.0-alpha2

1 month ago

24.5.6

1 month ago

24.6.0

1 month ago

24.4.17

1 month ago

24.7.0-alpha1

1 month ago

23.5.11

1 month ago

24.5.5

2 months ago

24.4.16

2 months ago

23.5.10

2 months ago

24.6.0-rc1

2 months ago

23.5.9

2 months ago

24.5.4

2 months ago

24.4.15

2 months ago

24.6.0-beta1

2 months ago

24.6.0-alpha9

2 months ago

23.5.8

3 months ago

24.5.3

3 months ago

24.5.2

3 months ago

24.4.14

3 months ago

24.4.13

3 months ago

24.6.0-alpha8

3 months ago

24.6.0-alpha7

3 months ago

24.6.0-alpha6

3 months ago

24.6.0-alpha5

3 months ago

24.6.0-alpha4

3 months ago

24.6.0-alpha3

3 months ago

24.4.12

3 months ago

24.5.1

3 months ago

23.5.7

3 months ago

24.5.0

3 months ago

24.5.0-rc2

4 months ago

24.5.0-rc1

4 months ago

23.5.6

4 months ago

24.6.0-alpha2

4 months ago

24.6.0-alpha1

4 months ago

24.4.11

4 months ago

24.4.10

4 months ago

23.5.5

4 months ago

23.5.4

5 months ago

24.4.9

4 months ago

24.4.8

4 months ago

24.4.7

5 months ago

24.5.0-alpha11

5 months ago

24.5.0-alpha10

5 months ago

24.5.0-beta1

4 months ago

24.3.21

5 months ago

24.3.22

4 months ago

24.5.0-alpha9

5 months ago

24.4.6

5 months ago

24.3.20

5 months ago

24.5.0-alpha8

5 months ago

24.5.0-alpha7

6 months ago

24.3.19

6 months ago

24.4.5

6 months ago

24.5.0-alpha6

6 months ago

23.4.2

7 months ago

24.3.16

7 months ago

24.3.17

6 months ago

24.3.18

6 months ago

23.5.3

6 months ago

23.5.2

7 months ago

24.3.14

7 months ago

24.3.15

7 months ago

24.5.0-alpha5

6 months ago

24.5.0-alpha4

7 months ago

24.4.1

7 months ago

24.4.4

6 months ago

24.4.3

6 months ago

24.4.2

7 months ago

24.4.0

8 months ago

24.4.0-rc1

8 months ago

24.4.0-rc3

8 months ago

24.4.0-rc2

8 months ago

24.5.0-alpha1

8 months ago

24.5.0-alpha3

8 months ago

24.5.0-alpha2

8 months ago

24.3.13

8 months ago

24.4.0-beta3

8 months ago

24.4.0-beta2

9 months ago

24.3.12

9 months ago

24.4.0-beta1

9 months ago

24.4.0-alpha23

9 months ago

23.4.1

10 months ago

23.5.1

10 months ago

24.3.11

10 months ago

23.3.32

10 months ago

24.4.0-alpha22

10 months ago

24.4.0-alpha21

10 months ago

23.5.0

10 months ago

24.4.0-alpha20

10 months ago

24.4.0-alpha19

10 months ago

23.5.0-alpha1

10 months ago

24.3.10

10 months ago

24.4.0-dev.4b20a0c55

10 months ago

24.4.0-alpha18

10 months ago

24.4.0-dev.4b20a0c55.3

10 months ago

24.3.9

10 months ago

24.4.0-alpha17

10 months ago

24.2.9

11 months ago

24.3.8

11 months ago

24.2.8

11 months ago

23.3.31

11 months ago

24.4.0-alpha16

11 months ago

23.4.0

11 months ago

23.4.0-beta1

11 months ago

24.4.0-alpha15

11 months ago

24.3.7

11 months ago

24.4.0-alpha14

11 months ago

23.4.0-alpha4

11 months ago

24.2.7

11 months ago

24.4.0-alpha13

12 months ago

24.3.6

12 months ago

24.4.0-alpha12

12 months ago

24.4.0-alpha11

12 months ago

24.3.5

12 months ago

24.4.0-alpha10

12 months ago

24.4.0-alpha9

12 months ago

24.4.0-alpha8

12 months ago

24.4.0-alpha7

1 year ago

24.3.4

1 year ago

24.4.0-alpha6

1 year ago

24.4.0-alpha5

1 year ago

23.4.0-alpha3

1 year ago

24.4.0-alpha4

1 year ago

24.3.3

1 year ago

24.4.0-alpha3

1 year ago

23.3.30

1 year ago

24.4.0-alpha2

1 year ago

24.4.0-dev.223e39f050

1 year ago

24.4.0-dev.b3e1d14600

1 year ago

24.3.2

1 year ago

24.2.6

1 year ago

24.4.0-alpha1

1 year ago

24.3.1

1 year ago

24.3.0

1 year ago

24.3.0-rc2

1 year ago

24.2.0-alpha13

1 year ago

24.2.0-alpha2

2 years ago

24.2.0-alpha12

1 year ago

24.2.0-alpha11

1 year ago

24.2.0-alpha4

2 years ago

24.2.0-alpha10

1 year ago

24.2.0-alpha3

2 years ago

24.2.0-alpha6

1 year ago

24.2.0-alpha16

1 year ago

24.2.0-alpha5

2 years ago

24.2.0-alpha15

1 year ago

23.3.21

1 year ago

24.2.0-alpha8

1 year ago

24.2.0-alpha14

1 year ago

23.3.20

1 year ago

24.2.0-alpha7

1 year ago

23.3.23

1 year ago

23.3.22

1 year ago

23.3.25

1 year ago

23.3.24

1 year ago

23.3.27

1 year ago

23.3.26

1 year ago

23.3.29

1 year ago

23.3.28

1 year ago

23.3.18

2 years ago

23.3.17

2 years ago

23.3.19

2 years ago

23.4.0-alpha2

1 year ago

23.4.0-alpha1

1 year ago

24.2.0-dev.f254716fe

2 years ago

24.2.3

1 year ago

24.2.2

1 year ago

24.2.1

1 year ago

24.2.0

1 year ago

24.2.5

1 year ago

24.2.4

1 year ago

24.2.0-alpha9

1 year ago

24.1.15

1 year ago

24.1.14

1 year ago

24.1.11

1 year ago

24.1.10

1 year ago

24.1.13

1 year ago

24.1.12

1 year ago

24.3.0-alpha1

1 year ago

24.3.0-alpha2

1 year ago

24.3.0-alpha3

1 year ago

24.3.0-alpha4

1 year ago

24.3.0-alpha5

1 year ago

24.3.0-alpha6

1 year ago

24.3.0-alpha7

1 year ago

24.3.0-alpha8

1 year ago

24.3.0-alpha9

1 year ago

24.2.0-dev.e9803eea7

2 years ago

24.3.0-beta1

1 year ago

24.3.0-beta2

1 year ago

24.2.0-dev.385a0a5b2

2 years ago

24.0.14

1 year ago

24.0.13

1 year ago

24.0.10

2 years ago

24.0.12

2 years ago

24.0.11

2 years ago

24.2.0-dev.538d07bdf

2 years ago

24.2.0-rc1

1 year ago

24.1.9

1 year ago

24.3.0-alpha11

1 year ago

24.3.0-alpha10

1 year ago

24.1.4

2 years ago

24.1.3

2 years ago

24.1.2

2 years ago

24.2.0-beta2

1 year ago

24.1.8

1 year ago

24.2.0-beta1

1 year ago

24.1.7

1 year ago

24.2.0-beta4

1 year ago

24.1.6

1 year ago

24.2.0-beta3

1 year ago

24.1.5

1 year ago

23.1.16

1 year ago

24.3.0-rc1

1 year ago

24.2.0-alpha1

2 years ago

23.3.14

2 years ago

23.3.16

2 years ago

23.3.15

2 years ago

24.1.0-rc1

2 years ago

24.1.0-beta3

2 years ago

24.1.0-beta2

2 years ago

24.1.0-beta1

2 years ago

24.1.1

2 years ago

24.1.0

2 years ago

22.1.0

2 years ago

24.1.0-alpha10

2 years ago

24.0.9

2 years ago

24.0.8

2 years ago

24.0.7

2 years ago

24.0.6

2 years ago

23.3.10

2 years ago

23.3.12

2 years ago

23.3.11

2 years ago

23.3.13

2 years ago

23.2.18

2 years ago

24.1.0-alpha3

2 years ago

24.1.0-alpha2

2 years ago

24.1.0-alpha1

2 years ago

24.1.0-alpha7

2 years ago

24.1.0-alpha6

2 years ago

24.1.0-alpha5

2 years ago

24.1.0-alpha4

2 years ago

24.1.0-alpha9

2 years ago

24.1.0-alpha8

2 years ago

22.0.23

2 years ago

22.1.0-alpha1

2 years ago

23.3.9

2 years ago

23.3.8

2 years ago

24.0.5

2 years ago

24.0.4

2 years ago

24.0.3

2 years ago

24.0.2

2 years ago

24.0.1

2 years ago

24.0.0-rc2

2 years ago

24.0.0

2 years ago

24.0.0-rc1

2 years ago

24.0.0-beta1

2 years ago

24.0.0-beta2

2 years ago

24.0.0-beta3

2 years ago

23.2.13

2 years ago

23.2.15

2 years ago

23.2.14

2 years ago

23.2.17

2 years ago

24.0.0-alpha11

2 years ago

24.0.0-alpha13

2 years ago

24.0.0-alpha12

2 years ago

23.3.5

2 years ago

23.3.4

2 years ago

23.3.7

2 years ago

23.3.6

2 years ago

24.0.0-alpha3

2 years ago

24.0.0-alpha4

2 years ago

24.0.0-alpha5

2 years ago

24.0.0-alpha6

2 years ago

24.0.0-alpha1

2 years ago

24.0.0-alpha2

2 years ago

23.1.9

2 years ago

23.3.0-alpha4

2 years ago

23.3.0-alpha3

2 years ago

23.3.0-alpha6

2 years ago

23.3.0-alpha5

2 years ago

23.3.0-alpha8

2 years ago

23.3.0-alpha7

2 years ago

23.2.4

2 years ago

23.2.6

2 years ago

23.2.5

2 years ago

23.2.8

2 years ago

23.2.7

2 years ago

23.2.11

2 years ago

23.2.10

2 years ago

23.2.12

2 years ago

23.2.9

2 years ago

23.3.0-rc1

2 years ago

24.0.0-alpha10

2 years ago

22.0.22

2 years ago

22.0.21

2 years ago

22.0.20

2 years ago

23.3.1

2 years ago

23.3.0

2 years ago

23.3.3

2 years ago

23.3.2

2 years ago

24.0.0-alpha7

2 years ago

24.0.0-alpha8

2 years ago

24.0.0-alpha9

2 years ago

23.3.0-beta2

2 years ago

23.3.0-beta1

2 years ago

23.1.11

2 years ago

23.1.12

2 years ago

23.1.10

2 years ago

23.1.15

2 years ago

23.1.13

2 years ago

23.1.14

2 years ago

23.2.2

2 years ago

23.2.1

2 years ago

23.2.3

2 years ago

22.0.19

2 years ago

22.0.18

2 years ago

23.2.0

2 years ago

23.2.0-beta2

2 years ago

23.2.0-beta3

2 years ago

23.2.0-beta1

2 years ago

23.2.0-alpha6

2 years ago

23.1.5

2 years ago

23.1.7

2 years ago

23.2.0-rc1

2 years ago

23.1.6

2 years ago

23.1.8

2 years ago

23.0.14

2 years ago

23.0.13

2 years ago

23.3.0-alpha2

2 years ago

23.3.0-alpha1

2 years ago

22.0.17

3 years ago

23.2.0-alpha3

3 years ago

23.2.0-alpha5

3 years ago

23.2.0-alpha4

3 years ago

23.1.3

3 years ago

23.1.4

3 years ago

23.0.12

3 years ago

22.0.16

3 years ago

23.2.0-dev.8a7678b70

3 years ago

23.1.0-rc3

3 years ago

23.2.0-alpha2

3 years ago

23.2.0-alpha1

3 years ago

23.2.0-dev.48e5e3967

3 years ago

23.1.2

3 years ago

23.0.11

3 years ago

23.1.1

3 years ago

23.1.0

3 years ago

23.2.0-dev.53560527d

3 years ago

23.0.6

3 years ago

23.0.8

3 years ago

23.0.7

3 years ago

22.0.15

3 years ago

23.0.9

3 years ago

23.1.0-alpha3

3 years ago

23.1.0-alpha4

3 years ago

23.1.0-alpha2

3 years ago

22.0.14

3 years ago

22.0.13

3 years ago

23.1.0-rc1

3 years ago

23.1.0-rc2

3 years ago

23.0.10

3 years ago

23.1.0-beta1

3 years ago

23.1.0-beta2

3 years ago

23.1.0-beta3

3 years ago

23.1.0-beta4

3 years ago

23.0.4

3 years ago

23.0.3

3 years ago

23.0.5

3 years ago

23.1.0-alpha1

3 years ago

23.0.2

3 years ago

23.0.1

3 years ago

22.0.12

3 years ago

22.0.9

3 years ago

22.0.11

3 years ago

22.0.8

3 years ago

22.0.10

3 years ago

22.0.7

3 years ago

22.0.6

3 years ago

23.0.0-beta5

3 years ago

23.0.0-beta4

3 years ago

23.0.0

3 years ago

23.0.0-beta3

3 years ago

22.0.5

3 years ago

23.0.0-rc1

3 years ago

23.0.0-alpha4

3 years ago

23.0.0-alpha5

3 years ago

23.0.0-alpha2

3 years ago

23.0.0-alpha3

3 years ago

23.0.0-beta2

3 years ago

23.0.0-beta1

3 years ago

22.0.3

3 years ago

22.0.2

3 years ago

22.0.4

3 years ago

22.0.1

3 years ago

22.0.0-beta2

3 years ago

22.0.0

3 years ago

23.0.0-alpha1

3 years ago

22.0.0-rc1

3 years ago

22.0.0-beta1

3 years ago

22.0.0-alpha10

3 years ago

22.0.0-alpha9

3 years ago

22.0.0-alpha8

3 years ago

22.0.0-alpha7

3 years ago