bo-grid 0.25.0 → 1.0.0

package/dist/grid/Pager.svelte

@@ -6,12 +6,20 @@
     pageCount,
     total,
     onGoto,
+    pageSize,
+    pageSizeOptions,
+    onPageSize,
   }: {
     page: number;
     pageCount: number;
     total: number;
     onGoto: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSize?: (size: number) => void;
   } = $props();
+
+  const showSizes = $derived(!!pageSizeOptions && pageSizeOptions.length > 0);
 </script>
 
 <div class="pager" role="navigation" aria-label="Pagination">
@@ -20,6 +28,20 @@
   <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>
+  {#if showSizes}
+    <label class="pgsize">
+      Rows
+      <select
+        aria-label="Rows per page"
+        value={pageSize}
+        onchange={(e) => onPageSize?.(Number((e.currentTarget as HTMLSelectElement).value))}
+      >
+        {#each pageSizeOptions as opt (opt)}
+          <option value={opt}>{opt}</option>
+        {/each}
+      </select>
+    </label>
+  {/if}
 </div>
 
 <style>
@@ -60,4 +82,27 @@
     color: var(--bo-text-dim);
     font-variant-numeric: tabular-nums;
   }
+  .pgsize {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    margin-left: auto;
+    font-family: var(--bo-mono);
+    font-size: 11px;
+    color: var(--bo-text-dim);
+  }
+  .pgsize select {
+    font: inherit;
+    font-size: 11px;
+    color: var(--bo-text);
+    background: transparent;
+    border: 0.5px solid var(--bo-border);
+    border-radius: 6px;
+    padding: 2px 4px;
+    cursor: pointer;
+  }
+  .pgsize select:focus-visible {
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: 1px;
+  }
 </style>

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

@@ -3,6 +3,9 @@ type $$ComponentProps = {
     pageCount: number;
     total: number;
     onGoto: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSize?: (size: number) => void;
 };
 declare const Pager: import("svelte").Component<$$ComponentProps, {}, "">;
 type Pager = ReturnType<typeof Pager>;

package/dist/grid/column.d.ts

@@ -28,6 +28,13 @@ interface ColBase {
     cellClass?: string | ((value: unknown, row: GridRow) => string | undefined);
     /** Extra class(es) for this column's header. Target via `:global`. */
     headerClass?: string;
+    /** Show a styled tooltip on the column header (the same themed bubble as cell
+        `tooltip`) — describe what the column means, units, caveats. Hovering
+        anywhere on the header reveals it. */
+    headerTooltip?: string;
+    /** Render a small ⓘ info icon in the header as a visible cue that a
+        `headerTooltip` is available. Ignored without `headerTooltip`. */
+    headerInfo?: boolean;
     /** Amber flash on value change (drives off the row's flashSeq/flashDir). */
     flash?: boolean;
     /** Set false to disable header-click sorting on this column. */
@@ -48,13 +55,26 @@ interface ColBase {
     /** 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;
+    /** Show a styled floating tooltip on each cell (themed, instant — replaces the
+        native `title`). `true` shows the full formatted value (handy when content
+        truncates); a function returns custom text per value/row (any column type,
+        including `custom`). Return '' to suppress for a given cell. */
+    tooltip?: boolean | ((value: unknown, row: GridRow) => string);
+    /** Let long content wrap to multiple lines instead of truncating with an
+        ellipsis. Pair with a taller `rowHeight`. Default false (single-line +
+        ellipsis). */
+    wrap?: 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;
+    /** JS cell renderer — the framework-agnostic alternative to the `cell`
+        snippet, for React/Vue/vanilla (and the `<bo-grid>` web component). Return
+        an `HTMLElement`/`Node` (safe — appended as-is) or an HTML **string**
+        (inserted as innerHTML — YOU must sanitize any untrusted data; prefer
+        returning a Node for that). Overrides the cell's display only — sort,
+        filter, tooltip, copy and export still use the value/`format`. */
+    render?: (ctx: CellRenderContext) => string | Node | null | undefined;
     /** 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
@@ -117,6 +137,12 @@ export interface DataBarGeom {
     /** The value is negative (use the bar's `negative` colour). */
     negative: boolean;
 }
+/** Context passed to a column's JS `render` hook. */
+export interface CellRenderContext {
+    value: unknown;
+    row: GridRow;
+    column: ColumnDef;
+}
 export interface CellEditEvent {
     row: GridRow;
     column: ColumnDef;
@@ -204,6 +230,13 @@ export interface GridRow {
  */
 export declare function cellValue(col: ColumnDef, row: GridRow): unknown;
 export declare function formatCell(col: ColumnDef, value: unknown, row?: GridRow): string;
+/**
+ * Resolve a cell's tooltip text for the styled floating tooltip. A boolean
+ * `tooltip` shows the formatted value (skipped for sparkline/custom — no text
+ * form); a function returns custom text for any column type. Empty/whitespace →
+ * no tooltip. Pure; unit-tested.
+ */
+export declare function tooltipText(col: ColumnDef, value: unknown, row: GridRow): string | undefined;
 export declare function isSortable(col: ColumnDef): boolean;
 export declare function isEditable(col: ColumnDef): boolean;
 export declare function compareRows(a: GridRow, b: GridRow, sort: SortState, col?: ColumnDef): number;

package/dist/grid/column.js

@@ -39,6 +39,23 @@ export function formatCell(col, value, row) {
             return value == null ? '' : String(value);
     }
 }
+/**
+ * Resolve a cell's tooltip text for the styled floating tooltip. A boolean
+ * `tooltip` shows the formatted value (skipped for sparkline/custom — no text
+ * form); a function returns custom text for any column type. Empty/whitespace →
+ * no tooltip. Pure; unit-tested.
+ */
+export function tooltipText(col, value, row) {
+    const t = col.tooltip;
+    if (!t)
+        return undefined;
+    const text = typeof t === 'function'
+        ? t(value, row)
+        : col.type === 'sparkline' || col.type === 'custom'
+            ? ''
+            : formatCell(col, value, row);
+    return text && text.trim() ? text : undefined;
+}
 export function isSortable(col) {
     return col.type !== 'sparkline' && col.sortable !== false;
 }

package/dist/index.d.ts

@@ -1,7 +1,12 @@
+import type { ComponentProps } from 'svelte';
+import type GridComponent from './grid/Grid.svelte';
 export { default as Grid } from './grid/Grid.svelte';
 export { default as Sparkline } from './sparkline/Sparkline.svelte';
+/** Every `<Grid>` prop, as one object type. Use it to type a config object —
+    especially the `<bo-grid>` web component's `config` (see `bo-grid/element`). */
+export type GridProps = ComponentProps<typeof GridComponent>;
 export type { LazyGroup } from './grid/grouping';
-export type { ColumnDef, Align, GridRow, SortDir, SortState, CellEditEvent, BadgeTone, DataBarConfig, IconRule, ColorScaleConfig, } from './grid/column';
+export type { ColumnDef, Align, GridRow, SortDir, SortState, CellEditEvent, CellRenderContext, BadgeTone, DataBarConfig, IconRule, ColorScaleConfig, } 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, fmtCurrency, relativeTime } from './format/format';

package/dist/index.js

@@ -4,7 +4,6 @@
 // This surface is intentionally small — every export is a compatibility promise.
 // Internal helpers (layout, sorting, grouping, selection internals) are NOT
 // exported; they can change freely between versions.
-// Components
 export { default as Grid } from './grid/Grid.svelte';
 export { default as Sparkline } from './sparkline/Sparkline.svelte';
 // Value formatters (handy when building custom cell content)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bo-grid",
-  "version": "0.25.0",
+  "version": "1.0.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.",
@@ -39,6 +39,7 @@
       "default": "./dist/charts/index.js"
     },
     "./element": {
+      "types": "./dist/bo-grid.element.d.ts",
       "default": "./dist/bo-grid.element.js"
     },
     "./package.json": "./package.json"
@@ -61,7 +62,7 @@
     "demo:build": "vite build",
     "pages:build": "vite build --base=/bo-grid/ --outDir demo-dist",
     "preview": "vite preview",
-    "package": "svelte-package -i src/lib -o dist && node scripts/clean-dist.mjs && pnpm run build:wc",
+    "package": "svelte-package -i src/lib -o dist && node scripts/clean-dist.mjs && pnpm run build:wc && node scripts/emit-element-dts.mjs",
     "build:wc": "vite build --config vite.wc.config.ts",
     "prepublishOnly": "pnpm run package",
     "check": "svelte-check --tsconfig ./tsconfig.json",