@humanspeak/svelte-headless-table
Version: 
A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opin
91 lines (90 loc) • 2.42 kB
JavaScript
import { TableComponent } from './tableComponent.js';
import { derived } from 'svelte/store';
export class BodyCell extends TableComponent {
    row;
    constructor({ id, row }) {
        super({ id });
        this.row = row;
    }
    attrs() {
        return derived(super.attrs(), ($baseAttrs) => {
            return {
                ...$baseAttrs,
                role: 'cell'
            };
        });
    }
    rowColId() {
        return `${this.row.id}:${this.column.id}`;
    }
    dataRowColId() {
        if (!this.row.isData()) {
            return undefined;
        }
        return `${this.row.dataId}:${this.column.id}`;
    }
    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
    isData() {
        return '__data' in this;
    }
    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
    isDisplay() {
        return '__display' in this;
    }
}
export class DataBodyCell extends BodyCell {
    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
    __data = true;
    column;
    label;
    value;
    constructor({ row, column, label, value }) {
        super({ id: column.id, row });
        this.column = column;
        this.label = label;
        this.value = value;
    }
    render() {
        if (this.label === undefined) {
            return `${this.value}`;
        }
        if (this.state === undefined) {
            throw new Error('Missing `state` reference');
        }
        return this.label(this, this.state);
    }
    clone() {
        const clonedCell = new DataBodyCell({
            row: this.row,
            column: this.column,
            label: this.label,
            value: this.value
        });
        return clonedCell;
    }
}
export class DisplayBodyCell extends BodyCell {
    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
    __display = true;
    column;
    label;
    constructor({ row, column, label }) {
        super({ id: column.id, row });
        this.column = column;
        this.label = label;
    }
    render() {
        if (this.state === undefined) {
            throw new Error('Missing `state` reference');
        }
        return this.label(this, this.state);
    }
    clone() {
        const clonedCell = new DisplayBodyCell({
            row: this.row,
            column: this.column,
            label: this.label
        });
        return clonedCell;
    }
}