@3mo/data-grid/dist/DataGridColumn.js

A data grid web component

import { css, html, style } from '@a11d/lit';
import { equals } from '@a11d/equals';
export class DataGridColumn {
    hide() {
        this.hidden = true;
        this.dataGrid.requestUpdate();
    }
    toggleSticky(sticky) {
        this.sticky = this.sticky === sticky ? undefined : sticky;
        this.dataGrid.requestUpdate();
    }
    get sortDataSelector() { return this._sortDataSelector || this.dataSelector; }
    set sortDataSelector(value) { this._sortDataSelector = value; }
    toggleSort(strategy) {
        if (!this.sortable) {
            return;
        }
        if (!!strategy && this.sortingDefinition?.strategy === strategy) {
            strategy = null;
        }
        if (strategy === null) {
            this.dataGrid.sortingController.reset();
        }
        else {
            this.dataGrid.sortingController.toggle(this.sortDataSelector, strategy);
        }
        this.dataGrid.requestUpdate();
    }
    constructor(column) {
        this.width = 'max-content';
        this.alignment = 'start';
        this.hidden = false;
        this.sortable = true;
        this.editable = false;
        Object.assign(this, column);
    }
    [equals](other) {
        return !!this.dataSelector || !!other.dataSelector
            ? this.dataSelector === other.dataSelector
            : this.heading === other.heading && this.description === other.description;
    }
    with(other) {
        return new DataGridColumn({ ...this, ...other });
    }
    get widthInPixels() { return this._widthInPixels || 0; }
    set widthInPixels(value) {
        this._widthInPixels = value;
        this.dataGrid?.requestUpdate();
    }
    get sortingDefinition() {
        return this.dataGrid
            ?.getSorting()
            .find(s => s.selector === this.sortDataSelector);
    }
    get sumTemplate() {
        if (!this.dataGrid || this.sumHeading === undefined || this.getSumTemplate === undefined) {
            return;
        }
        const sumsData = this.dataGrid.selectedData.length ? this.dataGrid.selectedData : this.dataGrid.renderDataRecords.map(r => r.data);
        const sum = sumsData
            .map(data => parseFloat(KeyPath.get(data, this.dataSelector)))
            .filter(n => isNaN(n) === false)
            .reduce(((a, b) => a + b), 0)
            || 0;
        return html `
			<mo-data-grid-footer-sum heading=${this.sumHeading || ''} ${style({ color: this.dataGrid.selectedData.length > 0 ? 'var(--mo-color-accent)' : 'currentColor' })}>
				${this.getSumTemplate(sum)}
			</mo-data-grid-footer-sum>
		`;
    }
    get stickyColumnInsetInline() {
        return this.dataGrid?.columnsController.getStickyColumnInsetInline(this) ?? '';
    }
    static { this.stickyStyles = css `
		:host([data-sticky]) {
			position: sticky;
		}

		:host([data-sticky]) {
			z-index: 6;
			background: var(--mo-data-grid-sticky-part-color);
		}

		:host([data-sticky-edge~=end]) {
			border-inline-end: var(--mo-data-grid-border);
			box-shadow: var(--mo-shadow-deep);
			clip-path: inset(0 -1rem 0 0);
		}

		:host([data-sticky-edge~=start]) {
			border-inline-start: var(--mo-data-grid-border);
			box-shadow: var(--mo-shadow-deep);
			clip-path: inset(0 0 0 -1rem);
		}

		:host([data-sticky-edge="start end"]) {
			clip-path: inset(0 -1rem 0 -1rem);
		}
	`; }
    get stickyEdge() {
        if (!this.sticky || !this.dataGrid) {
            return undefined;
        }
        if (this.sticky === 'both') {
            return 'start end';
        }
        const columns = this.dataGrid.visibleColumns;
        const index = columns.indexOf(this);
        if (this.sticky === 'start' && !columns.slice(index + 1).some(c => c.sticky === 'start')) {
            return 'end';
        }
        if (this.sticky === 'end' && !columns.slice(0, index).some(c => c.sticky === 'end')) {
            return 'start';
        }
        return undefined;
    }
}