<commit_before><!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<!--

`vaadin-grid` is a free, high quality data grid / data table Polymer element, part of the Vaadin Core Elements.

### Quick Start

 - Use the <a href="#vaadin-grid-column">`<vaadin-grid-column>`</a> element to configure the grid columns.

 - Then assign an array to the <a href="#vaadin-grid:property-items">`items`</a> property to visualize your data.

 - In addition, there's helper elements such as
<a href="#vaadin-grid-column-group">`<vaadin-grid-column-group>`</a>,
<a href="#vaadin-grid-filter">`<vaadin-grid-filter>`</a>,
<a href="#vaadin-grid-sorter">`<vaadin-grid-sorter>`</a> and
<a href="#vaadin-grid-selection-column">`<vaadin-grid-selection-column>`</a>
that can be used to customize the grid.
__Note that the helper elements must be explicitly imported.__
If you want to import everything at once you can use the `all-imports.html` bundle.

 - A column template can be decorated with one the following class names to specify its purpose
  - "header": Marks a header template
  - "footer": Marks a footer template
  - "row-details": Marks a row details template

 - The following built-in template variables can be bound to inside the column templates
  - "index": Number representing the row index
  - "item" and it's sub-properties: Data object (provided by a data provider / items array)
  - "selected": True if the item is selected (can be two-way bound)
  - "expanded": True if the item is expanded for row details (can be two-way bound)

