bo-grid 0.2.0 → 0.8.0

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

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ColumnDef, GridRow, SortState, CellEditEvent } from './column';
 import { type GridTheme } from './theme';
 import { type AggKind } from './aggregate';
+import { type ColumnFilter } from './filtering';
 import type { RowSource } from './source';
 type $$ComponentProps = {
     rows: GridRow[];
@@ -21,8 +22,19 @@ type $$ComponentProps = {
     /** Called with the selected row ids whenever the row-selection set changes. */
     onRowSelectionChange?: (selectedIds: Array<string | number>) => void;
     /** Column keys to hide (controlled). Build your own column-picker UI and
-        drive this prop — the grid stays presentation-only. */
+        drive this prop — the grid stays presentation-only. Composed (union) with
+        columns the user hides at runtime via the column menu. */
     hiddenColumns?: string[];
+    /** Called with all currently-hidden column keys whenever the runtime set
+        changes (column menu hide/show). */
+    onColumnVisibilityChange?: (hidden: string[]) => void;
+    /** Enable a per-column header menu (a ⋮ trigger) with sort, hide and (with
+        `filterMenu`) filter actions. Default false. */
+    columnMenu?: boolean;
+    /** Show a "Columns" button that opens a panel to toggle column visibility
+        (the place to restore columns hidden via the menu). Lazy-loaded. Default
+        false. */
+    columnsPanel?: boolean;
     /** Return extra CSS class(es) for a data row (e.g. to colour by value).
         Style them via `:global(.your-class)` since rows live inside the grid. */
     rowClass?: (row: GridRow) => string | undefined;
@@ -38,6 +50,12 @@ type $$ComponentProps = {
     sort?: SortState[];
     /** Called with the new sort order whenever a header is clicked. */
     onSortChange?: (sort: SortState[]) => void;
+    /** Controlled column filters (keyed by column key). When set, the grid
+        reflects these and reports changes via `onFilterChange` instead of holding
+        its own. Omit for uncontrolled filtering. */
+    columnFilters?: Record<string, ColumnFilter>;
+    /** Called with the full column-filter map whenever a header filter changes. */
+    onFilterChange?: (filters: Record<string, ColumnFilter>) => void;
     /** Show a pinned totals row: each column with a `groupAgg` shows that
         aggregate over all (filtered) rows. In-memory mode only. Default false. */
     footer?: boolean;
@@ -54,6 +72,20 @@ 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;
+    /** Enable a per-column header filter menu (lazy-loaded on first open). Each
+        filterable column shows a funnel; the menu's control matches the column
+        type (text/number/date). Override or disable per column with `col.filter`.
+        Works in source mode too (filters are delegated to the `RowSource`); set
+        filters need in-memory data. Default false. */
+    filterMenu?: boolean;
+    /** Show a built-in quick-filter search box above the grid that matches across
+        all column values (ANDed with the `filter` prop). In-memory mode only.
+        Default false. */
+    quickFilter?: boolean;
+    /** Show an Excel-style fill handle at the selection's bottom-right corner;
+        drag it to copy the selected value(s) across the extended range (editable
+        columns only). In-memory mode only. Default false. */
+    fillHandle?: 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

package/dist/grid/ToolPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  // Floating columns panel: toggle column visibility (and restore hidden ones).
+  // Lazy-loaded by Grid; presentation-only — the parent owns the visibility set.
+  let {
+    columns,
+    hidden,
+    x,
+    y,
+    onToggle,
+    onShowAll,
+    onClose,
+  }: {
+    columns: Array<{ key: string; header: string }>;
+    hidden: string[];
+    x: number;
+    y: number;
+    onToggle: (key: string) => void;
+    onShowAll: () => void;
+    onClose: () => void;
+  } = $props();
+
+  let search = $state('');
+  const shown = $derived(
+    columns.filter((c) => c.header.toLowerCase().includes(search.trim().toLowerCase())),
+  );
+</script>
+
+<div
+  class="bo-toolpanel"
+  role="dialog"
+  tabindex="-1"
+  aria-label="Columns"
+  style="left:{x}px;top:{y}px;"
+  onpointerdown={(e) => e.stopPropagation()}
+  onkeydown={(e) => e.key === 'Escape' && onClose()}
+>
+  <div class="bo-tp-head">
+    <span>Columns</span>
+    <button type="button" class="bo-tp-link" onclick={onShowAll}>Show all</button>
+  </div>
+  <input class="bo-tp-search" type="search" bind:value={search} placeholder="search…" aria-label="Search columns" />
+  <div class="bo-tp-list">
+    {#each shown as col (col.key)}
+      <label class="bo-tp-opt">
+        <input type="checkbox" checked={!hidden.includes(col.key)} onchange={() => onToggle(col.key)} />
+        <span>{col.header}</span>
+      </label>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .bo-toolpanel {
+    position: fixed;
+    z-index: 30;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    width: 200px;
+    padding: 10px;
+    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);
+    font-size: 12px;
+    color: var(--bo-text);
+  }
+  .bo-tp-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    font-weight: 600;
+    color: var(--bo-text-dim);
+  }
+  .bo-tp-link {
+    padding: 0;
+    font: inherit;
+    font-size: 11px;
+    color: var(--bo-up);
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .bo-tp-link:hover {
+    text-decoration: underline;
+  }
+  .bo-tp-search {
+    width: 100%;
+    padding: 5px 7px;
+    font: inherit;
+    color: var(--bo-text);
+    background: var(--bo-bg);
+    border: 0.5px solid var(--bo-border);
+    border-radius: 5px;
+  }
+  .bo-tp-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 220px;
+    overflow-y: auto;
+  }
+  .bo-tp-opt {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 4px 4px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .bo-tp-opt:hover {
+    background: var(--bo-row-hover);
+  }
+  .bo-tp-opt span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    columns: Array<{
+        key: string;
+        header: string;
+    }>;
+    hidden: string[];
+    x: number;
+    y: number;
+    onToggle: (key: string) => void;
+    onShowAll: () => void;
+    onClose: () => void;
+};
+declare const ToolPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolPanel = ReturnType<typeof ToolPanel>;
+export default ToolPanel;

package/dist/grid/column.d.ts

@@ -1,6 +1,7 @@
 import type { Candle } from '../types';
 import { type DateStyle } from '../format/format';
 import type { AggKind } from './aggregate';
+import type { FilterKind } from './filtering';
 export type Align = 'left' | 'right';
 interface ColBase {
     /** Field on the row to read for this column's value. */
@@ -52,6 +53,10 @@ interface ColBase {
     /** Parent header label. Consecutive columns sharing a `group` render under a
         spanning header. Best with fixed-width columns. */
     group?: string;
+    /** Header filter-menu control for this column (requires `filterMenu` on
+        <Grid>). Defaults to the column's type; `'set'` shows a value checklist;
+        `false` disables filtering for this column. */
+    filter?: false | FilterKind;
 }
 export interface CellEditEvent {
     row: GridRow;

package/dist/grid/column.js

@@ -24,7 +24,7 @@ export function isSortable(col) {
     return col.type !== 'sparkline' && col.sortable !== false;
 }
 export function isEditable(col) {
-    return !!col.editable && col.type !== 'sparkline' && col.type !== 'date' && col.type !== 'custom';
+    return !!col.editable && col.type !== 'sparkline' && col.type !== 'custom';
 }
 function rawCompare(a, b) {
     if (typeof a === 'number' && typeof b === 'number')

package/dist/grid/filtering.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Structured per-column filter model (v0.3). Pure and dependency-free so it can
+ * be unit-tested and reused by both the in-memory `view` and a server source.
+ * The header filter-menu UI (lazy-loaded) writes these; `passesFilters` applies
+ * them. Filtering is a snapshot operation, not a per-frame one.
+ */
+import type { ColumnDef, GridRow } from './column';
+export type FilterKind = 'text' | 'number' | 'date' | 'set';
+export type TextOp = 'contains' | 'notContains' | 'equals' | 'starts' | 'ends';
+export type NumberOp = 'eq' | 'ne' | 'lt' | 'le' | 'gt' | 'ge' | 'between';
+export type DateOp = 'before' | 'after' | 'on' | 'between';
+export type ColumnFilter = {
+    kind: 'text';
+    op: TextOp;
+    q: string;
+} | {
+    kind: 'number';
+    op: NumberOp;
+    a: number;
+    b?: number;
+} | {
+    kind: 'date';
+    op: DateOp;
+    a: number;
+    b?: number;
+} | {
+    kind: 'set';
+    excluded: string[];
+};
+/** Pick the default filter control for a column from its type. */
+export declare function defaultFilterKind(col: ColumnDef): FilterKind;
+/** A fresh, inactive filter of the given kind (the menu's starting state). */
+export declare function emptyFilter(kind: FilterKind): ColumnFilter;
+/** Whether a filter actually constrains anything (else it's a no-op). */
+export declare function isFilterActive(f: ColumnFilter | undefined | null): boolean;
+/** Does one cell value satisfy one filter? An inactive filter passes everything. */
+export declare function matchesFilter(value: unknown, f: ColumnFilter): boolean;
+/** AND across every active per-column filter. */
+export declare function passesFilters(row: GridRow, filters: Record<string, ColumnFilter>): boolean;
+/** Sorted unique string values for a column — the set-filter checklist. */
+export declare function distinctValues(rows: readonly GridRow[], key: string): string[];

package/dist/grid/filtering.js

@@ -0,0 +1,107 @@
+import { isNumeric } from './column';
+const DAY = 86_400_000;
+/** Pick the default filter control for a column from its type. */
+export function defaultFilterKind(col) {
+    if (col.type === 'date')
+        return 'date';
+    if (isNumeric(col))
+        return 'number';
+    return 'text';
+}
+/** A fresh, inactive filter of the given kind (the menu's starting state). */
+export function emptyFilter(kind) {
+    switch (kind) {
+        case 'number':
+            return { kind: 'number', op: 'eq', a: NaN };
+        case 'date':
+            return { kind: 'date', op: 'on', a: NaN };
+        case 'set':
+            return { kind: 'set', excluded: [] };
+        default:
+            return { kind: 'text', op: 'contains', q: '' };
+    }
+}
+/** Whether a filter actually constrains anything (else it's a no-op). */
+export function isFilterActive(f) {
+    if (!f)
+        return false;
+    switch (f.kind) {
+        case 'text':
+            return f.q.trim().length > 0;
+        case 'number':
+        case 'date':
+            return Number.isFinite(f.a) && (f.op !== 'between' || Number.isFinite(f.b));
+        case 'set':
+            return f.excluded.length > 0;
+    }
+}
+/** Does one cell value satisfy one filter? An inactive filter passes everything. */
+export function matchesFilter(value, f) {
+    if (!isFilterActive(f))
+        return true;
+    switch (f.kind) {
+        case 'text': {
+            const hay = String(value ?? '').toLowerCase();
+            const q = f.q.trim().toLowerCase();
+            if (f.op === 'contains')
+                return hay.includes(q);
+            if (f.op === 'notContains')
+                return !hay.includes(q);
+            if (f.op === 'equals')
+                return hay === q;
+            if (f.op === 'starts')
+                return hay.startsWith(q);
+            return hay.endsWith(q); // 'ends'
+        }
+        case 'set':
+            return !f.excluded.includes(String(value ?? ''));
+        case 'number':
+        case 'date': {
+            // Empty/blank cells aren't numbers (Number(null)/Number('') coerce to 0),
+            // so exclude them explicitly while a number/date filter is active.
+            if (value === null || value === undefined || value === '')
+                return false;
+            const n = Number(value);
+            if (!Number.isFinite(n))
+                return false; // non-numeric is excluded while active
+            if (f.kind === 'date' && f.op === 'on') {
+                return Math.floor(n / DAY) === Math.floor(f.a / DAY); // same (UTC) day
+            }
+            switch (f.op) {
+                case 'eq':
+                    return n === f.a;
+                case 'ne':
+                    return n !== f.a;
+                case 'lt':
+                case 'before':
+                    return n < f.a;
+                case 'le':
+                    return n <= f.a;
+                case 'gt':
+                case 'after':
+                    return n > f.a;
+                case 'ge':
+                    return n >= f.a;
+                case 'between':
+                    return n >= f.a && n <= (f.b ?? Infinity);
+            }
+        }
+    }
+    return true; // unreachable fallback
+}
+/** AND across every active per-column filter. */
+export function passesFilters(row, filters) {
+    for (const key in filters) {
+        const f = filters[key];
+        if (isFilterActive(f) && !matchesFilter(row[key], f))
+            return false;
+    }
+    return true;
+}
+/** Sorted unique string values for a column — the set-filter checklist. */
+export function distinctValues(rows, key) {
+    const seen = new Set();
+    for (const row of rows)
+        seen.add(String(row[key] ?? ''));
+    return [...seen].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }));
+}

package/dist/grid/source.d.ts

@@ -1,4 +1,5 @@
 import type { GridRow, SortState } from './column';
+import { type ColumnFilter } from './filtering';
 export interface RowRange {
     /** First row index (inclusive). */
     start: number;
@@ -13,6 +14,8 @@ export interface RowSourceParams {
     /** Full sort order (primary first) for multi-column sort. May be empty. */
     sorts?: SortState[];
     filter: string;
+    /** Structured per-column filters (header filter menu), keyed by column key. */
+    columnFilters?: Record<string, ColumnFilter>;
 }
 export interface RowSourceResult {
     /** Rows for the requested range, in order. */

package/dist/grid/source.js

@@ -1,4 +1,5 @@
 import { compareBySorts } from './column';
+import { passesFilters } from './filtering';
 /**
  * Adapt an in-memory array to the RowSource interface — applies sort/filter and
  * slices the requested range. Useful as a real client-side adapter and for
@@ -12,6 +13,10 @@ export function createArraySource(all, opts = {}) {
         if (f && filterKeys && filterKeys.length > 0) {
             rows = rows.filter((r) => filterKeys.some((k) => String(r[k] ?? '').toLowerCase().includes(f)));
         }
+        const cf = params.columnFilters;
+        if (cf && Object.keys(cf).length > 0) {
+            rows = rows.filter((r) => passesFilters(r, cf));
+        }
         const sorts = params.sorts?.length ? params.sorts : params.sort ? [params.sort] : [];
         if (sorts.length > 0) {
             rows = [...rows].sort((a, b) => compareBySorts(a, b, sorts));

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

@@ -1,5 +1,6 @@
 import type { GridRow, SortState } from './column';
 import type { RowRange, RowSource } from './source';
+import type { ColumnFilter } from './filtering';
 /**
  * Drives a RowSource for the grid: fetches the visible window, caches rows by
  * index, tracks the total, and guards against stale responses. Cache is keyed by
@@ -17,5 +18,5 @@ export declare class RowSourceController {
     constructor(source: RowSource);
     rowAt(index: number): GridRow | null;
     private keyOf;
-    fetch(range: RowRange, sorts: SortState[], filter: string): Promise<void>;
+    fetch(range: RowRange, sorts: SortState[], filter: string, columnFilters?: Record<string, ColumnFilter>): Promise<void>;
 }

package/dist/grid/source.svelte.js

@@ -18,11 +18,12 @@ export class RowSourceController {
     rowAt(index) {
         return this.cache.get(index) ?? null;
     }
-    keyOf(sorts, filter) {
-        return `${sorts.map((s) => `${s.key}:${s.dir}`).join(',')}|${filter}`;
+    keyOf(sorts, filter, columnFilters) {
+        const cf = columnFilters ? JSON.stringify(columnFilters) : '';
+        return `${sorts.map((s) => `${s.key}:${s.dir}`).join(',')}|${filter}|${cf}`;
     }
-    async fetch(range, sorts, filter) {
-        const key = this.keyOf(sorts, filter);
+    async fetch(range, sorts, filter, columnFilters) {
+        const key = this.keyOf(sorts, filter, columnFilters);
         if (key !== this.key) {
             this.key = key;
             this.cache.clear();
@@ -40,7 +41,7 @@ export class RowSourceController {
             return;
         const id = ++this.reqId;
         this.loading = true;
-        const res = await this.source.getRows({ range, sort: sorts[0] ?? null, sorts, filter });
+        const res = await this.source.getRows({ range, sort: sorts[0] ?? null, sorts, filter, columnFilters });
         if (id !== this.reqId)
             return; // a newer request superseded this one
         this.total = res.total;

package/dist/grid/theme.d.ts

@@ -20,6 +20,16 @@ export interface GridTheme {
     headerH?: string;
     mono?: string;
     sans?: string;
+    /** Native-control color scheme: themes checkboxes, date pickers, number
+        spinners, search-clear buttons and scrollbars. Defaults to dark. */
+    scheme?: 'light' | 'dark';
+    /** Outer corner radius (e.g. '8px', '0', '14px'). Default 8px. */
+    radius?: string;
+    /** Cell/row font size (e.g. '13px', '12px'). Default 13px. */
+    fontSize?: string;
+    /** Horizontal cell padding — the main density lever (e.g. '8px', '12px').
+        Pair with `rowHeight` for a fully compact or roomy look. Default 8px. */
+    cellPad?: string;
 }
 /** Serialize a theme to a CSS `--bo-grid-*: …;` declaration string. */
 export declare function themeVars(theme: GridTheme): string;

package/dist/grid/theme.js

@@ -15,6 +15,10 @@ const VARS = {
     headerH: '--bo-grid-header-h',
     mono: '--bo-grid-mono',
     sans: '--bo-grid-sans',
+    scheme: '--bo-grid-scheme',
+    radius: '--bo-grid-radius',
+    fontSize: '--bo-grid-font-size',
+    cellPad: '--bo-grid-cell-pad',
 };
 /** Serialize a theme to a CSS `--bo-grid-*: …;` declaration string. */
 export function themeVars(theme) {
@@ -40,6 +44,7 @@ export const darkTheme = {
     amber: '#f59e0b',
     selFill: 'rgba(99,102,241,0.16)',
     selBorder: '#6366f1',
+    scheme: 'dark',
 };
 // A deliberate light palette (not an inverted dark one): near-white surfaces,
 // stronger green/red for contrast on light, subtle borders.
@@ -57,4 +62,5 @@ export const lightTheme = {
     amber: '#d97706',
     selFill: 'rgba(99,102,241,0.12)',
     selBorder: '#6366f1',
+    scheme: 'light',
 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Grid } from './grid/Grid.svelte';
 export { default as Sparkline } from './sparkline/Sparkline.svelte';
 export type { ColumnDef, Align, GridRow, SortDir, SortState, CellEditEvent } from './grid/column';
 export type { AggKind, AggResult } from './grid/aggregate';
+export type { ColumnFilter, FilterKind, TextOp, NumberOp, DateOp } from './grid/filtering';
 export { fmtPrice, fmtPercent, fmtVolume, fmtDate } from './format/format';
 export type { DateStyle } from './format/format';
 export { aggregate } from './grid/aggregate';

package/dist/sparkline/Sparkline.svelte

@@ -16,7 +16,13 @@
   // sparklines run this, so the realtime feed never repaints off-screen charts.
   $effect(() => {
     const ctx = setupHiDpiCanvas(canvas, width, height);
-    drawCandles(ctx, candles, width, height);
+    // Pull the grid's up/down colors so candles follow the active theme
+    // (inherited --bo-up/--bo-down; falls back to the built-in defaults).
+    const cs = getComputedStyle(canvas);
+    drawCandles(ctx, candles, width, height, {
+      up: cs.getPropertyValue('--bo-up').trim() || undefined,
+      down: cs.getPropertyValue('--bo-down').trim() || undefined,
+    });
   });
 
   const label = $derived(summarize(candles));
@@ -66,7 +72,7 @@
     font-family: var(--bo-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
     font-size: 10px;
     color: var(--bo-text, #e5e5e5);
-    background: #000;
+    background: var(--bo-header-bg, #0f0f0f);
     border: 0.5px solid var(--bo-border, rgba(255, 255, 255, 0.12));
     border-radius: 4px;
     pointer-events: none;

package/dist/sparkline/sparkline-render.d.ts

@@ -9,7 +9,10 @@ export declare function setupHiDpiCanvas(canvas: HTMLCanvasElement, cssW: number
  * Draw compact candlesticks. Body shows open→close, wick shows low→high.
  * Color by per-candle direction. Canvas (not SVG) so 100+ of these stay cheap.
  */
-export declare function drawCandles(ctx: CanvasRenderingContext2D, candles: Candle[], w: number, h: number): void;
+export declare function drawCandles(ctx: CanvasRenderingContext2D, candles: Candle[], w: number, h: number, colors?: {
+    up?: string;
+    down?: string;
+}): void;
 /** Screen-reader text — canvas alone is invisible to AT, so we narrate trend. */
 export declare function summarize(candles: Candle[]): string;
 /** Which candle index sits under an x offset (for hover tooltips). */

package/dist/sparkline/sparkline-render.js

@@ -37,10 +37,12 @@ function yOf(price, ext, h, pad) {
  * Draw compact candlesticks. Body shows open→close, wick shows low→high.
  * Color by per-candle direction. Canvas (not SVG) so 100+ of these stay cheap.
  */
-export function drawCandles(ctx, candles, w, h) {
+export function drawCandles(ctx, candles, w, h, colors = {}) {
     ctx.clearRect(0, 0, w, h);
     if (candles.length === 0)
         return;
+    const upColor = colors.up || UP;
+    const downColor = colors.down || DOWN;
     const ext = priceExtent(candles);
     const pad = 2;
     const n = candles.length;
@@ -50,8 +52,8 @@ export function drawCandles(ctx, candles, w, h) {
         const c = candles[i];
         const cx = i * slot + slot / 2;
         const up = c.close >= c.open;
-        ctx.strokeStyle = up ? UP : DOWN;
-        ctx.fillStyle = up ? UP : DOWN;
+        ctx.strokeStyle = up ? upColor : downColor;
+        ctx.fillStyle = up ? upColor : downColor;
         // wick
         ctx.beginPath();
         ctx.moveTo(Math.round(cx) + 0.5, yOf(c.high, ext, h, pad));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bo-grid",
-  "version": "0.2.0",
+  "version": "0.8.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.",