@digital-realty/grid
Version:
A free, flexible and high-quality Web Component for showing large amounts of tabular data
82 lines (71 loc) • 2.15 kB
JavaScript
/**
* @license
* Copyright (c) 2016 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
/**
* @polymerMixin
*/
export const GridFilterColumnMixin = (superClass) =>
class extends superClass {
static get properties() {
return {
/**
* JS Path of the property in the item used for filtering the data.
*/
path: {
type: String,
sync: true,
},
/**
* Text to display as the label of the column filter text-field.
*/
header: {
type: String,
sync: true,
},
};
}
static get observers() {
return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)'];
}
/**
* Renders the grid filter with the custom text field to the header cell.
*
* @override
*/
_defaultHeaderRenderer(root, _column) {
let filter = root.firstElementChild;
let textField = filter ? filter.firstElementChild : undefined;
if (!filter) {
filter = document.createElement('vaadin-grid-filter');
textField = document.createElement('vaadin-text-field');
textField.setAttribute('theme', 'small');
textField.setAttribute('style', 'max-width: 100%;');
textField.setAttribute('focus-target', '');
filter.appendChild(textField);
root.appendChild(filter);
}
filter.path = this.path;
textField.label = this.__getHeader(this.header, this.path);
}
/**
* The filter column doesn't allow to use a custom header renderer
* to override the header cell content.
* It always renders the grid filter to the header cell.
*
* @override
*/
_computeHeaderRenderer() {
return this._defaultHeaderRenderer;
}
/** @private */
__getHeader(header, path) {
if (header) {
return header;
}
if (path) {
return this._generateHeader(path);
}
}
};