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

94 lines (93 loc) 3.48 kB
import { type Readable, type Updater, type Writable } from 'svelte/store'; import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js'; /** * Configuration options for the addPagination plugin. * Supports both client-side and server-side pagination modes. */ export type PaginationConfig = { /** Initial page index (0-based). Defaults to 0. */ initialPageIndex?: number; /** Initial page size. Defaults to 10. */ initialPageSize?: number; } & ({ /** Client-side pagination mode. */ serverSide?: false | undefined; serverItemCount?: undefined; } | { /** Server-side pagination mode. */ serverSide: true; /** A readable store containing the total item count from the server. */ serverItemCount: Readable<number>; }); /** * State exposed by the addPagination plugin. */ export interface PaginationState { /** Writable store for the current page size. */ pageSize: Writable<number>; /** Writable store for the current page index (0-based). */ pageIndex: Writable<number>; /** Readable store for the total number of pages. */ pageCount: Readable<number>; /** Readable store indicating if there's a previous page. */ hasPreviousPage: Readable<boolean>; /** Readable store indicating if there's a next page. */ hasNextPage: Readable<boolean>; } /** * Creates a page store with pagination state and navigation helpers. * * @param config - Configuration for the page store. * @returns An object containing pagination state stores. */ export declare const createPageStore: ({ items, initialPageSize, initialPageIndex, serverSide, serverItemCount }: PageStoreConfig) => { pageSize: { subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: () => void) => import("svelte/store").Unsubscriber; update: (fn: Updater<number>) => void; set: (newPageSize: number) => void; }; pageIndex: Writable<number>; pageCount: Readable<number>; serverItemCount: Readable<number> | undefined; hasPreviousPage: Readable<boolean>; hasNextPage: Readable<boolean>; }; /** * Configuration for createPageStore. */ export interface PageStoreConfig { /** Readable store of items to paginate. */ items: Readable<unknown[]>; /** Initial page size. */ initialPageSize?: number; /** Initial page index (0-based). */ initialPageIndex?: number; /** Whether pagination is server-side. */ serverSide?: boolean; /** Total item count from server (for server-side pagination). */ serverItemCount?: Readable<number>; } /** * Creates a pagination plugin that enables paged navigation through table rows. * Supports both client-side and server-side pagination. * * @template Item - The type of data items in the table. * @param config - Configuration options for pagination. * @returns A TablePlugin that provides pagination functionality. * @example * ```typescript * const table = createTable(data, { * page: addPagination({ * initialPageSize: 20, * initialPageIndex: 0 * }) * }) * * // Navigate pages * const { pageIndex, pageCount, hasNextPage } = table.pluginStates.page * if ($hasNextPage) { * pageIndex.update(n => n + 1) * } * ``` */ export declare const addPagination: <Item>({ initialPageIndex, initialPageSize, serverSide, serverItemCount }?: PaginationConfig) => TablePlugin<Item, PaginationState, Record<string, never>, NewTablePropSet<never>>;