@smartnet360/svelte-grid 0.1.0

package/dist/themes.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Grid Themes
+ *
+ * Predefined color themes using CSS custom properties.
+ * Inspired by Tailwind CSS color palette.
+ */
+export interface GridTheme {
+    /** Theme name */
+    name: string;
+    /** CSS variable overrides */
+    variables: Record<string, string>;
+}
+/**
+ * Default light theme - Clean and minimal
+ */
+export declare const defaultTheme: GridTheme;
+/**
+ * Tailwind Blue theme - Modern blue accents
+ */
+export declare const tailwindBlue: GridTheme;
+/**
+ * Tailwind Emerald theme - Fresh green accents
+ */
+export declare const tailwindEmerald: GridTheme;
+/**
+ * Tailwind Rose theme - Warm pink accents
+ */
+export declare const tailwindRose: GridTheme;
+/**
+ * Tailwind Amber theme - Warm orange/yellow accents
+ */
+export declare const tailwindAmber: GridTheme;
+/**
+ * Tailwind Slate theme - Neutral modern gray
+ */
+export declare const tailwindSlate: GridTheme;
+/**
+ * Dark theme - For dark mode UIs
+ */
+export declare const darkTheme: GridTheme;
+/**
+ * All available themes
+ */
+export declare const themes: {
+    readonly default: GridTheme;
+    readonly 'tailwind-blue': GridTheme;
+    readonly 'tailwind-emerald': GridTheme;
+    readonly 'tailwind-rose': GridTheme;
+    readonly 'tailwind-amber': GridTheme;
+    readonly 'tailwind-slate': GridTheme;
+    readonly dark: GridTheme;
+};
+export type ThemeName = keyof typeof themes;
+/**
+ * Convert theme to CSS style string
+ */
+export declare function themeToStyle(theme: GridTheme): string;
+/**
+ * Create a custom theme by extending an existing one
+ */
+export declare function createTheme(base: GridTheme, overrides: Record<string, string>): GridTheme;

package/dist/themes.js

