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

A data grid web component

import { html } from '@a11d/lit';
export class DataGridDetailsController {
    constructor(host) {
        this.host = host;
        this.openRecords = new Array();
    }
    get supportsMultiple() {
        return !!this.host.multipleDetails;
    }
    get hasDetails() {
        return this.detailedData.length > 0;
    }
    get detailedData() {
        return this.host.dataRecords.filter(data => this.hasDetail(data));
    }
    hasDetail(record) {
        if (this.host.hasDefaultRowElements === false) {
            // We make the assumption that custom rows don't use
            // the `getRowDetailsTemplate` and implement their own way of showing details.
            // If they do use it, they should also override `hasDataDetail`
            // to return false for the records that don't have details.
            return this.host.hasDataDetail?.(record.data) ?? false;
        }
        const hasDetailsTemplate = !!this.host.getRowDetailsTemplate && ![undefined, html.nothing].includes(this.host.getRowDetailsTemplate(record.data));
        const included = this.host.hasDataDetail?.(record.data) ?? true;
        return record.hasSubData || hasDetailsTemplate && included;
    }
    get areAllOpen() {
        return this.openRecords.length === this.detailedData.length;
    }
    open(record) {
        if (this.hasDetail(record)) {
            this.openRecords = [
                ...this.supportsMultiple
                    ? this.openRecords
                    : this.openRecords.filter(r => r.subDataRecords?.some(subRecord => subRecord.data === record.data)),
                record
            ];
            this.host.requestUpdate?.();
        }
    }
    openAll() {
        if (this.supportsMultiple) {
            this.openRecords = this.detailedData;
            this.host.requestUpdate?.();
        }
    }
    close(record) {
        this.openRecords = this.openRecords.filter(r => r.data !== record.data);
        this.host.requestUpdate?.();
    }
    closeAll() {
        this.openRecords = [];
        this.host.requestUpdate?.();
    }
    toggle(data) {
        if (this.isOpen(data)) {
            this.close(data);
        }
        else {
            this.open(data);
        }
    }
    toggleAll() {
        if (this.areAllOpen) {
            this.closeAll();
        }
        else {
            this.openAll();
        }
    }
    isOpen(record) {
        return this.openRecords.map(r => r.data).includes(record.data);
    }
}