UNPKG

@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

88 lines (87 loc) 3.5 kB
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 addSelectedRows plugin. * * @template _Item - The type of data items (unused but required for type inference). */ export interface SelectedRowsConfig<_Item> { /** Initial selection state keyed by data ID. */ initialSelectedDataIds?: Record<string, boolean>; /** If true, selecting a parent row selects all its sub-rows. Defaults to true. */ linkDataSubRows?: boolean; } /** * State exposed by the addSelectedRows plugin. * * @template Item - The type of data items in the table. */ export interface SelectedRowsState<Item> { /** Store containing selected data IDs. */ selectedDataIds: RecordSetStore<string>; /** Writable store for selecting/deselecting all rows. */ allRowsSelected: Writable<boolean>; /** Readable store indicating if any rows are selected. */ someRowsSelected: Readable<boolean>; /** Writable store for selecting/deselecting all rows on the current page. */ allPageRowsSelected: Writable<boolean>; /** Readable store indicating if any rows on the current page are selected. */ somePageRowsSelected: Readable<boolean>; /** Gets the selection state stores for a specific row. */ getRowState: (_row: BodyRow<Item>) => SelectedRowsRowState; /** Cleans up internal subscriptions and clears the row state cache. Call when destroying the table. */ invalidate: () => void; } /** * Selection state for a single row. */ export interface SelectedRowsRowState { /** Writable store for the row's selection state. */ isSelected: Writable<boolean>; /** Readable store indicating if some (but not all) sub-rows are selected. */ isSomeSubRowsSelected: Readable<boolean>; /** Readable store indicating if all sub-rows are selected. */ isAllSubRowsSelected: Readable<boolean>; } /** * Props added to table rows by the selected rows plugin. */ export type SelectedRowsPropSet = NewTablePropSet<{ 'tbody.tr': { /** Whether this row is selected. */ selected: boolean; /** Whether some (but not all) sub-rows are selected. */ someSubRowsSelected: boolean; /** Whether all sub-rows are selected. */ allSubRowsSelected: boolean; }; }>; /** * Creates a row selection plugin that enables selecting/deselecting table rows. * Supports hierarchical selection with parent-child row linking. * * @template Item - The type of data items in the table. * @param config - Configuration options. * @returns A TablePlugin that provides row selection functionality. * @example * ```typescript * const table = createTable(data, { * select: addSelectedRows({ * linkDataSubRows: true // Selecting parent selects children * }) * }) * * // Access selection state * const { selectedDataIds, allRowsSelected } = table.pluginStates.select * * // Toggle all rows * allRowsSelected.set(true) * * // Check if a specific row is selected * const rowState = table.pluginStates.select.getRowState(row) * $rowState.isSelected // true or false * ``` */ export declare const addSelectedRows: <Item>({ initialSelectedDataIds, linkDataSubRows }?: SelectedRowsConfig<Item>) => TablePlugin<Item, SelectedRowsState<Item>, Record<string, never>, SelectedRowsPropSet>;