@scoped-vaadin/grid/src/vaadin-grid-column-group.js

A free, flexible and high-quality Web Component for showing large amounts of tabular data

/**
 * @license
 * Copyright (c) 2016 - 2024 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */

import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { defineCustomElement } from '@scoped-vaadin/component-base/src/define.js';
import { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
export * from './vaadin-grid-column-group-mixin.js';

/**
 * A `<vaadin24-grid-column-group>` is used to make groups of columns in `<vaadin24-grid>` and
 * to configure additional headers and footers.
 *
 * Groups can be nested to create complex header and footer configurations.
 *
 * #### Example:
 * ```html
 * <vaadin24-grid-column-group resizable id="columnGroup">
 *   <vaadin24-grid-column id="column1"></vaadin24-grid-column>
 *   <vaadin24-grid-column id="column2"></vaadin24-grid-column>
 * </vaadin24-grid-column-group>
 * ```
 *
 * ```js
 * const columnGroup = document.querySelector('#columnGroup');
 * columnGroup.headerRenderer = (root, columnGroup) => {
 *   root.textContent = 'header';
 * }
 *
 * const column1 = document.querySelector('#column1');
 * column1.headerRenderer = (root, column) => { ... };
 * column1.renderer = (root, column, model) => { ... };
 *
 * const column2 = document.querySelector('#column2');
 * column2.headerRenderer = (root, column) => { ... };
 * column2.renderer = (root, column, model) => { ... };
 * ```
 *
 * @customElement
 * @extends HTMLElement
 * @mixes GridColumnGroupMixin
 */
class GridColumnGroup extends GridColumnGroupMixin(PolymerElement) {
  static get is() {
    return 'vaadin24-grid-column-group';
  }
}

defineCustomElement(GridColumnGroup);

export { GridColumnGroup };