bo-grid 0.1.0 → 0.2.0

package/dist/grid/Grid.svelte.d.ts

@@ -54,6 +54,45 @@ type $$ComponentProps = {
     /** Show a per-column filter input row under the header. Rows must match every
         non-empty column filter (AND). In-memory mode only. Default false. */
     filterRow?: boolean;
+    /** Message shown when there are no rows. Default 'No matching rows'. */
+    emptyMessage?: string;
+    /** Show a loading overlay over the grid (for consumer-driven async work in
+        in-memory mode; source mode shows skeleton rows automatically). */
+    loading?: boolean;
+    /** Right-click row menu. Return the items for a row; an empty array shows no
+        menu. Each item runs `onSelect` and closes the menu. */
+    rowMenu?: (row: GridRow) => Array<{
+        label: string;
+        onSelect: () => void;
+    }>;
+    /** Master-detail: render an expandable detail panel under a row. Adds a
+        leading expand-toggle column. In-memory mode only (overrides rowHeight). */
+    detail?: Snippet<[{
+        row: GridRow;
+    }]>;
+    /** Height (px) of the expanded detail panel. Default 160. */
+    detailHeight?: number;
+    /** Tree data: return a row's children (undefined/empty = leaf). When set,
+        `rows` are the roots; the grid renders an indented, expandable tree.
+        In-memory mode; filter/sort/group/paginate are not applied to the tree. */
+    getChildren?: (row: GridRow) => GridRow[] | undefined;
+    /** Enable drag-to-reorder rows via a handle in the first column. Called with
+        the from/to indices (into the visible rows) on drop — reorder your own
+        `rows` in here. Flat, unsorted, in-memory lists only. */
+    onRowReorder?: (fromIndex: number, toIndex: number) => void;
+    /** Rows per page. When > 0 (in-memory mode), shows a pager instead of one
+        long scroll; rows still virtualize within a page. Default 0 (off). */
+    pageSize?: number;
+    /** Controlled current page (0-based). Omit for uncontrolled paging. */
+    page?: number;
+    /** Called with the new page index when the pager is used. */
+    onPageChange?: (page: number) => void;
+    /** Called with the new column-key order after a header drag-reorder. */
+    onColumnReorder?: (keys: string[]) => void;
+    /** Called with a column key + new width after a drag-resize. */
+    onColumnResize?: (key: string, width: number) => void;
+    /** Accessible name for the grid (`aria-label` on the `role="grid"` root). */
+    ariaLabel?: string;
     filter?: string;
     groupBy?: string[];
     aggregations?: AggKind[];

package/dist/grid/Pager.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  // Pagination bar for the grid. Presentation-only: the parent owns the page
+  // state and reorders via `onGoto`.
+  let {
+    page,
+    pageCount,
+    total,
+    onGoto,
+  }: {
+    page: number;
+    pageCount: number;
+    total: number;
+    onGoto: (page: number) => void;
+  } = $props();
+</script>
+
+<div class="pager" role="navigation" aria-label="Pagination">
+  <button type="button" class="pg" disabled={page === 0} aria-label="First page" onclick={() => onGoto(0)}>«</button>
+  <button type="button" class="pg" disabled={page === 0} onclick={() => onGoto(page - 1)}>‹ Prev</button>
+  <span class="pageinfo">Page {page + 1} of {pageCount} · {total.toLocaleString()} rows</span>
+  <button type="button" class="pg" disabled={page >= pageCount - 1} onclick={() => onGoto(page + 1)}>Next ›</button>
+  <button type="button" class="pg" disabled={page >= pageCount - 1} aria-label="Last page" onclick={() => onGoto(pageCount - 1)}>»</button>
+</div>
+
+<style>
+  .pager {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: var(--bo-header-bg);
+    border-top: 0.5px solid var(--bo-border);
+  }
+  .pg {
+    padding: 3px 9px;
+    font: inherit;
+    font-family: var(--bo-mono);
+    font-size: 11px;
+    color: var(--bo-text);
+    background: transparent;
+    border: 0.5px solid var(--bo-border);
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .pg:hover:not(:disabled) {
+    background: var(--bo-row-hover);
+    border-color: var(--bo-sel-border);
+  }
+  .pg:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .pageinfo {
+    font-family: var(--bo-mono);
+    font-size: 11px;
+    color: var(--bo-text-dim);
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/dist/grid/Pager.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    page: number;
+    pageCount: number;
+    total: number;
+    onGoto: (page: number) => void;
+};
+declare const Pager: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pager = ReturnType<typeof Pager>;
+export default Pager;

package/dist/grid/RowMenu.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  // Floating right-click row menu. Presentation-only: the parent owns open/close
+  // state and positions it via x/y.
+  let {
+    x,
+    y,
+    items,
+    onClose,
+  }: {
+    x: number;
+    y: number;
+    items: Array<{ label: string; onSelect: () => void }>;
+    onClose: () => void;
+  } = $props();
+</script>
+
+<div
+  class="rowmenu"
+  role="menu"
+  tabindex="-1"
+  style="left:{x}px;top:{y}px;"
+  onpointerdown={(e) => e.stopPropagation()}
+>
+  {#each items as item (item.label)}
+    <button
+      class="rowmenu-item"
+      type="button"
+      role="menuitem"
+      onclick={() => {
+        item.onSelect();
+        onClose();
+      }}
+    >
+      {item.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .rowmenu {
+    position: fixed;
+    z-index: 20;
+    min-width: 150px;
+    padding: 4px;
+    background: var(--bo-header-bg);
+    border: 0.5px solid var(--bo-border);
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+  }
+  .rowmenu-item {
+    display: block;
+    width: 100%;
+    padding: 6px 10px;
+    font: inherit;
+    font-size: 12px;
+    text-align: left;
+    color: var(--bo-text);
+    background: transparent;
+    border: 0;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  .rowmenu-item:hover {
+    background: var(--bo-row-hover);
+  }
+</style>

package/dist/grid/RowMenu.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    x: number;
+    y: number;
+    items: Array<{
+        label: string;
+        onSelect: () => void;
+    }>;
+    onClose: () => void;
+};
+declare const RowMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type RowMenu = ReturnType<typeof RowMenu>;
+export default RowMenu;

package/dist/grid/column.d.ts

@@ -8,22 +8,45 @@ interface ColBase {
     header: string;
     /** Fixed width in px. Ignored when `flex` is set. */
     width?: number;
+    /** Min/max width (px) enforced while drag-resizing this column. */
+    minWidth?: number;
+    maxWidth?: number;
     /** flex-grow weight; column stretches to fill remaining space. */
     flex?: number;
     align?: Align;
+    /** Extra class(es) for this column's data cells — a static string, or a
+        function of the cell value/row for conditional styling. Target via
+        `:global(.bo-grid .c.your-class)`. */
+    cellClass?: string | ((value: unknown, row: GridRow) => string | undefined);
+    /** Extra class(es) for this column's header. Target via `:global`. */
+    headerClass?: string;
     /** Amber flash on value change (drives off the row's flashSeq/flashDir). */
     flash?: boolean;
     /** Set false to disable header-click sorting on this column. */
     sortable?: boolean;
+    /** Custom ascending comparator for this column's values (e.g. enum priority or
+        natural sort). Direction is applied by the grid. In-memory mode only. */
+    compare?: (a: unknown, b: unknown) => number;
     /** When grouping is active, show this aggregate of the column on group headers. */
     groupAgg?: AggKind;
-    /** Pin this column to the left; it stays visible during horizontal scroll. */
-    pinned?: boolean;
+    /** Pin this column so it stays visible during horizontal scroll. `true` /
+        `'left'` pins to the left edge, `'right'` to the right. */
+    pinned?: boolean | 'left' | 'right';
     /** Allow inline editing (double-click or Enter on the focused cell). */
     editable?: boolean;
     /** Validate an edited value before it commits (inline edit or paste). Return
         false to reject and keep the old value. Receives the coerced value. */
     validate?: (value: string | number, row: GridRow) => boolean;
+    /** Editable choices: when set, editing renders a `<select>` of these options
+        instead of a text input (enum/status columns). */
+    options?: string[];
+    /** Set a native `title` tooltip on each cell (the full formatted value) — handy
+        when content truncates. */
+    tooltip?: boolean;
+    /** Custom display formatter, overriding the built-in type formatter. Applies
+        to display, tooltip, copy and (formatted) export. `row` is absent for
+        aggregate cells. */
+    format?: (value: unknown, row?: GridRow) => string;
     /** Set false to disable drag-to-resize on this column (default on). */
     resizable?: boolean;
     /** Parent header label. Consecutive columns sharing a `group` render under a
@@ -78,15 +101,15 @@ export interface GridRow {
     flashDir: 'up' | 'down';
     [field: string]: unknown;
 }
-export declare function formatCell(col: ColumnDef, value: unknown): string;
+export declare function formatCell(col: ColumnDef, value: unknown, row?: GridRow): string;
 export declare function isSortable(col: ColumnDef): boolean;
 export declare function isEditable(col: ColumnDef): boolean;
-export declare function compareRows(a: GridRow, b: GridRow, sort: SortState): number;
+export declare function compareRows(a: GridRow, b: GridRow, sort: SortState, col?: ColumnDef): number;
 /**
  * Multi-key comparison: apply each sort in order, returning the first that
  * separates the rows. An empty list leaves rows in their original order.
  */
-export declare function compareBySorts(a: GridRow, b: GridRow, sorts: readonly SortState[]): number;
+export declare function compareBySorts(a: GridRow, b: GridRow, sorts: readonly SortState[], colOf?: (key: string) => ColumnDef | undefined): number;
 export declare function colStyle(col: ColumnDef): string;
 /** Concrete pixel width for a column (flex columns get a sensible default). */
 export declare function colWidth(col: ColumnDef): number;

package/dist/grid/column.js

@@ -1,5 +1,7 @@
 import { fmtPrice, fmtPercent, fmtVolume, fmtDate } from '../format/format';
-export function formatCell(col, value) {
+export function formatCell(col, value, row) {
+    if (col.format)
+        return col.format(value, row);
     const n = typeof value === 'number' ? value : Number(value);
     switch (col.type) {
         case 'price':
@@ -29,17 +31,17 @@ function rawCompare(a, b) {
         return a - b;
     return String(a ?? '').localeCompare(String(b ?? ''));
 }
-export function compareRows(a, b, sort) {
-    const d = rawCompare(a[sort.key], b[sort.key]);
+export function compareRows(a, b, sort, col) {
+    const d = col?.compare ? col.compare(a[sort.key], b[sort.key]) : rawCompare(a[sort.key], b[sort.key]);
     return sort.dir === 'asc' ? d : -d;
 }
 /**
  * Multi-key comparison: apply each sort in order, returning the first that
  * separates the rows. An empty list leaves rows in their original order.
  */
-export function compareBySorts(a, b, sorts) {
+export function compareBySorts(a, b, sorts, colOf) {
     for (const sort of sorts) {
-        const d = compareRows(a, b, sort);
+        const d = compareRows(a, b, sort, colOf?.(sort.key));
         if (d !== 0)
             return d;
     }

package/dist/grid/export.js

@@ -19,7 +19,7 @@ export function rowsToMatrix(rows, columns, opts = {}) {
     if (opts.header !== false)
         matrix.push(cols.map((c) => c.header));
     for (const row of rows) {
-        matrix.push(cols.map((c) => (opts.formatted ? formatCell(c, row[c.key]) : rawValue(c, row[c.key]))));
+        matrix.push(cols.map((c) => (opts.formatted ? formatCell(c, row[c.key], row) : rawValue(c, row[c.key]))));
     }
     return matrix;
 }

package/dist/grid/grouping.d.ts

@@ -14,6 +14,8 @@ export interface GroupNode {
 export type VisualRow = {
     kind: 'data';
     row: GridRow;
+    depth?: number;
+    hasChildren?: boolean;
 } | {
     kind: 'group';
     group: GroupNode;

package/dist/grid/pin.d.ts

@@ -1,13 +1,18 @@
 import type { ColumnDef } from './column';
+export type PinSide = 'left' | 'right';
 export interface PinInfo {
     pinned: boolean;
-    /** Sticky left offset (px) when pinned. */
+    /** Which edge the column is pinned to, or null when not pinned. */
+    side: PinSide | null;
+    /** Sticky `left` offset (px) when side === 'left'. */
     left: number;
+    /** Sticky `right` offset (px) when side === 'right'. */
+    right: number;
     /** Concrete width (px). */
     width: number;
 }
 export interface PinLayout {
-    /** Columns with pinned ones moved to the front. */
+    /** Columns reordered: left-pinned first, then unpinned, then right-pinned. */
     columns: ColumnDef[];
     info: PinInfo[];
     /** Sum of all column widths (the horizontally-scrollable content width). */
@@ -15,9 +20,8 @@ export interface PinLayout {
     anyPinned: boolean;
 }
 /**
- * Arrange columns for pinning: pinned-left columns move to the front, and each
- * gets a sticky `left` offset (cumulative width of the pinned columns before it).
- * When nothing is pinned, column order is untouched and the grid stays in its
- * default fit-to-width layout.
+ * Arrange columns for pinning: left-pinned columns move to the front, right-
+ * pinned to the end, each with a cumulative sticky offset from its edge. When
+ * nothing is pinned, column order is untouched and the grid stays fit-to-width.
  */
 export declare function arrangePinned(cols: readonly ColumnDef[]): PinLayout;

package/dist/grid/pin.js

@@ -1,24 +1,47 @@
 import { colWidth } from './column';
+function sideOf(c) {
+    if (c.pinned === 'right')
+        return 'right';
+    if (c.pinned)
+        return 'left'; // true | 'left'
+    return null;
+}
 /**
- * Arrange columns for pinning: pinned-left columns move to the front, and each
- * gets a sticky `left` offset (cumulative width of the pinned columns before it).
- * When nothing is pinned, column order is untouched and the grid stays in its
- * default fit-to-width layout.
+ * Arrange columns for pinning: left-pinned columns move to the front, right-
+ * pinned to the end, each with a cumulative sticky offset from its edge. When
+ * nothing is pinned, column order is untouched and the grid stays fit-to-width.
  */
 export function arrangePinned(cols) {
-    const pinned = cols.filter((c) => c.pinned);
-    const anyPinned = pinned.length > 0;
-    const columns = anyPinned ? [...pinned, ...cols.filter((c) => !c.pinned)] : [...cols];
+    const left = cols.filter((c) => sideOf(c) === 'left');
+    const right = cols.filter((c) => sideOf(c) === 'right');
+    const mid = cols.filter((c) => sideOf(c) === null);
+    const columns = left.length || right.length ? [...left, ...mid, ...right] : [...cols];
+    const anyPinned = left.length > 0 || right.length > 0;
+    const widths = columns.map(colWidth);
+    const totalWidth = widths.reduce((a, b) => a + b, 0);
+    const nLeft = left.length;
+    const nRight = right.length;
+    const firstRight = columns.length - nRight;
     const info = [];
-    let left = 0;
-    let totalWidth = 0;
+    let leftOff = 0;
     for (let i = 0; i < columns.length; i++) {
-        const width = colWidth(columns[i]);
-        const isPinned = anyPinned && i < pinned.length;
-        info.push({ pinned: isPinned, left: isPinned ? left : 0, width });
-        if (isPinned)
-            left += width;
-        totalWidth += width;
+        const width = widths[i];
+        if (i < nLeft) {
+            info.push({ pinned: true, side: 'left', left: leftOff, right: 0, width });
+            leftOff += width;
+        }
+        else if (i >= firstRight) {
+            info.push({ pinned: true, side: 'right', left: 0, right: 0, width }); // right filled below
+        }
+        else {
+            info.push({ pinned: false, side: null, left: 0, right: 0, width });
+        }
+    }
+    // Right offsets accumulate from the right edge inward.
+    let rightOff = 0;
+    for (let i = columns.length - 1; i >= firstRight; i--) {
+        info[i].right = rightOff;
+        rightOff += widths[i];
     }
     return { columns, info, totalWidth, anyPinned };
 }

package/dist/grid/sizing.d.ts

@@ -3,8 +3,8 @@ import type { ColumnDef } from './column';
 export declare const MIN_COL_WIDTH = 48;
 /** User width overrides, keyed by column `key` so they survive reorder/pin. */
 export type WidthMap = Record<string, number>;
-/** Clamp + round a proposed drag width to the minimum. */
-export declare function clampWidth(w: number): number;
+/** Clamp + round a proposed drag width to [min, max], never below MIN_COL_WIDTH. */
+export declare function clampWidth(w: number, min?: number, max?: number): number;
 /** Whether a column may be resized, given the grid-level toggle. */
 export declare function isResizable(col: ColumnDef, gridResizable: boolean): boolean;
 /**

package/dist/grid/sizing.js

@@ -1,8 +1,9 @@
 /** Smallest width (px) a column may be dragged to. */
 export const MIN_COL_WIDTH = 48;
-/** Clamp + round a proposed drag width to the minimum. */
-export function clampWidth(w) {
-    return Math.max(MIN_COL_WIDTH, Math.round(w));
+/** Clamp + round a proposed drag width to [min, max], never below MIN_COL_WIDTH. */
+export function clampWidth(w, min = MIN_COL_WIDTH, max = Infinity) {
+    const lo = Math.max(MIN_COL_WIDTH, min);
+    return Math.min(Math.max(Math.round(w), lo), Math.max(lo, max));
 }
 /** Whether a column may be resized, given the grid-level toggle. */
 export function isResizable(col, gridResizable) {

package/dist/grid/tree.d.ts

@@ -0,0 +1,12 @@
+import type { GridRow } from './column';
+import type { VisualRow } from './grouping';
+/** Resolve a row's children (undefined/empty = leaf). */
+export type GetChildren = (row: GridRow) => GridRow[] | undefined;
+/**
+ * Flatten a tree of rows into the visible, depth-tagged data rows the grid
+ * renders. Pre-order DFS: each node is emitted, then — if it has children and
+ * `isExpanded` returns true — its children, one level deeper. Collapsed or leaf
+ * nodes contribute only themselves. Pure: no row values are read, so a realtime
+ * tick never rebuilds this list.
+ */
+export declare function buildTreeRows(roots: readonly GridRow[], getChildren: GetChildren, isExpanded: (row: GridRow) => boolean): VisualRow[];

package/dist/grid/tree.js

@@ -0,0 +1,21 @@
+/**
+ * Flatten a tree of rows into the visible, depth-tagged data rows the grid
+ * renders. Pre-order DFS: each node is emitted, then — if it has children and
+ * `isExpanded` returns true — its children, one level deeper. Collapsed or leaf
+ * nodes contribute only themselves. Pure: no row values are read, so a realtime
+ * tick never rebuilds this list.
+ */
+export function buildTreeRows(roots, getChildren, isExpanded) {
+    const out = [];
+    const walk = (nodes, depth) => {
+        for (const row of nodes) {
+            const children = getChildren(row);
+            const hasChildren = !!children && children.length > 0;
+            out.push({ kind: 'data', row, depth, hasChildren });
+            if (hasChildren && isExpanded(row))
+                walk(children, depth + 1);
+        }
+    };
+    walk(roots, 0);
+    return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bo-grid",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Tiny, fast Svelte 5 data grid: canvas sparklines, batched realtime cell updates, and virtual scrolling. A free, fintech-focused alternative to heavyweight grids.",
@@ -59,6 +59,8 @@
     "size": "vite build && node scripts/size-check.mjs",
     "size:lib": "vite build --config vite.lib.config.ts && node scripts/size-lib.mjs",
     "smoke": "vite build --base=./ --outDir demo-dist && node scripts/smoke.mjs",
+    "ssr": "node scripts/ssr.mjs",
+    "bench": "node scripts/bench.mjs",
     "test": "vitest run",
     "release": "node scripts/release.mjs",
     "release:dry": "node scripts/release.mjs --dry-run"