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

291 lines (290 loc) 10.4 kB
import { TableComponent } from './tableComponent.js'; import type { HeaderLabel } from './types/Label.js'; import type { AnyPlugins } from './types/TablePlugin.js'; import type { RenderConfig } from '@humanspeak/svelte-render'; /** * Initialization options for creating a HeaderCell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type HeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = { /** Unique identifier for the cell. */ id: string; /** Label content or render function for the header. */ label: HeaderLabel<Item, Plugins>; /** Number of columns this cell spans. */ colspan: number; /** Starting column index. */ colstart: number; }; /** * HTML attributes for a header cell element. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type HeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = { role: 'columnheader'; colspan: number; }; /** * Abstract base class representing a cell in the table header. * Extended by FlatHeaderCell, DataHeaderCell, GroupHeaderCell, etc. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export declare abstract class HeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<Item, Plugins, 'thead.tr.th'> { /** Label content or render function for the header. */ label: HeaderLabel<Item, Plugins>; /** Number of columns this cell spans. */ colspan: number; /** Starting column index. */ colstart: number; /** * Creates a new HeaderCell. * * @param init - Initialization options. */ constructor({ id, label, colspan, colstart }: HeaderCellInit<Item, Plugins>); /** * Renders the header cell content. * * @returns The render configuration for displaying this cell. * @throws Error if state reference is missing when using a function label. */ render(): RenderConfig; /** * Gets the HTML attributes for this header cell. * * @returns A readable store of cell attributes. */ attrs(): import("svelte/store").Readable<{ role: "columnheader"; colspan: number; }>; abstract clone(): HeaderCell<Item, Plugins>; /** * Type guard to check if this is a flat header cell. * * @returns True if this is a FlatHeaderCell. */ isFlat(): this is FlatHeaderCell<Item, Plugins>; /** * Type guard to check if this is a data header cell. * * @returns True if this is a DataHeaderCell. */ isData(): this is DataHeaderCell<Item, Plugins>; /** * Type guard to check if this is a flat display header cell. * * @returns True if this is a FlatDisplayHeaderCell. */ isFlatDisplay(): this is FlatDisplayHeaderCell<Item, Plugins>; /** * Type guard to check if this is a group header cell. * * @returns True if this is a GroupHeaderCell. */ isGroup(): this is GroupHeaderCell<Item, Plugins>; /** * Type guard to check if this is a group display header cell. * * @returns True if this is a GroupDisplayHeaderCell. */ isGroupDisplay(): this is GroupDisplayHeaderCell<Item, Plugins>; } /** * Initialization options for a flat (non-grouped) header cell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type FlatHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<HeaderCellInit<Item, Plugins>, 'colspan'>; /** * HTML attributes for a flat header cell element. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type FlatHeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = HeaderCellAttributes<Item, Plugins>; /** * A flat (non-grouped) header cell that spans a single column. * Base class for DataHeaderCell and FlatDisplayHeaderCell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export declare class FlatHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends HeaderCell<Item, Plugins> { __flat: boolean; /** * Creates a new FlatHeaderCell. * * @param init - Initialization options. */ constructor({ id, label, colstart }: FlatHeaderCellInit<Item, Plugins>); /** * Creates a copy of this header cell. * * @returns A cloned FlatHeaderCell. */ clone(): FlatHeaderCell<Item, Plugins>; } /** * Initialization options for a data header cell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type DataHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = FlatHeaderCellInit<Item, Plugins> & { /** The key used to access data from the item. */ accessorKey?: keyof Item; /** Function to extract data from the item. */ accessorFn?: (item: Item) => unknown; }; /** * A header cell for a data column that displays values from the data source. * Contains accessor information for retrieving cell values. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export declare class DataHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends FlatHeaderCell<Item, Plugins> { __data: boolean; /** The key used to access data from the item. */ accessorKey?: keyof Item; /** Function to extract data from the item. */ accessorFn?: (item: Item) => unknown; /** * Creates a new DataHeaderCell. * * @param init - Initialization options. */ constructor({ id, label, accessorKey, accessorFn, colstart }: DataHeaderCellInit<Item, Plugins>); /** * Creates a copy of this header cell. * * @returns A cloned DataHeaderCell. */ clone(): DataHeaderCell<Item, Plugins>; } /** * Initialization options for a flat display header cell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type FlatDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<FlatHeaderCellInit<Item, Plugins>, 'label'> & { /** Optional label content (defaults to non-breaking space). */ label?: HeaderLabel<Item, Plugins>; }; /** * A flat header cell for display-only columns (e.g., action columns). * Does not contain data accessor information. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export declare class FlatDisplayHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends FlatHeaderCell<Item, Plugins> { __display: boolean; /** * Creates a new FlatDisplayHeaderCell. * * @param init - Initialization options. */ constructor({ id, label, colstart }: FlatDisplayHeaderCellInit<Item, Plugins>); /** * Creates a copy of this header cell. * * @returns A cloned FlatDisplayHeaderCell. */ clone(): FlatDisplayHeaderCell<Item, Plugins>; } /** * Initialization options for a group header cell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type GroupHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<HeaderCellInit<Item, Plugins>, 'id'> & { /** Current column IDs covered by this group. */ ids: string[]; /** All column IDs in the original group definition. */ allIds: string[]; }; /** * A header cell that spans multiple columns, used for column grouping. * Contains information about which columns are part of the group. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export declare class GroupHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends HeaderCell<Item, Plugins> { __group: boolean; /** Current column IDs covered by this group. */ ids: string[]; /** Combined ID string for all columns in the original group. */ allId: string; /** All column IDs in the original group definition. */ allIds: string[]; /** * Creates a new GroupHeaderCell. * * @param init - Initialization options. */ constructor({ label, ids, allIds, colspan, colstart }: GroupHeaderCellInit<Item, Plugins>); /** * Sets the column IDs covered by this group and updates the cell ID. * * @param ids - The new array of column IDs. */ setIds(ids: string[]): void; /** * Adds a column ID to this group and updates the cell ID. * * @param id - The column ID to add. */ pushId(id: string): void; /** * Creates a copy of this header cell. * * @returns A cloned GroupHeaderCell. */ clone(): GroupHeaderCell<Item, Plugins>; } /** * Initialization options for a group display header cell. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export type GroupDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<GroupHeaderCellInit<Item, Plugins>, 'label' | 'colspan'> & { /** Optional label content (defaults to non-breaking space). */ label?: HeaderLabel<Item, Plugins>; /** Optional colspan (defaults to 1). */ colspan?: number; }; /** * A group header cell for display purposes (e.g., empty group headers). * Used to fill gaps in the header row matrix. * * @template Item - The type of data items in the table. * @template Plugins - The plugins used by the table. */ export declare class GroupDisplayHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends GroupHeaderCell<Item, Plugins> { __display: boolean; /** * Creates a new GroupDisplayHeaderCell. * * @param init - Initialization options. */ constructor({ label, ids, allIds, colspan, colstart }: GroupDisplayHeaderCellInit<Item, Plugins>); /** * Creates a copy of this header cell. * * @returns A cloned GroupDisplayHeaderCell. */ clone(): GroupDisplayHeaderCell<Item, Plugins>; }