@@ -0,0 +1,192 @@
+/**
+ * Grid Themes
+ *
+ * Predefined color themes using CSS custom properties.
+ * Inspired by Tailwind CSS color palette.
+ */
+/**
+ * Default light theme - Clean and minimal
+ */
+export const defaultTheme = {
+    name: 'default',
+    variables: {
+        '--sg-border-color': '#e2e8f0',
+        '--sg-header-bg': '#f8fafc',
+        '--sg-header-color': '#1e293b',
+        '--sg-row-bg': '#ffffff',
+        '--sg-row-alt-bg': '#f8fafc',
+        '--sg-row-hover-bg': '#f1f5f9',
+        '--sg-cell-padding-x': '12px',
+        '--sg-cell-padding-y': '8px',
+        '--sg-font-size': '14px',
+        '--sg-primary-color': '#3b82f6',
+        '--sg-frozen-border-color': '#cbd5e1',
+        '--sg-group-header-bg': '#f1f5f9',
+        '--sg-group-header-text': '#334155',
+        '--sg-group-header-hover-bg': '#e2e8f0',
+    }
+};
+/**
+ * Tailwind Blue theme - Modern blue accents
+ */
+export const tailwindBlue = {
+    name: 'tailwind-blue',
+    variables: {
+        '--sg-border-color': '#e0e7ff',
+        '--sg-header-bg': 'linear-gradient(to bottom, #eef2ff, #e0e7ff)',
+        '--sg-header-color': '#312e81',
+        '--sg-row-bg': '#ffffff',
+        '--sg-row-alt-bg': '#f5f7ff',
+        '--sg-row-hover-bg': '#eef2ff',
+        '--sg-primary-color': '#4f46e5',
+        '--sg-frozen-border-color': '#a5b4fc',
+        '--sg-group-header-bg': '#e0e7ff',
+        '--sg-group-header-text': '#3730a3',
+        '--sg-group-header-hover-bg': '#c7d2fe',
+        '--sg-header-icon-color': '#6366f1',
+        '--sg-sort-active-color': '#4f46e5',
+    }
+};
+/**
+ * Tailwind Emerald theme - Fresh green accents
+ */
+export const tailwindEmerald = {
+    name: 'tailwind-emerald',
+    variables: {
+        '--sg-border-color': '#d1fae5',
+        '--sg-header-bg': 'linear-gradient(to bottom, #ecfdf5, #d1fae5)',
+        '--sg-header-color': '#064e3b',
+        '--sg-row-bg': '#ffffff',
+        '--sg-row-alt-bg': '#f0fdf4',
+        '--sg-row-hover-bg': '#ecfdf5',
+        '--sg-primary-color': '#10b981',
+        '--sg-frozen-border-color': '#6ee7b7',
+        '--sg-group-header-bg': '#d1fae5',
+        '--sg-group-header-text': '#065f46',
+        '--sg-group-header-hover-bg': '#a7f3d0',
+        '--sg-header-icon-color': '#059669',
+        '--sg-sort-active-color': '#10b981',
+    }
+};
+/**
+ * Tailwind Rose theme - Warm pink accents
+ */
+export const tailwindRose = {
+    name: 'tailwind-rose',
+    variables: {
+        '--sg-border-color': '#fce7f3',
+        '--sg-header-bg': 'linear-gradient(to bottom, #fdf2f8, #fce7f3)',
+        '--sg-header-color': '#831843',
+        '--sg-row-bg': '#ffffff',
+        '--sg-row-alt-bg': '#fdf2f8',
+        '--sg-row-hover-bg': '#fce7f3',
+        '--sg-primary-color': '#ec4899',
+        '--sg-frozen-border-color': '#f9a8d4',
+        '--sg-group-header-bg': '#fce7f3',
+        '--sg-group-header-text': '#9d174d',
+        '--sg-group-header-hover-bg': '#fbcfe8',
+        '--sg-header-icon-color': '#db2777',
+        '--sg-sort-active-color': '#ec4899',
+    }
+};
+/**
+ * Tailwind Amber theme - Warm orange/yellow accents
+ */
+export const tailwindAmber = {
+    name: 'tailwind-amber',
+    variables: {
+        '--sg-border-color': '#fef3c7',
+        '--sg-header-bg': 'linear-gradient(to bottom, #fffbeb, #fef3c7)',
+        '--sg-header-color': '#78350f',
+        '--sg-row-bg': '#ffffff',
+        '--sg-row-alt-bg': '#fffbeb',
+        '--sg-row-hover-bg': '#fef3c7',
+        '--sg-primary-color': '#f59e0b',
+        '--sg-frozen-border-color': '#fcd34d',
+        '--sg-group-header-bg': '#fef3c7',
+        '--sg-group-header-text': '#92400e',
+        '--sg-group-header-hover-bg': '#fde68a',
+        '--sg-header-icon-color': '#d97706',
+        '--sg-sort-active-color': '#f59e0b',
+    }
+};
+/**
+ * Tailwind Slate theme - Neutral modern gray
+ */
+export const tailwindSlate = {
+    name: 'tailwind-slate',
+    variables: {
+        '--sg-border-color': '#e2e8f0',
+        '--sg-header-bg': 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
+        '--sg-header-color': '#0f172a',
+        '--sg-row-bg': '#ffffff',
+        '--sg-row-alt-bg': '#f8fafc',
+        '--sg-row-hover-bg': '#f1f5f9',
+        '--sg-primary-color': '#475569',
+        '--sg-frozen-border-color': '#94a3b8',
+        '--sg-group-header-bg': '#f1f5f9',
+        '--sg-group-header-text': '#1e293b',
+        '--sg-group-header-hover-bg': '#e2e8f0',
+        '--sg-header-icon-color': '#64748b',
+        '--sg-sort-active-color': '#334155',
+    }
+};
+/**
+ * Dark theme - For dark mode UIs
+ */
+export const darkTheme = {
+    name: 'dark',
+    variables: {
+        '--sg-border-color': '#374151',
+        '--sg-header-bg': '#1f2937',
+        '--sg-header-color': '#f9fafb',
+        '--sg-row-bg': '#111827',
+        '--sg-row-alt-bg': '#1f2937',
+        '--sg-row-hover-bg': '#374151',
+        '--sg-primary-color': '#60a5fa',
+        '--sg-frozen-border-color': '#4b5563',
+        '--sg-group-header-bg': '#1f2937',
+        '--sg-group-header-text': '#e5e7eb',
+        '--sg-group-header-hover-bg': '#374151',
+        '--sg-group-header-collapsed-bg': '#1f2937',
+        '--sg-header-icon-color': '#9ca3af',
+        '--sg-sort-active-color': '#60a5fa',
+        '--sg-popup-bg': '#1f2937',
+        '--sg-popup-border': '#374151',
+        '--sg-group-toggle-color': '#9ca3af',
+        '--sg-group-toggle-hover-color': '#e5e7eb',
+        '--sg-group-field-color': '#9ca3af',
+        '--sg-group-key-color': '#f3f4f6',
+        '--sg-group-count-color': '#6b7280',
+        '--sg-group-agg-color': '#9ca3af',
+    }
+};
+/**
+ * All available themes
+ */
+export const themes = {
+    default: defaultTheme,
+    'tailwind-blue': tailwindBlue,
+    'tailwind-emerald': tailwindEmerald,
+    'tailwind-rose': tailwindRose,
+    'tailwind-amber': tailwindAmber,
+    'tailwind-slate': tailwindSlate,
+    dark: darkTheme,
+};
+/**
+ * Convert theme to CSS style string
+ */
+export function themeToStyle(theme) {
+    return Object.entries(theme.variables)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join('; ');
+}
+/**
+ * Create a custom theme by extending an existing one
+ */
+export function createTheme(base, overrides) {
+    return {
+        name: 'custom',
+        variables: { ...base.variables, ...overrides }
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,291 @@
+/**
+ * Core type definitions for svelte-grid
+ */
+import type { Snippet } from 'svelte';
+/** Base type for grid row data - any object type */
+export type RowData = {};
+export interface ColumnDefinition<T = RowData> {
+    /** Unique field key matching data property */
+    field: string;
+    /** Display title in header */
+    title: string;
+    /** Column width in pixels or CSS value */
+    width?: number | string;
+    /** Minimum column width */
+    minWidth?: number;
+    /** Maximum column width */
+    maxWidth?: number;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Enable header filter for this column */
+    headerFilter?: boolean;
+    /** Built-in formatter name or custom function */
+    formatter?: FormatterType | FormatterFunction<T>;
+    /** Horizontal alignment */
+    hAlign?: 'left' | 'center' | 'right';
+    /** Vertical alignment */
+    vAlign?: 'top' | 'middle' | 'bottom';
+    /** CSS class(es) for cells in this column */
+    cssClass?: string;
+    /** Whether column is visible */
+    visible?: boolean;
+    /** Whether column is frozen (pinned) - 'left', 'right', or true (same as 'left') */
+    frozen?: boolean | 'left' | 'right';
+    /** Header tooltip */
+    headerTooltip?: string;
+    /** Cell tooltip - can be static string or function */
+    tooltip?: string | ((cell: CellContext<T>) => string);
+    /** Header menu items (dropdown menu in header) */
+    headerMenu?: MenuItemDefinition<T>[] | ((column: ColumnDefinition<T>) => MenuItemDefinition<T>[]);
+    /** Header popup content (shown when clicking popup icon) */
+    headerPopup?: PopupContent<T>;
+    /** Show popup icon in header (set to true or custom icon string) */
+    headerPopupIcon?: boolean | string;
+}
+/** Menu item definition - either an action item or a separator */
+export type MenuItemDefinition<T = RowData> = MenuItemAction<T> | MenuItemSeparator;
+/** Regular menu item with action */
+export interface MenuItemAction<T = RowData> {
+    /** Display label for menu item */
+    label: string;
+    /** Icon (HTML string or emoji) */
+    icon?: string;
+    /** Action to perform when clicked */
+    action?: MenuAction<T>;
+    /** Whether item is disabled */
+    disabled?: boolean | ((context: MenuContext<T>) => boolean);
+    /** Submenu items */
+    menu?: MenuItemDefinition<T>[];
+    /** CSS class for the menu item */
+    cssClass?: string;
+    /** Not a separator */
+    separator?: false;
+}
+/** Menu separator item */
+export interface MenuItemSeparator {
+    /** Separator - renders as a divider */
+    separator: true;
+}
+/** Menu action callback */
+export type MenuAction<T = RowData> = (context: MenuContext<T>) => void;
+/** Context passed to menu actions */
+export interface MenuContext<T = RowData> {
+    /** Column definition (for header menus) */
+    column?: ColumnDefinition<T>;
+    /** Row data (for row/cell context menus) */
+    row?: T;
+    /** Row index (for row/cell context menus) */
+    rowIndex?: number;
+    /** Cell context (for cell context menus) */
+    cell?: CellContext<T>;
+    /** Close the menu */
+    closeMenu: () => void;
+}
+/** Popup content - can be a string, Snippet, or function */
+export type PopupContent<T = RowData> = string | Snippet<[PopupContext<T>]> | ((context: PopupContext<T>) => string);
+/** Context passed to popup content */
+export interface PopupContext<T = RowData> {
+    /** Column definition (for header popups) */
+    column?: ColumnDefinition<T>;
+    /** Row data (for row popups) */
+    row?: T;
+    /** Row index (for row popups) */
+    rowIndex?: number;
+    /** Cell context (for cell popups) */
+    cell?: CellContext<T>;
+    /** Close the popup */
+    closePopup: () => void;
+}
+export type FormatterType = 'text' | 'number' | 'money' | 'date' | 'datetime' | 'boolean' | 'link' | 'image' | 'progress';
+export type FormatterFunction<T = RowData> = (cell: CellContext<T>) => string | number | undefined;
+export interface CellContext<T = RowData> {
+    /** The cell's value */
+    value: unknown;
+    /** The entire row data */
+    row: T;
+    /** The column definition */
+    column: ColumnDefinition<T>;
+    /** Row index in the current view */
+    rowIndex: number;
+    /** Column index */
+    columnIndex: number;
+}
+export interface RowContext<T = RowData> {
+    /** The row data */
+    data: T;
+    /** Row index in the current view */
+    index: number;
+    /** Original index in raw data */
+    originalIndex: number;
+}
+export interface GridOptions<T = RowData> {
+    /** Array of data objects */
+    data: T[];
+    /** Column definitions */
+    columns: ColumnDefinition<T>[];
+    /** Unique key field in data for row identification */
+    rowKey?: keyof T | string;
+    /** Fixed height for the grid container */
+    height?: string | number;
+    /** Fixed row height in pixels (required for virtual scrolling) */
+    rowHeight?: number;
+    /** Placeholder text when no data */
+    placeholder?: string;
+    /** Enable/disable row hover highlighting */
+    rowHover?: boolean;
+    /** Enable/disable alternating row colors */
+    stripedRows?: boolean;
+    /** Enable/disable grid borders */
+    bordered?: boolean;
+    /** Grid density: compact, normal, comfortable */
+    density?: 'compact' | 'normal' | 'comfortable';
+    /** CSS class for the grid container */
+    cssClass?: string;
+    /** Number of rows to freeze at the top */
+    frozenRows?: number;
+    /** Row context menu (right-click) */
+    rowContextMenu?: MenuItemDefinition<T>[] | ((row: T, rowIndex: number) => MenuItemDefinition<T>[]);
+    /** Cell context menu (right-click on cell) */
+    cellContextMenu?: MenuItemDefinition<T>[] | ((cell: CellContext<T>) => MenuItemDefinition<T>[]);
+    /** Row click popup content */
+    rowClickPopup?: PopupContent<T>;
+}
+export type SortDirection = 'asc' | 'desc' | 'none';
+export interface SortConfig {
+    /** Field to sort by */
+    field: string;
+    /** Sort direction */
+    direction: SortDirection;
+}
+export type FilterOperator = 'eq' | 'neq' | 'gt' | 'gte' | 'lt' | 'lte' | 'contains' | 'startswith' | 'endswith' | 'regex';
+export interface FilterConfig {
+    /** Field to filter */
+    field: string;
+    /** Filter operator */
+    operator: FilterOperator;
+    /** Filter value */
+    value: unknown;
+}
+/** Group configuration - defines how to group rows */
+export type GroupBy<T = RowData> = string | string[] | ((row: T) => string) | GroupConfig<T> | GroupConfig<T>[];
+/** Detailed group configuration */
+export interface GroupConfig<T = RowData> {
+    /** Field to group by, or function returning group key */
+    field: string | ((row: T) => string);
+    /** Whether groups start expanded - can be boolean or function */
+    startOpen?: boolean | ((group: GroupInfo<T>) => boolean);
+    /** Custom header content - string, function, or use groupHeader snippet */
+    header?: string | ((group: GroupInfo<T>) => string);
+    /** Sort direction for groups */
+    order?: 'asc' | 'desc' | ((a: string, b: string) => number);
+}
+/** Information about a group, passed to group header renderers */
+export interface GroupInfo<T = RowData> {
+    /** The group key/value (e.g., "Engineering", "Sales") */
+    key: string;
+    /** The field name this group is based on */
+    field: string;
+    /** All rows belonging to this group */
+    rows: T[];
+    /** Nesting level for multi-level grouping (0 = top level) */
+    level: number;
+    /** Number of rows in this group (including nested) */
+    count: number;
+    /** Whether the group is currently expanded */
+    isOpen: boolean;
+    /** Toggle the group open/closed */
+    toggle: () => void;
+    /** Aggregated values per column field */
+    aggregates: GroupAggregates;
+    /** Parent group info (for nested groups) */
+    parent?: GroupInfo<T>;
+    /** Child groups (for nested groups) */
+    children?: GroupInfo<T>[];
+}
+/** Aggregated values for a group */
+export interface GroupAggregates {
+    [field: string]: {
+        sum?: number;
+        avg?: number;
+        min?: number;
+        max?: number;
+        count: number;
+    };
+}
+/** A display row - either a data row or a group header */
+export type DisplayRow<T = RowData> = {
+    type: 'row';
+    data: T;
+    index: number;
+} | {
+    type: 'group';
+    group: GroupInfo<T>;
+};
+export interface GridState<T = RowData> {
+    /** Raw data array */
+    rawData: T[];
+    /** Column definitions */
+    columns: ColumnDefinition<T>[];
+    /** Current scroll position */
+    scrollTop: number;
+    /** Container dimensions */
+    containerHeight: number;
+    containerWidth: number;
+    /** Row height */
+    rowHeight: number;
+}
+export interface TablePlugin<T = RowData> {
+    /** Unique plugin name */
+    name: string;
+    /** Plugin initialization */
+    init: (context: PluginContext<T>) => PluginInstance<T>;
+}
+export interface PluginContext<T = RowData> {
+    /** Access to grid state */
+    getState: () => GridState<T>;
+    /** Update state */
+    updateState: (updates: Partial<GridState<T>>) => void;
+    /** Subscribe to state changes */
+    subscribe: (callback: () => void) => () => void;
+}
+export interface PluginInstance<T = RowData> {
+    /** Data pipeline handler with priority */
+    dataPipeline?: {
+        priority: number;
+        handler: (data: T[]) => T[];
+    };
+    /** Header cell enhancements */
+    headerCell?: (column: ColumnDefinition<T>) => Record<string, unknown>;
+    /** Cell enhancements */
+    cell?: (cell: CellContext<T>) => Record<string, unknown>;
+    /** Public API methods exposed on grid instance */
+    api?: Record<string, (...args: unknown[]) => unknown>;
+    /** Cleanup function */
+    destroy?: () => void;
+}
+export interface GridEvents<T = RowData> {
+    /** Row click event */
+    rowclick?: (row: T, index: number, event: MouseEvent) => void;
+    /** Row double-click event */
+    rowdblclick?: (row: T, index: number, event: MouseEvent) => void;
+    /** Cell click event */
+    cellclick?: (cell: CellContext<T>, event: MouseEvent) => void;
+    /** Header click event */
+    headerclick?: (column: ColumnDefinition<T>, event: MouseEvent) => void;
+    /** Data changed event */
+    datachanged?: (data: T[]) => void;
+    /** Scroll event */
+    scroll?: (scrollTop: number, scrollLeft: number) => void;
+}
+export interface GridSnippets<T = RowData> {
+    /** Custom cell renderer */
+    cell?: Snippet<[CellContext<T>]>;
+    /** Custom header cell renderer */
+    headerCell?: Snippet<[ColumnDefinition<T>]>;
+    /** Custom row renderer */
+    row?: Snippet<[RowContext<T>]>;
+    /** Empty state renderer */
+    empty?: Snippet<[]>;
+    /** Loading state renderer */
+    loading?: Snippet<[]>;
+}

package/dist/types.js

@@ -0,0 +1,4 @@
+/**
+ * Core type definitions for svelte-grid
+ */
+export {};

package/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "@smartnet360/svelte-grid",
+	"version": "0.1.0",
+	"description": "A Svelte 5 table/grid library inspired by Tabulator",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"release:patch": "npm version patch && npm publish --access public",
+		"release:minor": "npm version minor && npm publish --access public",
+		"release:major": "npm version major && npm publish --access public"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.md"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^7.0.4"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"grid",
+		"table",
+		"datagrid",
+		"datatable"
+	]
+}