24.5.3 • Published 15 days ago

@vaadin/grid v24.5.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
15 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/keyboard-shortcut-manager@vaadin-component-factory/vcf-autocomplete@vaadin-component-factory/vcf-lookup-field@vaadin/grid-pro@vaadin/react-components@vaadin/vaadin-grid@vaadin/crud@vaadin/vaadin-core
23.5.8

15 days ago

24.5.3

15 days ago

24.5.2

19 days ago

24.4.14

15 days ago

24.4.13

19 days ago

24.6.0-alpha8

15 days ago

24.6.0-alpha7

19 days ago

24.6.0-alpha6

19 days ago

24.6.0-alpha5

19 days ago

24.6.0-alpha4

26 days ago

24.6.0-alpha3

29 days ago

24.4.12

29 days ago

24.5.1

1 month ago

23.5.7

1 month ago

24.5.0

1 month ago

24.5.0-rc2

2 months ago

24.5.0-rc1

2 months ago

23.5.6

2 months ago

24.6.0-alpha2

2 months ago

24.6.0-alpha1

2 months ago

24.4.11

2 months ago

24.4.10

2 months ago

23.5.5

2 months ago

23.5.4

3 months ago

24.4.9

2 months ago

24.4.8

2 months ago

24.4.7

3 months ago

24.5.0-alpha11

3 months ago

24.5.0-alpha10

3 months ago

24.5.0-beta1

2 months ago

24.3.21

3 months ago

24.3.22

2 months ago

24.5.0-alpha9

3 months ago

24.4.6

3 months ago

24.3.20

3 months ago

24.5.0-alpha8

3 months ago

24.5.0-alpha7

4 months ago

24.3.19

4 months ago

24.4.5

4 months ago

24.5.0-alpha6

4 months ago

23.4.2

5 months ago

24.3.16

5 months ago

24.3.17

4 months ago

24.3.18

4 months ago

23.5.3

4 months ago

23.5.2

5 months ago

24.3.14

5 months ago

24.3.15

5 months ago

24.5.0-alpha5

4 months ago

24.5.0-alpha4

5 months ago

24.4.1

5 months ago

24.4.4

4 months ago

24.4.3

4 months ago

24.4.2

5 months ago

24.4.0

6 months ago

24.4.0-rc1

6 months ago

24.4.0-rc3

6 months ago

24.4.0-rc2

6 months ago

24.5.0-alpha1

6 months ago

24.5.0-alpha3

6 months ago

24.5.0-alpha2

6 months ago

24.3.13

6 months ago

24.4.0-beta3

6 months ago

24.4.0-beta2

7 months ago

24.3.12

7 months ago

24.4.0-beta1

7 months ago

24.4.0-alpha23

7 months ago

23.4.1

7 months ago

23.5.1

7 months ago

24.3.11

7 months ago

23.3.32

7 months ago

24.4.0-alpha22

8 months ago

24.4.0-alpha21

8 months ago

23.5.0

8 months ago

24.4.0-alpha20

8 months ago

24.4.0-alpha19

8 months ago

23.5.0-alpha1

8 months ago

24.3.10

8 months ago

24.4.0-dev.4b20a0c55

8 months ago

24.4.0-alpha18

8 months ago

24.4.0-dev.4b20a0c55.3

8 months ago

24.3.9

8 months ago

24.4.0-alpha17

8 months ago

24.2.9

9 months ago

24.3.8

9 months ago

24.2.8

9 months ago

23.3.31

9 months ago

24.4.0-alpha16

9 months ago

23.4.0

9 months ago

23.4.0-beta1

9 months ago

24.4.0-alpha15

9 months ago

24.3.7

9 months ago

24.4.0-alpha14

9 months ago

23.4.0-alpha4

9 months ago

24.2.7

9 months ago

24.4.0-alpha13

9 months ago

24.3.6

10 months ago

24.4.0-alpha12

10 months ago

24.4.0-alpha11

10 months ago

24.3.5

10 months ago

24.4.0-alpha10

10 months ago

24.4.0-alpha9

10 months ago

24.4.0-alpha8

10 months ago

24.4.0-alpha7

10 months ago

24.3.4

10 months ago

24.4.0-alpha6

10 months ago

24.4.0-alpha5

10 months ago

23.4.0-alpha3

10 months ago

24.4.0-alpha4

10 months ago

24.3.3

11 months ago

24.4.0-alpha3

11 months ago

23.3.30

11 months ago

24.4.0-alpha2

11 months ago

24.4.0-dev.223e39f050

11 months ago

24.4.0-dev.b3e1d14600

11 months ago

24.3.2

11 months ago

24.2.6

11 months ago

24.4.0-alpha1

11 months ago

24.3.1

11 months ago

24.3.0

12 months ago

24.3.0-rc2

12 months ago

24.2.0-alpha13

1 year ago

24.2.0-alpha2

1 year ago

24.2.0-alpha12

1 year ago

24.2.0-alpha11

1 year ago

24.2.0-alpha4

1 year ago

24.2.0-alpha10

1 year ago

24.2.0-alpha3

1 year ago

24.2.0-alpha6

1 year ago

24.2.0-alpha16

1 year ago

24.2.0-alpha5

1 year 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

12 months ago

23.3.28

12 months ago

23.3.18

1 year ago

23.3.17

1 year ago

23.3.19

1 year ago

23.4.0-alpha2

12 months ago

23.4.0-alpha1

1 year ago

24.2.0-dev.f254716fe

1 year 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

12 months ago

24.2.4

12 months ago

24.2.0-alpha9

1 year ago

24.1.15

12 months ago

24.1.14

12 months 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

1 year ago

24.3.0-beta1

1 year ago

24.3.0-beta2

12 months ago

24.2.0-dev.385a0a5b2

1 year ago

24.0.14

1 year ago

24.0.13

1 year ago

24.0.10

1 year ago

24.0.12

1 year ago

24.0.11

1 year ago

24.2.0-dev.538d07bdf

1 year 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

1 year ago

24.1.3

1 year ago

24.1.2

1 year 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

12 months ago

24.2.0-alpha1

1 year ago

23.3.14

1 year ago

23.3.16

1 year ago

23.3.15

1 year ago

24.1.0-rc1

1 year ago

24.1.0-beta3

1 year ago

24.1.0-beta2

2 years ago

24.1.0-beta1

2 years ago

24.1.1

1 year ago

24.1.0

1 year ago

22.1.0

1 year ago

24.1.0-alpha10

2 years ago

24.0.9

1 year ago

24.0.8

1 year ago

24.0.7

1 year 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

2 years ago

23.2.0-alpha3

2 years ago

23.2.0-alpha5

2 years ago

23.2.0-alpha4

2 years ago

23.1.3

2 years ago

23.1.4

2 years ago

23.0.12

2 years ago

22.0.16

2 years ago

23.2.0-dev.8a7678b70

2 years ago

23.1.0-rc3

2 years ago

23.2.0-alpha2

2 years ago

23.2.0-alpha1

2 years ago

23.2.0-dev.48e5e3967

2 years ago

23.1.2

2 years ago

23.0.11

2 years ago

23.1.1

2 years ago

23.1.0

2 years ago

23.2.0-dev.53560527d

2 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