@3mo/data-grid
Version:
A data grid web component
107 lines (106 loc) • 3.99 kB
JavaScript
import { __decorate } from "tslib";
import { Component, property } from '@a11d/lit';
import { DataGrid } from '../DataGrid.js';
import { DataGridColumn } from '../DataGridColumn.js';
/**
* @attr width - The width of the column
* @attr hidden - Whether the column is hidden. The column can be made visible by the user in the settings panel if available.
* @attr heading - The heading of the column
* @attr textAlign - The text alignment of the column
* @attr description - The description of the column. It will be displayed as a tooltip on the heading.
* @attr dataSelector - The data selector of the column
* @attr sortDataSelector - The data selector of the column
* @attr nonSortable - Whether the column is sortable
* @attr nonEditable - Whether the column is editable
* @attr sticky - The sticky position of the column, either 'start', 'end', or 'both'
*/
export class DataGridColumnComponent extends Component {
constructor() {
super(...arguments);
this.width = 'max-content';
this.hidden = false;
this.heading = '';
this.textAlign = 'start';
this.nonSortable = false;
this.nonEditable = false;
}
get column() {
const nonEditable = this.nonEditable;
return new DataGridColumn({
dataSelector: this.dataSelector,
sortDataSelector: this.sortDataSelector,
heading: this.heading,
description: this.description,
alignment: this.textAlign,
hidden: this.hidden,
sticky: this.sticky,
width: this.width,
sortable: !this.nonSortable,
editable: this.getEditContentTemplate !== undefined && (typeof nonEditable !== 'function' ? !nonEditable : x => !nonEditable(x)),
getMenuItemsTemplate: this.getMenuItemsTemplate?.bind(this),
getContentTemplate: this.getContentTemplate.bind(this),
getEditContentTemplate: this.getEditContentTemplate?.bind(this),
generateCsvHeading: this.generateCsvHeading.bind(this),
generateCsvValue: this.generateCsvValue.bind(this),
});
}
handleEdit(value, data) {
this.dataGrid?.handleEdit(data, this.column, value);
}
connectedCallback() {
if (this.parentElement instanceof DataGrid) {
this.slot = 'column';
}
super.connectedCallback();
}
updated() {
this.dataGrid?.extractColumns();
this.dataGrid?.requestUpdate();
}
*generateCsvHeading() {
yield [this.heading, this.description].filter(Boolean).join(' - ');
}
*generateCsvValue(value, data) {
data;
yield value?.toString() ?? '';
}
}
__decorate([
property({ type: Object })
], DataGridColumnComponent.prototype, "dataGrid", void 0);
__decorate([
property()
], DataGridColumnComponent.prototype, "width", void 0);
__decorate([
property({ type: Boolean })
], DataGridColumnComponent.prototype, "hidden", void 0);
__decorate([
property()
], DataGridColumnComponent.prototype, "sticky", void 0);
__decorate([
property({ reflect: true })
], DataGridColumnComponent.prototype, "heading", void 0);
__decorate([
property({ reflect: true })
], DataGridColumnComponent.prototype, "description", void 0);
__decorate([
property({ reflect: true })
], DataGridColumnComponent.prototype, "textAlign", void 0);
__decorate([
property({ reflect: true })
], DataGridColumnComponent.prototype, "dataSelector", void 0);
__decorate([
property({ reflect: true })
], DataGridColumnComponent.prototype, "sortDataSelector", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], DataGridColumnComponent.prototype, "nonSortable", void 0);
__decorate([
property({
type: Boolean,
reflect: true,
hasChanged(value, oldValue) {
return String(value) !== String(oldValue);
}
})
], DataGridColumnComponent.prototype, "nonEditable", void 0);