@3mo/data-grid
Version:
A data grid web component
120 lines (119 loc) • 4.84 kB
JavaScript
import { __decorate } from "tslib";
import { component, Component, event, property } from '@a11d/lit';
import { hasChanged } from '@a11d/equals';
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'
* @attr getContentTemplate - The content template of the column.
* @attr contentStyle - The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data.
* @attr getEditContentTemplate - The edit content template of the column.
*/
let DataGridColumnComponent = 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;
}
handleEdit(value, data) {
this.dataGrid?.handleEdit(data, this.column, value);
}
connectedCallback() {
if (this.parentElement instanceof DataGrid) {
this.slot = 'column';
}
super.connectedCallback();
}
disconnectedCallback() {
super.disconnectedCallback();
this.dataGrid?.extractColumns();
}
updated(props) {
super.updated(props);
this.updateEvent.dispatch(this);
}
*generateCsvHeading() {
yield [this.heading, this.description].filter(Boolean).join(' - ');
}
*generateCsvValue(value, data) {
data;
yield value?.toString() ?? '';
}
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),
contentStyle: this.contentStyle,
});
}
};
__decorate([
event({ bubbles: true, cancelable: true, composed: true, type: 'DataGridColumnComponent:update' })
], DataGridColumnComponent.prototype, "updateEvent", void 0);
__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 })
], DataGridColumnComponent.prototype, "nonEditable", void 0);
__decorate([
property({ hasChanged })
], DataGridColumnComponent.prototype, "contentStyle", void 0);
DataGridColumnComponent = __decorate([
component('mo-data-grid-column')
], DataGridColumnComponent);
export { DataGridColumnComponent };