#### Example:

    <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, {"name": "Ringo", "surname": "Starr", "role": "drums"}]'>
      <vaadin-grid-column>
        <template class="header">Name</template>
        <template>[[item.name]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Surname</template>
        <template>[[item.surname]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Role</template>
        <template>[[item.role]]</template>
      </vaadin-grid-column>
    </vaadin-grid>

### Lazy Loading with Function Data Provider

In addition to assigning an array to the items property, you can alternatively
provide the vaadin-grid data through the `dataProvider` function property.
The vaadin-grid element calls this function lazily, only when it needs more data
to be displayed.

See the <a href="#vaadin-grid:property-dataProvider">`dataProvider`</a> in
the API reference below for the detailed data provider arguments description,
and the “Assigning Data” page in the demos</a>.

__Note that when using function data providers, `size` always needs to be
set manually.__

    grid.size = 200; // The total number of items
    grid.dataProvider = function(params, callback) {
      var url = 'https://api.example/data' +
          '?page=' + params.page +        // the requested page index
          '&per_page=' + params.pageSize; // number of items on the page

      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        callback(response.employees);
      };
      xhr.open('GET', url, true);
      xhr.send();
    };

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--vaadin-grid-cell` | Mixin applied to all cells | `{}`
`--vaadin-grid-header-cell` | Mixin applied to header cells | `{}`
`--vaadin-grid-footer-cell` | Mixin applied to footer cells | `{}`
`--vaadin-grid-body-cell` | Mixin applied to body cells | `{}`
`--vaadin-grid-body-row-odd-cell` | Mixin applied to body cells on odd rows | `{}`
`--vaadin-grid-cell-last-frozen` | Mixin applied to the last frozen column cells | `{}`
`--vaadin-grid-body-row-hover-cell` | Mixin applied to body cells on on hovered row | `{}`
`--vaadin-grid-body-row-selected-cell` | Mixin applied to body cells on selected rows | `{}`
`--vaadin-grid-body-row-active-cell` | Mixin applied to body cells on active row | `{}`
`--vaadin-grid-body-row-details-cell` | Mixin applied to cells on details rows | `{}`
`--vaadin-grid-focused-cell` | Mixin applied to cells with keyboard focus | `{}`
`--vaadin-grid-loading-spinner` | Mixin applied to the loading spinner | `{}`
`--vaadin-grid-column-resize-handle` | Mixin applied to the column resize handle | `{}`<commit_msg>Fix typo in mixin docs<commit_after><!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<!--

`vaadin-grid` is a free, high quality data grid / data table Polymer element, part of the Vaadin Core Elements.

### Quick Start

 - Use the <a href="#vaadin-grid-column">`<vaadin-grid-column>`</a> element to configure the grid columns.

 - Then assign an array to the <a href="#vaadin-grid:property-items">`items`</a> property to visualize your data.

 - In addition, there's helper elements such as
<a href="#vaadin-grid-column-group">`<vaadin-grid-column-group>`</a>,
<a href="#vaadin-grid-filter">`<vaadin-grid-filter>`</a>,
<a href="#vaadin-grid-sorter">`<vaadin-grid-sorter>`</a> and
<a href="#vaadin-grid-selection-column">`<vaadin-grid-selection-column>`</a>
that can be used to customize the grid.
__Note that the helper elements must be explicitly imported.__
If you want to import everything at once you can use the `all-imports.html` bundle.

 - A column template can be decorated with one the following class names to specify its purpose
  - "header": Marks a header template
  - "footer": Marks a footer template
  - "row-details": Marks a row details template

 - The following built-in template variables can be bound to inside the column templates
  - "index": Number representing the row index
  - "item" and it's sub-properties: Data object (provided by a data provider / items array)
  - "selected": True if the item is selected (can be two-way bound)
  - "expanded": True if the item is expanded for row details (can be two-way bound)

#### Example:

    <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, {"name": "Ringo", "surname": "Starr", "role": "drums"}]'>
      <vaadin-grid-column>
        <template class="header">Name</template>
        <template>[[item.name]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Surname</template>
        <template>[[item.surname]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Role</template>
        <template>[[item.role]]</template>
      </vaadin-grid-column>
    </vaadin-grid>

### Lazy Loading with Function Data Provider

In addition to assigning an array to the items property, you can alternatively
provide the vaadin-grid data through the `dataProvider` function property.
The vaadin-grid element calls this function lazily, only when it needs more data
to be displayed.

See the <a href="#vaadin-grid:property-dataProvider">`dataProvider`</a> in
the API reference below for the detailed data provider arguments description,
and the “Assigning Data” page in the demos</a>.

__Note that when using function data providers, `size` always needs to be
set manually.__

    grid.size = 200; // The total number of items
    grid.dataProvider = function(params, callback) {
      var url = 'https://api.example/data' +
          '?page=' + params.page +        // the requested page index
          '&per_page=' + params.pageSize; // number of items on the page

      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        callback(response.employees);
      };
      xhr.open('GET', url, true);
      xhr.send();
    };

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--vaadin-grid-cell` | Mixin applied to all cells | `{}`
`--vaadin-grid-header-cell` | Mixin applied to header cells | `{}`
`--vaadin-grid-footer-cell` | Mixin applied to footer cells | `{}`
`--vaadin-grid-body-cell` | Mixin applied to body cells | `{}`
`--vaadin-grid-body-row-odd-cell` | Mixin applied to body cells on odd rows | `{}`
`--vaadin-grid-cell-last-frozen` | Mixin applied to the last frozen column cells | `{}`
`--vaadin-grid-body-row-hover-cell` | Mixin applied to body cells on hovered row | `{}`
`--vaadin-grid-body-row-selected-cell` | Mixin applied to body cells on selected rows | `{}`
`--vaadin-grid-body-row-active-cell` | Mixin applied to body cells on active row | `{}`
`--vaadin-grid-body-row-details-cell` | Mixin applied to cells on details rows | `{}`
`--vaadin-grid-focused-cell` | Mixin applied to cells with keyboard focus | `{}`
`--vaadin-grid-loading-spinner` | Mixin applied to the loading spinner | `{}`
`--vaadin-grid-column-resize-handle` | Mixin applied to the column resize handle | `{}`
{'fraction_non_alphanumeric': 0.14666666666666667, 'fraction_numerical': 0.0019672131147540984, 'mean_word_length': 3.516781836130306, 'pattern_counts': {'":': 24, '<': 87, '<?xml version=': 0, '>': 85, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5784889', 'n_tokens_mistral': 2879, 'n_tokens_neox': 2697, 'n_words': 937}