@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
48 lines (47 loc) • 1.63 kB
TypeScript
import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
/**
* Utility type that extracts keys from Item whose values are arrays of Item.
* Used to infer valid children property keys.
*
* @template Item - The type of data items.
*/
export type ValidChildrenKey<Item> = {
[Key in keyof Item]: Item[Key] extends Item[] ? Key : never;
}[keyof Item];
/**
* Function type for extracting child items from a parent item.
*
* @template Item - The type of data items.
*/
export type ValidChildrenFn<Item> = (_item: Item) => Item[] | undefined;
/**
* Configuration options for the addSubRows plugin.
*
* @template Item - The type of data items.
*/
export interface SubRowsConfig<Item> {
/** Property key or function to extract child items from each item. */
children: ValidChildrenKey<Item> | ValidChildrenFn<Item>;
}
/**
* Creates a sub-rows plugin that enables hierarchical data display.
* Extracts child items from each row using the specified children accessor.
*
* @template Item - The type of data items in the table.
* @param config - Configuration with the children accessor.
* @returns A TablePlugin that creates hierarchical row structure.
* @example
* ```typescript
* interface Employee {
* name: string
* directReports?: Employee[]
* }
*
* const table = createTable(data, {
* subRows: addSubRows({
* children: 'directReports' // or: (item) => item.directReports
* })
* })
* ```
*/
export declare const addSubRows: <Item>({ children }: SubRowsConfig<Item>) => TablePlugin<Item, Record<string, never>, Record<string, never>, NewTablePropSet<never>>;