@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
59 lines (58 loc) • 2.32 kB
TypeScript
import { type Readable, type Writable } from 'svelte/store';
import type { BodyRow } from '../bodyRows.js';
import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
import { type RecordSetStore } from '../utils/store.js';
/**
* Configuration options for the addExpandedRows plugin.
*
* @template _Item - The type of data items (unused but required for type inference).
*/
export interface ExpandedRowsConfig<_Item> {
/** Initial expanded state keyed by row ID. */
initialExpandedIds?: Record<string, boolean>;
}
/**
* State exposed by the addExpandedRows plugin.
*
* @template Item - The type of data items in the table.
*/
export interface ExpandedRowsState<Item> {
/** Store containing expanded row IDs. */
expandedIds: RecordSetStore<string>;
/** Gets the expansion state stores for a specific row. */
getRowState: (_row: BodyRow<Item>) => ExpandedRowsRowState;
/** Cleans up internal subscriptions and clears the row state cache. Call when destroying the table. */
invalidate: () => void;
}
/**
* Expansion state for a single row.
*/
export interface ExpandedRowsRowState {
/** Writable store for the row's expanded state. */
isExpanded: Writable<boolean>;
/** Readable store indicating if this row can be expanded (has sub-rows). */
canExpand: Readable<boolean>;
/** Readable store indicating if all expandable sub-rows are expanded. */
isAllSubRowsExpanded: Readable<boolean>;
}
/**
* Creates an expanded rows plugin that enables expanding/collapsing rows with sub-rows.
* When a row is expanded, its sub-rows are included in the flattened row list.
*
* @template Item - The type of data items in the table.
* @param config - Configuration options.
* @returns A TablePlugin that provides row expansion functionality.
* @example
* ```typescript
* const table = createTable(data, {
* expand: addExpandedRows({
* initialExpandedIds: { '0': true } // Row 0 starts expanded
* })
* })
*
* // Toggle expansion
* const rowState = table.pluginStates.expand.getRowState(row)
* rowState.isExpanded.update(v => !v)
* ```
*/
export declare const addExpandedRows: <Item>({ initialExpandedIds }?: ExpandedRowsConfig<Item>) => TablePlugin<Item, ExpandedRowsState<Item>, Record<string, never>, NewTablePropSet<never>>;