@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
65 lines (64 loc) • 2.22 kB
TypeScript
import { type Writable } from 'svelte/store';
import type { BodyRow } from '../bodyRows.js';
import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
/**
* Configuration options for the addFlatten plugin.
*/
export interface FlattenConfig {
/** Initial depth to flatten. 0 means no flattening. Defaults to 0. */
initialDepth?: number;
}
/**
* State exposed by the addFlatten plugin.
*/
export interface FlattenState {
/** Writable store for the current flatten depth. */
depth: Writable<number>;
}
/**
* Column options for the flatten plugin (currently empty).
*
* @template _Item - The type of data items (unused).
*/
export type FlattenColumnOptions<_Item> = Record<string, never>;
/**
* Props added to table cells by the flatten plugin.
*/
export type FlattenPropSet = NewTablePropSet<{
'tbody.tr.td': {
/** Function to set the flatten depth. */
flatten: (_depth: number) => void;
/** Function to reset flattening (set depth to 0). */
unflatten: () => void;
};
}>;
/**
* Recursively extracts rows at a specific depth from the hierarchy.
*
* @template Item - The type of data items.
* @template Row - The row type.
* @param rows - The rows to flatten.
* @param depth - The depth to extract (0 returns current level).
* @returns The flattened rows array.
*/
export declare const getFlattenedRows: <Item, Row extends BodyRow<Item>>(rows: Row[], depth: number) => Row[];
/**
* Creates a flatten plugin that enables displaying rows at a specific depth level.
* Useful for showing only leaf nodes or a specific level of hierarchical data.
*
* @template Item - The type of data items in the table.
* @param config - Configuration options.
* @returns A TablePlugin that provides flattening functionality.
* @example
* ```typescript
* const table = createTable(data, {
* flatten: addFlatten({
* initialDepth: 0 // Start with no flattening
* })
* })
*
* // Flatten to show only first-level children
* table.pluginStates.flatten.depth.set(1)
* ```
*/
export declare const addFlatten: <Item>({ initialDepth }?: FlattenConfig) => TablePlugin<Item, FlattenState, FlattenColumnOptions<Item>, FlattenPropSet>;