@humanspeak/svelte-headless-table 5.0.0

package/dist/columns.d.ts

@@ -0,0 +1,76 @@
+import type { DisplayBodyCell } from './bodyCells.js';
+import type { TableState } from './createViewModel.js';
+import type { DisplayLabel, HeaderLabel } from './types/Label.js';
+import type { DataLabel } from './types/Label.js';
+import type { AnyPlugins, PluginColumnConfigs } from './types/TablePlugin.js';
+export interface ColumnInit<Item, Plugins extends AnyPlugins = AnyPlugins> {
+    header: HeaderLabel<Item, Plugins>;
+    footer?: HeaderLabel<Item, Plugins>;
+    height: number;
+    plugins?: PluginColumnConfigs<Plugins>;
+}
+export declare class Column<Item, Plugins extends AnyPlugins = AnyPlugins> {
+    header: HeaderLabel<Item, Plugins>;
+    footer?: HeaderLabel<Item, Plugins>;
+    height: number;
+    plugins?: PluginColumnConfigs<Plugins>;
+    constructor({ header, footer, height, plugins }: ColumnInit<Item, Plugins>);
+    isFlat(): this is FlatColumn<Item, Plugins>;
+    isData(): this is DataColumn<Item, Plugins>;
+    isDisplay(): this is DisplayColumn<Item, Plugins>;
+    isGroup(): this is GroupColumn<Item, Plugins>;
+}
+export type FlatColumnInit<Item, Plugins extends AnyPlugins = AnyPlugins, Id extends string = any> = Omit<ColumnInit<Item, Plugins>, 'height'> & {
+    id?: Id;
+};
+export declare class FlatColumn<Item, Plugins extends AnyPlugins = AnyPlugins, Id extends string = any> extends Column<Item, Plugins> {
+    __flat: boolean;
+    id: Id;
+    constructor({ header, footer, plugins, id }: FlatColumnInit<Item, Plugins>);
+}
+export type DataColumnInit<Item, Plugins extends AnyPlugins = AnyPlugins, Id extends string = string, Value = unknown> = DataColumnInitBase<Item, Plugins, Value> & ((Id extends keyof Item ? DataColumnInitKey<Item, Id> : never) | DataColumnInitIdAndKey<Item, Id, keyof Item> | DataColumnInitFnAndId<Item, Id, Value>);
+export type DataColumnInitBase<Item, Plugins extends AnyPlugins = AnyPlugins, Value = unknown> = Omit<ColumnInit<Item, Plugins>, 'height'> & {
+    cell?: DataLabel<Item, Plugins, Value>;
+};
+export type DataColumnInitKey<Item, Id extends keyof Item> = {
+    accessor: Id;
+    id?: Id;
+};
+export type DataColumnInitIdAndKey<Item, Id extends string, Key extends keyof Item> = {
+    accessor: Key;
+    id?: Id;
+};
+export type DataColumnInitFnAndId<Item, Id extends string, Value> = {
+    accessor: keyof Item | ((item: Item) => Value);
+    id?: Id;
+};
+export declare class DataColumn<Item, Plugins extends AnyPlugins = AnyPlugins, Id extends string = any, Value = any> extends FlatColumn<Item, Plugins, Id> {
+    __data: boolean;
+    cell?: DataLabel<Item, Plugins, Value>;
+    accessorKey?: keyof Item;
+    accessorFn?: (item: Item) => Value;
+    constructor({ header, footer, plugins, cell, accessor, id }: DataColumnInit<Item, Plugins, Id, Value>);
+    getValue(item: Item): any;
+}
+export type DisplayColumnDataGetter<Item, Plugins extends AnyPlugins = AnyPlugins> = (cell: DisplayBodyCell<Item>, state?: TableState<Item, Plugins>) => unknown;
+export type DisplayColumnInit<Item, Plugins extends AnyPlugins = AnyPlugins, Id extends string = any> = FlatColumnInit<Item, Plugins, Id> & {
+    cell: DisplayLabel<Item, Plugins>;
+    data?: DisplayColumnDataGetter<Item, Plugins>;
+};
+export declare class DisplayColumn<Item, Plugins extends AnyPlugins = AnyPlugins, Id extends string = any> extends FlatColumn<Item, Plugins, Id> {
+    __display: boolean;
+    cell: DisplayLabel<Item, Plugins>;
+    data?: DisplayColumnDataGetter<Item, Plugins>;
+    constructor({ header, footer, plugins, id, cell, data }: DisplayColumnInit<Item, Plugins, Id>);
+}
+export type GroupColumnInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<ColumnInit<Item, Plugins>, 'height'> & {
+    columns: Column<Item, Plugins>[];
+};
+export declare class GroupColumn<Item, Plugins extends AnyPlugins = AnyPlugins> extends Column<Item, Plugins> {
+    __group: boolean;
+    columns: Column<Item, Plugins>[];
+    ids: string[];
+    constructor({ header, footer, columns, plugins }: GroupColumnInit<Item, Plugins>);
+}
+export declare const getFlatColumnIds: <Item, Plugins extends AnyPlugins = AnyPlugins>(columns: Column<Item, Plugins>[]) => string[];
+export declare const getFlatColumns: <Item, Plugins extends AnyPlugins = AnyPlugins>(columns: Column<Item, Plugins>[]) => FlatColumn<Item, Plugins>[];

