@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
61 lines (60 loc) • 2.32 kB
TypeScript
import type { TableState } from './createViewModel.js';
import type { AnyPlugins, ComponentKeys, ElementHook, PluginTablePropSet } from './types/TablePlugin.js';
import type { Clonable } from './utils/clone.js';
import { type Readable } from 'svelte/store';
/**
* Initialization options for a TableComponent.
*/
export interface TableComponentInit {
/** Unique identifier for the component. */
id: string;
}
/**
* Abstract base class for all table components (rows, cells, etc.).
* Provides common functionality for state injection, hook application, and attribute merging.
*
* @template Item - The type of data items in the table.
* @template Plugins - The plugins used by the table.
* @template Key - The component key type (e.g., 'tbody.tr', 'tbody.tr.td').
*/
export declare abstract class TableComponent<Item, Plugins extends AnyPlugins, Key extends ComponentKeys> implements Clonable<TableComponent<Item, Plugins, Key>> {
/** Unique identifier for the component. */
id: string;
/**
* Creates a new TableComponent.
*
* @param init - Initialization options.
*/
constructor({ id }: TableComponentInit);
private attrsForName;
/**
* Gets the merged HTML attributes from all applied plugins.
*
* @returns A readable store of merged attributes.
*/
attrs(): Readable<Record<string, unknown>>;
private propsForName;
/**
* Gets the merged props from all applied plugins.
*
* @returns A readable store of plugin props keyed by plugin name.
*/
props(): Readable<PluginTablePropSet<Plugins>[Key]>;
/** Reference to the table state, injected after creation. */
state?: TableState<Item, Plugins>;
/**
* Injects the table state reference into this component.
*
* @param state - The table state to inject.
*/
injectState(state: TableState<Item, Plugins>): void;
/**
* Applies a plugin hook to this component.
* Hooks can provide both props and attributes.
*
* @param pluginName - The name of the plugin.
* @param hook - The element hook containing props and/or attrs.
*/
applyHook(pluginName: string, hook: ElementHook<Record<string, unknown>, Record<string, unknown>>): void;
abstract clone(): TableComponent<Item, Plugins, Key>;
}