@svgrid/grid 1.2.33 → 2.0.0

package/README.md

@@ -17,7 +17,7 @@
 <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/demos">280+ Demos</a> ·
   <a href="https://svgrid.com/pricing">Pricing</a> ·
   <a href="https://svgrid.com/roadmap">Roadmap</a>
 </p>
@@ -69,9 +69,10 @@ That is a real, accessible grid. Sorting, filtering, virtualization, cell select
 - **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.
+- **Views** - native Kanban board mode (drag cards between lanes), 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, keyboard-accessible column sizing, zebra rows.
 - **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
+- **UI components** - a Svelte 5 component suite ships in the package (inputs, selection, date/time, overlays, layout, feedback) - standalone or as grid cell editors.
 - **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.
@@ -115,7 +116,7 @@ Compatibility aliases are provided for the framework-neutral names: `createGrid`
 
 ## 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.
+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 280+ demo sources as context - not hallucinated methods.
 
 ## Enterprise
 
@@ -124,7 +125,7 @@ The MIT core is free for any use, including commercial. The optional [`@svgrid/e
 ## Documentation
 
 - [Getting started](https://svgrid.com/docs) - end-to-end walkthrough.
-- [150+ live demos](https://svgrid.com/demos) - copy-paste recipes for every feature.
+- [280+ 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.
 

package/dist/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}

package/dist/GridFooter.svelte

@@ -1,178 +1,178 @@
-<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,
-    pager = true,
-    showStatus = true,
-    top = false,
-    pageSizeOptions,
-  }: {
-    ctrl: SvGridController<TFeatures, TData>;
-    /** Render the pagination controls in this instance. */
-    pager?: boolean;
-    /** Render the status bar in this instance. */
-    showStatus?: boolean;
-    /** This is a top-positioned footer (styling only). */
-    top?: boolean;
-    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
-    pageSizeOptions?: number[];
-  } = $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 showStatus && 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 pager && paginationEnabled}
-      {@const totalRows = ctrl.paginationTotalRows}
-      {@const pageSize = ctrl.paginationPageSize}
-      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
-      {@const currentPage = Math.min(ctrl.paginationPageIndex + 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}
-      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
-      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
-        <div class="sv-grid-pagination-pagesize">
-          <span>Page Size:</span>
-          <div class="sv-grid-pagination-pagesize-dd">
-            <SvGridDropdown
-              options={sizes.map((n) => ({ value: n, label: String(n) }))}
-              value={pageSize}
-              autoOpen={false}
-              onChange={(v) => setPageSize(Number(v))}
-            />
-          </div>
-        </div>
-        <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}
+<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,
+    pager = true,
+    showStatus = true,
+    top = false,
+    pageSizeOptions,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    /** Render the pagination controls in this instance. */
+    pager?: boolean;
+    /** Render the status bar in this instance. */
+    showStatus?: boolean;
+    /** This is a top-positioned footer (styling only). */
+    top?: boolean;
+    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+  } = $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 showStatus && 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 pager && paginationEnabled}
+      {@const totalRows = ctrl.paginationTotalRows}
+      {@const pageSize = ctrl.paginationPageSize}
+      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
+      {@const currentPage = Math.min(ctrl.paginationPageIndex + 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}
+      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
+      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
+        <div class="sv-grid-pagination-pagesize">
+          <span>Page Size:</span>
+          <div class="sv-grid-pagination-pagesize-dd">
+            <SvGridDropdown
+              options={sizes.map((n) => ({ value: n, label: String(n) }))}
+              value={pageSize}
+              autoOpen={false}
+              onChange={(v) => setPageSize(Number(v))}
+            />
+          </div>
+        </div>
+        <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}