@svgrid/grid 1.0.2 → 1.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Boyko Markov <boikom@jqwidgets.com>
+Copyright (c) 2026 jQWidgets Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,39 +1,137 @@
-# @svgrid/grid
-
-Headless-first independent Svelte-native grid engine and render utilities.
-
-## Install
-
-```bash
-pnpm add @svgrid/grid
-```
-
-## Quick start
-
-```ts
-import {
-  createCoreRowModel,
-  createSvGrid,
-  tableFeatures,
-} from '@svgrid/grid'
-```
-
-Primary API:
-
-- `createSvGrid` (with `createGrid` compatibility alias)
-- `createSvGridState` (with `createGridState` compatibility alias)
-- `subscribeSvGrid` (with `subscribeGrid` compatibility alias)
-- `getGrid*A11yProps` helpers for accessible headless markup
-
-## Production checklist
-
-- Bring your own semantic table/grid markup and styling
-- Add keyboard interactions appropriate for your UX
-- Use server-side controlled state for large datasets
-- Add virtualization strategy when rendering large lists
-
-## License & trademark
-
-The source code is **MIT-licensed** - see [LICENSE](./LICENSE). SvGrid™
-and sv-grid™ are trademarks of jQWidgets Ltd; the license covers the
-code only, not the name or logo.
+<p align="center">
+  <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
+</p>
+
+<h1 align="center">@svgrid/grid</h1>
+
+<p align="center"><strong>The Svelte 5 native data grid. Headless-first. Render-ready.</strong></p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/npm/v/%40svgrid%2Fgrid.svg?label=%40svgrid%2Fgrid" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@svgrid/grid"><img src="https://img.shields.io/npm/dm/%40svgrid%2Fgrid.svg" alt="npm downloads" /></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /></a>
+  <a href="./dist"><img src="https://img.shields.io/badge/types-included-blue.svg" alt="TypeScript" /></a>
+  <a href="https://svelte.dev"><img src="https://img.shields.io/badge/svelte-5-ff3e00.svg" alt="Svelte 5" /></a>
+</p>
+
+<p align="center">
+  <a href="https://svgrid.com">Website</a> ·
+  <a href="https://svgrid.com/docs">Docs</a> ·
+  <a href="https://svgrid.com/demos">150+ Demos</a> ·
+  <a href="https://svgrid.com/pricing">Pricing</a> ·
+  <a href="https://svgrid.com/roadmap">Roadmap</a>
+</p>
+
+---
+
+A production-grade data grid built from the first line for **Svelte 5 runes** - not a React grid wrapped in a Svelte shim. Compose the headless engine yourself, or drop in the full `<SvGrid />` render component and ship. The MIT core has **zero feature gating**: no license key, no watermark, no row-count cap.
+
+## Install
+
+Scaffold a working Vite + Svelte 5 app with SvGrid wired up:
+
+```bash
+npm create @svgrid@latest
+```
+
+Or add it to an existing app:
+
+```bash
+npm install @svgrid/grid
+```
+
+## Quick start
+
+```svelte
+<script lang="ts">
+  import { SvGrid, type ColumnDef } from '@svgrid/grid'
+
+  const rows = [
+    { firstName: 'Ada',   age: 36, status: 'active' },
+    { firstName: 'Linus', age: 54, status: 'active' },
+    { firstName: 'Grace', age: 85, status: 'inactive' },
+  ]
+  const columns: ColumnDef<{}, (typeof rows)[number]>[] = [
+    { field: 'firstName', header: 'First name' },
+    { field: 'age',       header: 'Age' },
+    { field: 'status',    header: 'Status' },
+  ]
+</script>
+
+<SvGrid data={rows} columns={columns} />
+```
+
+That is a real, accessible grid. Sorting, filtering, virtualization, cell selection, and inline editing all wire up the moment you turn on the matching prop.
+
+## Capabilities
+
+- **Virtualization** - row + column windowing; 100k x 100 stays smooth, with a 1M-row demo.
+- **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
+- **Editing** - 14 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) plus a `cellEditor` snippet slot for anything custom.
+- **Selection** - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
+- **Hierarchy** - row grouping with aggregation, tree data, master/detail, full-width detail rows.
+- **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, column sizing API, zebra rows.
+- **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
+- **Accessibility** - WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
+- **Engineered for production** - first-class TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via `--sg-*` CSS tokens.
+- **Lean** - ~7.5 KB gzipped headless core, ~42 KB gzipped full render component; Svelte stays a peer dependency.
+
+## Headless or render-ready
+
+SvGrid ships two layers from one package, so you can choose how much control you want:
+
+```ts
+import {
+  // Drop-in render component
+  SvGrid,
+  // Headless engine + row-model factories
+  createSvGrid,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  createGroupedRowModel,
+  createExpandedRowModel,
+  createPaginatedRowModel,
+  // Feature modules
+  tableFeatures,
+  rowSortingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  // Cell renderers
+  renderSnippet,
+  renderComponent,
+  type ColumnDef,
+  type SvGridApi,
+} from '@svgrid/grid'
+```
+
+- **Headless** - drive `createSvGrid` and the row-model factories, render your own markup. `getGrid*A11yProps` helpers keep custom markup accessible.
+- **Render-ready** - `<SvGrid />` is a complete, accessible, themeable grid you configure with props.
+
+Compatibility aliases are provided for the framework-neutral names: `createGrid`, `createGridState`, `subscribeGrid`.
+
+## AI-native
+
+SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) and `llms.txt` / `llms-full.txt`, so Claude, Cursor, and Zed answer with accurate, version-pinned APIs and all 150+ demo sources as context - not hallucinated methods.
+
+## Enterprise
+
+The MIT core is free for any use, including commercial. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack adds Excel / PDF / CSV / TSV / HTML export, paginated print, pivot tables with a drag-and-drop Designer, and AI helpers. OSS projects receive an Enterprise key free. See [Pricing](https://svgrid.com/pricing).
+
+## Documentation
+
+- [Getting started](https://svgrid.com/docs) - end-to-end walkthrough.
+- [150+ live demos](https://svgrid.com/demos) - copy-paste recipes for every feature.
+- [Why headless?](https://svgrid.com/docs) - when to compose vs. drop in.
+- [Theming](https://svgrid.com/docs) - re-skin via `--sg-*` tokens and dark mode.
+
+## Who's behind it
+
+SvGrid is built by [jQWidgets](https://www.jqwidgets.com), shipping UI components since 2011 to 5,000+ companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native effort.
+
+## License & trademark
+
+The source code is **MIT-licensed** - see [LICENSE](./LICENSE). It is free for commercial use. SvGrid&trade; and sv-grid&trade; are trademarks of jQWidgets Ltd; the license covers the code only, not the name or logo.

package/dist/GridFooter.svelte

@@ -0,0 +1,164 @@
+<script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
+  import {
+      getGridCellA11yProps,
+      getGridCellDomId,
+      getGridHeaderA11yProps,
+      getGridRootA11yProps,
+      getGridRowA11yProps,
+      type EditorContext,
+      type CellEditorOption,
+      type Column,
+      type Row,
+      type RowData,
+      type TableFeatures,
+    } from "./index";
+  import "./sv-grid-scrollbar";
+  import type { Snippet } from "svelte";
+  import {
+      RenderSnippetConfig,
+      RenderComponentConfig,
+    } from "./render-component";
+  import {
+      buildSparkline,
+      toSparklineValues,
+    } from "./sparkline";
+  import SvGridDropdown from "./SvGridDropdown.svelte";
+  import type {
+      Props,
+      SelectionPoint,
+      SelectionRange,
+      CellEditState,
+      FilterOperator,
+      FilterOption,
+      MenuPosition,
+    } from "./SvGrid.types";
+  import {
+      cfTextStyle,
+      fmtStat,
+      getEditableInputValue,
+      getEditorInputType,
+      toValueArray,
+      getOptionLabel,
+      getOptionColor,
+      colorfulChipStyle,
+      getEditorClass,
+    } from "./SvGrid.helpers";
+  import {
+    } from "./SvGrid.controller.svelte";
+  import type { SvGridController } from "./SvGrid.controller.svelte";
+
+  let { ctrl }: { ctrl: SvGridController<TFeatures, TData> } = $props();
+
+  // View facade: re-bind the controller's reactive members so the markup
+  // (moved verbatim from SvGrid.svelte) stays identical.
+  const paginationEnabled = $derived(ctrl.paginationEnabled);
+  const grid = $derived(ctrl.grid);
+  const paginationState = $derived(ctrl.paginationState);
+  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
+  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
+  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
+  const statusBarStats = $derived(ctrl.statusBarStats);
+  const changePage = $derived(ctrl.changePage);
+  const goToPage = $derived(ctrl.goToPage);
+  const setPageSize = $derived(ctrl.setPageSize);
+</script>
+
+    {#if statusBarEnabled && statusBarStats}
+      {@const s = statusBarStats}
+      <div class="sv-grid-status-bar" role="status" aria-live="polite">
+        {#each statusBarAggregates as agg (agg)}
+          {#if agg === "count"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Count</span>{fmtStat(s.count)}</span
+            >
+          {:else if agg === "numericCount"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "sum"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Sum</span>{fmtStat(s.sum)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "avg"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Avg</span>{fmtStat(s.avg)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "min"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Min</span>{fmtStat(s.min)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "max"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Max</span>{fmtStat(s.max)}</span
+            >
+          {/if}
+        {/each}
+      </div>
+    {/if}
+
+    {#if paginationEnabled}
+      {@const totalRows = allRowsBeforePagination.length}
+      {@const pageSize = paginationState.pageSize}
+      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
+      {@const currentPage = Math.min(paginationState.pageIndex + 1, pageCount)}
+      {@const rangeStart =
+        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
+      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
+      {@const onFirst = currentPage <= 1}
+      {@const onLast = currentPage >= pageCount}
+      <div class="sv-grid-pagination" role="navigation" aria-label="Pagination">
+        <label class="sv-grid-pagination-pagesize">
+          <span>Page Size:</span>
+          <select
+            onchange={(event) =>
+              setPageSize(
+                parseInt((event.currentTarget as HTMLSelectElement).value, 10),
+              )}
+          >
+            <option value="10" selected={pageSize === 10}>10</option>
+            <option value="25" selected={pageSize === 25}>25</option>
+            <option value="50" selected={pageSize === 50}>50</option>
+            <option value="100" selected={pageSize === 100}>100</option>
+          </select>
+        </label>
+        <span class="sv-grid-pagination-range">
+          <strong>{rangeStart.toLocaleString()}</strong> to
+          <strong>{rangeEnd.toLocaleString()}</strong> of
+          <strong>{totalRows.toLocaleString()}</strong>
+        </span>
+        <div class="sv-grid-pagination-nav">
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => goToPage(0)}
+            aria-label="First page">⇤</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => changePage(-1)}
+            aria-label="Previous page">‹</button
+          >
+          <span class="sv-grid-pagination-label">
+            Page <strong>{currentPage.toLocaleString()}</strong> of
+            <strong>{pageCount.toLocaleString()}</strong>
+          </span>
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => changePage(1)}
+            aria-label="Next page">›</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => goToPage(pageCount - 1)}
+            aria-label="Last page">⇥</button
+          >
+        </div>
+      </div>
+    {/if}

package/dist/GridFooter.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+import type { SvGridController } from "./SvGrid.controller.svelte";
+declare function $$render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(): {
+    props: {
+        ctrl: SvGridController<TFeatures, TData>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> {
+    props(): ReturnType<typeof $$render<TFeatures, TData>>['props'];
+    events(): ReturnType<typeof $$render<TFeatures, TData>>['events'];
+    slots(): ReturnType<typeof $$render<TFeatures, TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeatures, TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeatures, TData>['props']>, ReturnType<__sveltets_Render<TFeatures, TData>['events']>, ReturnType<__sveltets_Render<TFeatures, TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TFeatures, TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TFeatures, TData>['exports']>;
+    <TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(internal: unknown, props: ReturnType<__sveltets_Render<TFeatures, TData>['props']> & {}): ReturnType<__sveltets_Render<TFeatures, TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const GridFooter: $$IsomorphicComponent;
+type GridFooter<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = InstanceType<typeof GridFooter<TFeatures, TData>>;
+export default GridFooter;