package.src.vaadin-grid-sorter.js Maven / Gradle / Ivy
/**
* @license
* Copyright (c) 2016 - 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
/**
* `` is a helper element for the `` that provides out-of-the-box UI controls,
* visual feedback, and handlers for sorting the grid data.
*
* #### Example:
* ```html
*
* ```
* ```js
* const column = document.querySelector('#column');
* column.renderer = (root, column, model) => {
* let sorter = root.firstElementChild;
* if (!sorter) {
* sorter = document.createElement('vaadin-grid-sorter');
* root.appendChild(sorter);
* }
* sorter.path = 'name.first';
* };
* ```
*
* ### Styling
*
* The following shadow DOM parts are available for styling:
*
* Part name | Description
* ----------------|----------------
* `content` | The slotted content wrapper
* `indicators` | The internal sorter indicators.
* `order` | The internal sorter order
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `direction` | Sort direction of a sorter | :host
*
* @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
* @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
*
* @customElement
* @extends HTMLElement
* @mixes GridSorterMixin
* @mixes ThemableMixin
* @mixes DirMixin
*/
class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolymerElement))) {
static get template() {
return html`
[[_getDisplayOrder(_order)]]
`;
}
static get is() {
return 'vaadin-grid-sorter';
}
}
defineCustomElement(GridSorter);
export { GridSorter };