package/dist/columns.js

@@ -0,0 +1,96 @@
+export class Column {
+    header;
+    footer;
+    height;
+    plugins;
+    constructor({ header, footer, height, plugins }) {
+        this.header = header;
+        this.footer = footer;
+        this.height = height;
+        this.plugins = plugins;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isFlat() {
+        return '__flat' in this;
+    }
+    // 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;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isGroup() {
+        return '__group' in this;
+    }
+}
+export class FlatColumn extends Column {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __flat = true;
+    id;
+    constructor({ header, footer, plugins, id }) {
+        super({ header, footer, plugins, height: 1 });
+        this.id = id ?? String(header);
+    }
+}
+export class DataColumn extends FlatColumn {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __data = true;
+    cell;
+    accessorKey;
+    accessorFn;
+    constructor({ header, footer, plugins, cell, accessor, id }) {
+        super({ header, footer, plugins, id: 'Initialization not complete' });
+        this.cell = cell;
+        if (accessor instanceof Function) {
+            this.accessorFn = accessor;
+        }
+        else {
+            this.accessorKey = accessor;
+        }
+        if (id === undefined && this.accessorKey === undefined && header === undefined) {
+            throw new Error('A column id, string accessor, or header is required');
+        }
+        const accessorKeyId = typeof this.accessorKey === 'string' ? this.accessorKey : null;
+        this.id = (id ?? accessorKeyId ?? String(header));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getValue(item) {
+        if (this.accessorFn !== undefined) {
+            return this.accessorFn(item);
+        }
+        if (this.accessorKey !== undefined) {
+            return item[this.accessorKey];
+        }
+        return undefined;
+    }
+}
+export class DisplayColumn extends FlatColumn {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __display = true;
+    cell;
+    data;
+    constructor({ header, footer, plugins, id, cell, data }) {
+        super({ header, footer, plugins, id });
+        this.cell = cell;
+        this.data = data;
+    }
+}
+export class GroupColumn extends Column {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __group = true;
+    columns;
+    ids;
+    constructor({ header, footer, columns, plugins }) {
+        const height = Math.max(...columns.map((c) => c.height)) + 1;
+        super({ header, footer, height, plugins });
+        this.columns = columns;
+        this.ids = getFlatColumnIds(columns);
+    }
+}
+export const getFlatColumnIds = (columns) => columns.flatMap((c) => (c.isFlat() ? [c.id] : c.isGroup() ? c.ids : []));
+export const getFlatColumns = (columns) => {
+    return columns.flatMap((c) => (c.isFlat() ? [c] : c.isGroup() ? getFlatColumns(c.columns) : []));
+};

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const NBSP = " ";

package/dist/constants.js

@@ -0,0 +1 @@
+export const NBSP = ' ';

package/dist/createTable.d.ts

@@ -0,0 +1,17 @@
+import { DataColumn, DisplayColumn, GroupColumn, type Column, type DataColumnInitBase, type DataColumnInitFnAndId, type DataColumnInitIdAndKey, type DataColumnInitKey, type DisplayColumnInit, type GroupColumnInit } from './columns.js';
+import type { AnyPlugins } from './types/TablePlugin.js';
+import type { ReadOrWritable } from './utils/store.js';
+import { type CreateViewModelOptions, type TableViewModel } from './createViewModel.js';
+export declare class Table<Item, Plugins extends AnyPlugins = AnyPlugins> {
+    data: ReadOrWritable<Item[]>;
+    plugins: Plugins;
+    constructor(data: ReadOrWritable<Item[]>, plugins: Plugins);
+    createColumns(columns: Column<Item, Plugins>[]): Column<Item, Plugins>[];
+    column<Id extends Exclude<keyof Item, symbol>>(def: DataColumnInitBase<Item, Plugins, Item[Id]> & DataColumnInitKey<Item, Id>): DataColumn<Item, Plugins, `${Id}`, Item[Id]>;
+    column<Id extends string, Key extends keyof Item>(def: DataColumnInitBase<Item, Plugins, Item[Key]> & DataColumnInitIdAndKey<Item, Id, Key>): DataColumn<Item, Plugins, Id, Item[Key]>;
+    column<Id extends string, Value>(def: DataColumnInitBase<Item, Plugins, Value> & DataColumnInitFnAndId<Item, Id, Value>): DataColumn<Item, Plugins, Id, Value>;
+    group(def: GroupColumnInit<Item, Plugins>): GroupColumn<Item, Plugins>;
+    display(def: DisplayColumnInit<Item, Plugins>): DisplayColumn<Item, Plugins>;
+    createViewModel(columns: Column<Item, Plugins>[], options?: CreateViewModelOptions<Item>): TableViewModel<Item, Plugins>;
+}
+export declare const createTable: <Item, Plugins extends AnyPlugins = AnyPlugins>(data: ReadOrWritable<Item[]>, plugins?: Plugins) => Table<Item, Plugins>;

package/dist/createTable.js

@@ -0,0 +1,36 @@
+import { DataColumn, DisplayColumn, getFlatColumnIds, GroupColumn } from './columns.js';
+import { getDuplicates } from './utils/array.js';
+import { createViewModel } from './createViewModel.js';
+export class Table {
+    data;
+    plugins;
+    constructor(data, plugins) {
+        this.data = data;
+        this.plugins = plugins;
+    }
+    createColumns(columns) {
+        const ids = getFlatColumnIds(columns);
+        const duplicateIds = getDuplicates(ids);
+        if (duplicateIds.length !== 0) {
+            throw new Error(`Duplicate column ids not allowed: "${duplicateIds.join('", "')}"`);
+        }
+        return columns;
+    }
+    column(def) {
+        return new DataColumn(def);
+    }
+    group(def) {
+        return new GroupColumn(def);
+    }
+    display(def) {
+        return new DisplayColumn(def);
+    }
+    createViewModel(columns, options) {
+        return createViewModel(this, columns, options);
+    }
+}
+export const createTable = (data, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+plugins = {}) => {
+    return new Table(data, plugins);
+};

package/dist/createViewModel.d.ts

@@ -0,0 +1,38 @@
+import { type Readable, type Writable } from 'svelte/store';
+import { BodyRow } from './bodyRows.js';
+import { FlatColumn, type Column } from './columns.js';
+import type { Table } from './createTable.js';
+import { HeaderRow } from './headerRows.js';
+import type { AnyPlugins, PluginStates } from './types/TablePlugin.js';
+export type TableAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<string, unknown> & {
+    role: 'table';
+};
+export type TableHeadAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<string, unknown>;
+export type TableBodyAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<string, unknown> & {
+    role: 'rowgroup';
+};
+export interface TableViewModel<Item, Plugins extends AnyPlugins = AnyPlugins> {
+    flatColumns: FlatColumn<Item, Plugins>[];
+    tableAttrs: Readable<TableAttributes<Item, Plugins>>;
+    tableHeadAttrs: Readable<TableHeadAttributes<Item, Plugins>>;
+    tableBodyAttrs: Readable<TableBodyAttributes<Item, Plugins>>;
+    visibleColumns: Readable<FlatColumn<Item, Plugins>[]>;
+    headerRows: Readable<HeaderRow<Item, Plugins>[]>;
+    originalRows: Readable<BodyRow<Item, Plugins>[]>;
+    rows: Readable<BodyRow<Item, Plugins>[]>;
+    pageRows: Readable<BodyRow<Item, Plugins>[]>;
+    pluginStates: PluginStates<Plugins>;
+}
+export type ReadOrWritable<T> = Readable<T> | Writable<T>;
+export interface PluginInitTableState<Item, Plugins extends AnyPlugins = AnyPlugins> extends Omit<TableViewModel<Item, Plugins>, 'pluginStates'> {
+    data: ReadOrWritable<Item[]>;
+    columns: Column<Item, Plugins>[];
+}
+export interface TableState<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableViewModel<Item, Plugins> {
+    data: ReadOrWritable<Item[]>;
+    columns: Column<Item, Plugins>[];
+}
+export interface CreateViewModelOptions<Item> {
+    rowDataId?: (item: Item, index: number) => string;
+}
+export declare const createViewModel: <Item, Plugins extends AnyPlugins = AnyPlugins>(table: Table<Item, Plugins>, columns: Column<Item, Plugins>[], { rowDataId }?: CreateViewModelOptions<Item>) => TableViewModel<Item, Plugins>;

package/dist/createViewModel.js

@@ -0,0 +1,230 @@
+import { derived, readable, writable } from 'svelte/store';
+import { BodyRow, getBodyRows, getColumnedBodyRows } from './bodyRows.js';
+import { FlatColumn, getFlatColumns } from './columns.js';
+import { getHeaderRows, HeaderRow } from './headerRows.js';
+import { finalizeAttributes } from './utils/attributes.js';
+import { nonUndefined } from './utils/filter.js';
+export const createViewModel = (table, columns, { rowDataId } = {}) => {
+    const { data, plugins } = table;
+    const $flatColumns = getFlatColumns(columns);
+    const flatColumns = readable($flatColumns);
+    const originalRows = derived([data, flatColumns], ([$data, $flatColumns]) => {
+        return getBodyRows($data, $flatColumns, { rowDataId });
+    });
+    // _stores need to be defined first to pass into plugins for initialization.
+    const _visibleColumns = writable([]);
+    const _headerRows = writable();
+    const _rows = writable([]);
+    const _pageRows = writable([]);
+    const _tableAttrs = writable({
+        role: 'table'
+    });
+    const _tableHeadAttrs = writable({});
+    const _tableBodyAttrs = writable({
+        role: 'rowgroup'
+    });
+    const pluginInitTableState = {
+        data,
+        columns,
+        flatColumns: $flatColumns,
+        tableAttrs: _tableAttrs,
+        tableHeadAttrs: _tableHeadAttrs,
+        tableBodyAttrs: _tableBodyAttrs,
+        visibleColumns: _visibleColumns,
+        headerRows: _headerRows,
+        originalRows,
+        rows: _rows,
+        pageRows: _pageRows
+    };
+    const pluginInstances = Object.fromEntries(Object.entries(plugins).map(([pluginName, plugin]) => {
+        const columnOptions = Object.fromEntries($flatColumns
+            .map((c) => {
+            const option = c.plugins?.[pluginName];
+            if (option === undefined)
+                return undefined;
+            return [c.id, option];
+        })
+            .filter(nonUndefined));
+        return [
+            pluginName,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            plugin({ pluginName, tableState: pluginInitTableState, columnOptions })
+        ];
+    }));
+    const pluginStates = Object.fromEntries(Object.entries(pluginInstances).map(([key, pluginInstance]) => [
+        key,
+        pluginInstance.pluginState
+    ]));
+    const tableState = {
+        data,
+        columns,
+        flatColumns: $flatColumns,
+        tableAttrs: _tableAttrs,
+        tableHeadAttrs: _tableHeadAttrs,
+        tableBodyAttrs: _tableBodyAttrs,
+        visibleColumns: _visibleColumns,
+        headerRows: _headerRows,
+        originalRows,
+        rows: _rows,
+        pageRows: _pageRows,
+        pluginStates
+    };
+    const deriveTableAttrsFns = Object.values(pluginInstances)
+        .map((pluginInstance) => pluginInstance.deriveTableAttrs)
+        .filter(nonUndefined);
+    let tableAttrs = readable({
+        role: 'table'
+    });
+    deriveTableAttrsFns.forEach((fn) => {
+        tableAttrs = fn(tableAttrs);
+    });
+    const finalizedTableAttrs = derived(tableAttrs, ($tableAttrs) => {
+        const $finalizedAttrs = finalizeAttributes($tableAttrs);
+        _tableAttrs.set($finalizedAttrs);
+        return $finalizedAttrs;
+    });
+    const deriveTableHeadAttrsFns = Object.values(pluginInstances)
+        .map((pluginInstance) => pluginInstance.deriveTableBodyAttrs)
+        .filter(nonUndefined);
+    let tableHeadAttrs = readable({});
+    deriveTableHeadAttrsFns.forEach((fn) => {
+        tableHeadAttrs = fn(tableHeadAttrs);
+    });
+    const finalizedTableHeadAttrs = derived(tableHeadAttrs, ($tableHeadAttrs) => {
+        const $finalizedAttrs = finalizeAttributes($tableHeadAttrs);
+        _tableHeadAttrs.set($finalizedAttrs);
+        return $finalizedAttrs;
+    });
+    const deriveTableBodyAttrsFns = Object.values(pluginInstances)
+        .map((pluginInstance) => pluginInstance.deriveTableBodyAttrs)
+        .filter(nonUndefined);
+    let tableBodyAttrs = readable({
+        role: 'rowgroup'
+    });
+    deriveTableBodyAttrsFns.forEach((fn) => {
+        tableBodyAttrs = fn(tableBodyAttrs);
+    });
+    const finalizedTableBodyAttrs = derived(tableBodyAttrs, ($tableBodyAttrs) => {
+        const $finalizedAttrs = finalizeAttributes($tableBodyAttrs);
+        _tableBodyAttrs.set($finalizedAttrs);
+        return $finalizedAttrs;
+    });
+    const deriveFlatColumnsFns = Object.values(pluginInstances)
+        .map((pluginInstance) => pluginInstance.deriveFlatColumns)
+        .filter(nonUndefined);
+    let visibleColumns = flatColumns;
+    deriveFlatColumnsFns.forEach((fn) => {
+        // Variance of generic type here is unstable. Not sure how to fix.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        visibleColumns = fn(visibleColumns);
+    });
+    const injectedColumns = derived(visibleColumns, ($visibleColumns) => {
+        _visibleColumns.set($visibleColumns);
+        return $visibleColumns;
+    });
+    const columnedRows = derived([originalRows, injectedColumns], ([$originalRows, $injectedColumns]) => {
+        return getColumnedBodyRows($originalRows, $injectedColumns.map((c) => c.id));
+    });
+    const deriveRowsFns = Object.values(pluginInstances)
+        .map((pluginInstance) => pluginInstance.deriveRows)
+        .filter(nonUndefined);
+    let rows = columnedRows;
+    deriveRowsFns.forEach((fn) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        rows = fn(rows);
+    });
+    const injectedRows = derived(rows, ($rows) => {
+        // Inject state.
+        $rows.forEach((row) => {
+            row.injectState(tableState);
+            row.cells.forEach((cell) => {
+                cell.injectState(tableState);
+            });
+        });
+        // Apply plugin component hooks.
+        Object.entries(pluginInstances).forEach(([pluginName, pluginInstance]) => {
+            $rows.forEach((row) => {
+                if (pluginInstance.hooks?.['tbody.tr'] !== undefined) {
+                    row.applyHook(pluginName, pluginInstance.hooks['tbody.tr'](row));
+                }
+                row.cells.forEach((cell) => {
+                    if (pluginInstance.hooks?.['tbody.tr.td'] !== undefined) {
+                        cell.applyHook(pluginName, pluginInstance.hooks['tbody.tr.td'](cell));
+                    }
+                });
+            });
+        });
+        _rows.set($rows);
+        return $rows;
+    });
+    const derivePageRowsFns = Object.values(pluginInstances)
+        .map((pluginInstance) => pluginInstance.derivePageRows)
+        .filter(nonUndefined);
+    // Must derive from `injectedRows` instead of `rows` to ensure that `_rows` is set.
+    let pageRows = injectedRows;
+    derivePageRowsFns.forEach((fn) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        pageRows = fn(pageRows);
+    });
+    const injectedPageRows = derived(pageRows, ($pageRows) => {
+        // Inject state.
+        $pageRows.forEach((row) => {
+            row.injectState(tableState);
+            row.cells.forEach((cell) => {
+                cell.injectState(tableState);
+            });
+        });
+        // Apply plugin component hooks.
+        Object.entries(pluginInstances).forEach(([pluginName, pluginInstance]) => {
+            $pageRows.forEach((row) => {
+                if (pluginInstance.hooks?.['tbody.tr'] !== undefined) {
+                    row.applyHook(pluginName, pluginInstance.hooks['tbody.tr'](row));
+                }
+                row.cells.forEach((cell) => {
+                    if (pluginInstance.hooks?.['tbody.tr.td'] !== undefined) {
+                        cell.applyHook(pluginName, pluginInstance.hooks['tbody.tr.td'](cell));
+                    }
+                });
+            });
+        });
+        _pageRows.set($pageRows);
+        return $pageRows;
+    });
+    const headerRows = derived(injectedColumns, ($injectedColumns) => {
+        const $headerRows = getHeaderRows(columns, $injectedColumns.map((c) => c.id));
+        // Inject state.
+        $headerRows.forEach((row) => {
+            row.injectState(tableState);
+            row.cells.forEach((cell) => {
+                cell.injectState(tableState);
+            });
+        });
+        // Apply plugin component hooks.
+        Object.entries(pluginInstances).forEach(([pluginName, pluginInstance]) => {
+            $headerRows.forEach((row) => {
+                if (pluginInstance.hooks?.['thead.tr'] !== undefined) {
+                    row.applyHook(pluginName, pluginInstance.hooks['thead.tr'](row));
+                }
+                row.cells.forEach((cell) => {
+                    if (pluginInstance.hooks?.['thead.tr.th'] !== undefined) {
+                        cell.applyHook(pluginName, pluginInstance.hooks['thead.tr.th'](cell));
+                    }
+                });
+            });
+        });
+        _headerRows.set($headerRows);
+        return $headerRows;
+    });
+    return {
+        tableAttrs: finalizedTableAttrs,
+        tableHeadAttrs: finalizedTableHeadAttrs,
+        tableBodyAttrs: finalizedTableBodyAttrs,
+        visibleColumns: injectedColumns,
+        flatColumns: $flatColumns,
+        headerRows,
+        originalRows,
+        rows: injectedRows,
+        pageRows: injectedPageRows,
+        pluginStates
+    };
+};

package/dist/headerCells.d.ts

@@ -0,0 +1,80 @@
+import { TableComponent } from './tableComponent.js';
+import type { HeaderLabel } from './types/Label.js';
+import type { AnyPlugins } from './types/TablePlugin.js';
+import type { RenderConfig } from '@humanspeak/svelte-subscribe';
+export type HeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    id: string;
+    label: HeaderLabel<Item, Plugins>;
+    colspan: number;
+    colstart: number;
+};
+export type HeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    role: 'columnheader';
+    colspan: number;
+};
+export declare abstract class HeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<Item, Plugins, 'thead.tr.th'> {
+    label: HeaderLabel<Item, Plugins>;
+    colspan: number;
+    colstart: number;
+    constructor({ id, label, colspan, colstart }: HeaderCellInit<Item, Plugins>);
+    render(): RenderConfig;
+    attrs(): import("svelte/store").Readable<{
+        role: "columnheader";
+        colspan: number;
+    }>;
+    abstract clone(): HeaderCell<Item, Plugins>;
+    isFlat(): this is FlatHeaderCell<Item, Plugins>;
+    isData(): this is DataHeaderCell<Item, Plugins>;
+    isFlatDisplay(): this is FlatDisplayHeaderCell<Item, Plugins>;
+    isGroup(): this is GroupHeaderCell<Item, Plugins>;
+    isGroupDisplay(): this is GroupDisplayHeaderCell<Item, Plugins>;
+}
+export type FlatHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<HeaderCellInit<Item, Plugins>, 'colspan'>;
+export type FlatHeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = HeaderCellAttributes<Item, Plugins>;
+export declare class FlatHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends HeaderCell<Item, Plugins> {
+    __flat: boolean;
+    constructor({ id, label, colstart }: FlatHeaderCellInit<Item, Plugins>);
+    clone(): FlatHeaderCell<Item, Plugins>;
+}
+export type DataHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = FlatHeaderCellInit<Item, Plugins> & {
+    accessorKey?: keyof Item;
+    accessorFn?: (item: Item) => unknown;
+};
+export declare class DataHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends FlatHeaderCell<Item, Plugins> {
+    __data: boolean;
+    accessorKey?: keyof Item;
+    accessorFn?: (item: Item) => unknown;
+    constructor({ id, label, accessorKey, accessorFn, colstart }: DataHeaderCellInit<Item, Plugins>);
+    clone(): DataHeaderCell<Item, Plugins>;
+}
+export type FlatDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<FlatHeaderCellInit<Item, Plugins>, 'label'> & {
+    label?: HeaderLabel<Item, Plugins>;
+};
+export declare class FlatDisplayHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends FlatHeaderCell<Item, Plugins> {
+    __display: boolean;
+    constructor({ id, label, colstart }: FlatDisplayHeaderCellInit<Item, Plugins>);
+    clone(): FlatDisplayHeaderCell<Item, Plugins>;
+}
+export type GroupHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<HeaderCellInit<Item, Plugins>, 'id'> & {
+    ids: string[];
+    allIds: string[];
+};
+export declare class GroupHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends HeaderCell<Item, Plugins> {
+    __group: boolean;
+    ids: string[];
+    allId: string;
+    allIds: string[];
+    constructor({ label, ids, allIds, colspan, colstart }: GroupHeaderCellInit<Item, Plugins>);
+    setIds(ids: string[]): void;
+    pushId(id: string): void;
+    clone(): GroupHeaderCell<Item, Plugins>;
+}
+export type GroupDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<GroupHeaderCellInit<Item, Plugins>, 'label' | 'colspan'> & {
+    label?: HeaderLabel<Item, Plugins>;
+    colspan?: number;
+};
+export declare class GroupDisplayHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends GroupHeaderCell<Item, Plugins> {
+    __display: boolean;
+    constructor({ label, ids, allIds, colspan, colstart }: GroupDisplayHeaderCellInit<Item, Plugins>);
+    clone(): GroupDisplayHeaderCell<Item, Plugins>;
+}