@xeplr/ui-table 1.0.1 → 1.0.3

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@xeplr/ui-table",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Controlled TanStack Table wrapper with auto-detected column types and smart filters",
   "type": "module",
   "main": "src/index.js",
+  "scripts": {
+    "test": "for f in test/*.test.js; do node \"$f\" || exit 1; done"
+  },
   "files": [
     "src/"
   ],

package/src/CellZoom.jsx

@@ -0,0 +1,77 @@
+import React, { useRef, useEffect, useLayoutEffect } from 'react';
+import { flexRender } from '@tanstack/react-table';
+
+/**
+ * A cell, popped out and enlarged.
+ *
+ * The problem it solves is plain readability: report grids run small type so
+ * more fits on a page, and a long value in a narrow column wraps to three
+ * cramped lines. Double-clicking gives you that one value at a size you can
+ * actually read, without changing the table's font for everyone or making the
+ * column wider.
+ *
+ * It renders the column's OWN cell renderer, not the raw value — so a currency
+ * cell zooms as ₹36,260.80 and a badge zooms as a badge. Seeing something
+ * different up close from what was on the page would defeat the point.
+ *
+ * Deliberately not a modal: it doesn't trap focus or block the page, because
+ * it's a reading aid, not a task. Escape, a click anywhere else, or scrolling
+ * the table all dismiss it.
+ */
+export default function CellZoom({ cell, anchorRect, font, onClose }) {
+  var boxRef = useRef(null);
+
+  // Position after render, once the box's real size is known — a value's
+  // width isn't predictable before it's laid out at the larger size.
+  useLayoutEffect(function() {
+    var box = boxRef.current;
+    if (!box || !anchorRect) return;
+    var margin = 8;
+    var rect = box.getBoundingClientRect();
+
+    // Grows out of the cell it came from, so the eye doesn't lose its place.
+    var left = anchorRect.left;
+    var top = anchorRect.top;
+    if (left + rect.width > window.innerWidth - margin) left = window.innerWidth - rect.width - margin;
+    if (top + rect.height > window.innerHeight - margin) top = anchorRect.bottom - rect.height;
+    box.style.left = Math.max(margin, left) + 'px';
+    box.style.top = Math.max(margin, top) + 'px';
+    box.focus();
+  }, [anchorRect]);
+
+  useEffect(function() {
+    function onKey(e) { if (e.key === 'Escape') onClose(); }
+    function onPointer(e) { if (boxRef.current && !boxRef.current.contains(e.target)) onClose(); }
+    // Scroll closes rather than re-anchoring: a box chasing its cell across a
+    // scrolling table is harder to read than one that simply gets out of the way.
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onPointer);
+    window.addEventListener('scroll', onClose, true);
+    return function() {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('mousedown', onPointer);
+      window.removeEventListener('scroll', onClose, true);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={boxRef}
+      className="xeplr-table-cell-zoom"
+      role="dialog"
+      aria-label="Enlarged cell"
+      tabIndex={-1}
+      style={{
+        minWidth: anchorRect ? Math.min(anchorRect.width, 320) + 'px' : undefined,
+        // Everything inside is sized in em, so this one value sets the scale.
+        fontSize: font ? font.fontSize : undefined,
+        fontFamily: font ? font.fontFamily : undefined
+      }}
+    >
+      <div className="xeplr-table-cell-zoom-label">{String(cell.column.columnDef.header || '')}</div>
+      <div className="xeplr-table-cell-zoom-value">
+        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+      </div>
+    </div>
+  );
+}

package/src/XeplrTable.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';
 import { flexRender } from '@tanstack/react-table';
 import useTableController from './useTableController.js';
 import useActionsController from './useActionsController.js';
+import useColumnWidths from './useColumnWidths.js';
+import CellZoom from './CellZoom.jsx';
 import { TYPES } from './detectTypes.js';
 import StringFilter from './filters/StringFilter.jsx';
 import NumberFilter from './filters/NumberFilter.jsx';
@@ -37,8 +39,91 @@ var CHILD_DISPLAY = { POPUP: 'popup', INNER: 'inner' };
  * @param {string}         [props.childDisplay]    - 'popup' (default) | 'inner'
  * @param {number}         [props.pageSize]        - Default: 20
  * @param {boolean}        [props.enableSorting]    - Default: true
+ * @param {Array}          [props.sorting]          - Controlled sort state, e.g. [{ id, desc }].
+ *   Supplying it hands the ORDER to the host: the table stops sorting the
+ *   rows itself and reports header clicks through onSortingChange instead.
+ *   Needed wherever the rows are already ordered for a reason the view layer
+ *   cannot see — a grouped report's subtotals belong with their group, and a
+ *   running total is a statement about the order it was computed in.
+ * @param {Function}       [props.onSortingChange]  - Called with the next sort state.
  * @param {boolean}        [props.enableFiltering]  - Default: true
  * @param {boolean}        [props.enablePagination] - Default: true
+ * @param {Function}       [props.rowClassName]     - (row) => string|falsy. Extra
+ *   CSS class per row, so a host can mark rows that mean something to IT.
+ * @param {Function}       [props.toolbarActions]   - (ctx) => ReactNode.
+ *   Replaces the toolbar's trailing Clear Filters/Clear Sort buttons. The
+ *   handlers are supplied; the presentation is entirely the consumer's, so no
+ *   host-specific styling lives in here.
+ * @param {Function}       [props.toolbarLeading]   - (ctx) => ReactNode. The
+ *   toolbar's LEADING area — the run of empty space before the trailing
+ *   actions. The built-in Add/Delete/Commit buttons live there when editing is
+ *   enabled, so on a read-only table it is simply blank; this hands that space
+ *   to the host for a caption, a count, a status line, whatever it has.
+ *
+ *   Both slots receive the same context: { rowCount, totalCount, selectedCount,
+ *   resetFilters, resetSorting, enableFiltering }. rowCount is what's left
+ *   after filtering, totalCount is everything — a table can say "showing 12 of
+ *   400" without the host recounting rows it already handed over.
+ * @param {string}         [props.columnSizing]     - undefined (default) fills
+ *   the container, as a table always has. 'content' instead sizes each column
+ *   to its text at the current font, and leaves any width it doesn't need
+ *   blank rather than stretching to fill. See columnWidths.js for the rule.
+ * @param {Function}       [props.columnText]       - (row, column) => string.
+ *   Only used by 'content' sizing, and only worth passing if cells are
+ *   formatted: measuring 36260.8 when the screen shows ₹36,260.80 sizes the
+ *   column too narrow. Defaults to the raw value.
+ * @param {number}         [props.sizingSampleRows] - How many rows content
+ *   sizing measures. Default 200 — enough to be right on normal data, cheap
+ *   enough to be invisible. Raise it (or pass Infinity) when precision on a
+ *   wide dataset is worth the scan; the cost is linear in rows × columns and
+ *   is paid once per dataset, not per render or per page.
+ * @param {number}         [props.minColumnWidth]   - Default 40
+ * @param {number}         [props.maxColumnWidth]   - Default 420. Stops one
+ *   long-text column demanding the whole table.
+ * @param {*}              [props.sizingKey]        - Changing this re-measures.
+ *   Nothing can observe a font change, so a host that restyles the table
+ *   (a compact theme, a different type scale) signals it here.
+ * @param {object}         [props.columnWidths]     - { columnIndex: percent }.
+ *   Explicit widths for individual columns, as a PERCENTAGE of the width the
+ *   columns have to divide (so two columns at 50 fill the table exactly, with
+ *   or without a checkbox column in front of them). Those columns are held at
+ *   that share, never measured, and never squeezed; the rest divide whatever
+ *   is left. Percent rather than px so a pin keeps its proportion when the
+ *   container resizes — a widget on a dashboard is resized constantly. Keyed by
+ *   INDEX because a generated column's key is data — a pivot's `Q3 · Sum`
+ *   becomes `Q4 · Sum` on the next refresh, and a width keyed to it would be
+ *   lost by a plain reload. Position is what the width actually belongs to.
+ *   Only used by 'content' sizing.
+ * @param {Function}       [props.columnClassName]  - (column, index) => string|falsy.
+ *   Extra CSS class for one column, applied to its header AND every body cell,
+ *   so a marked column reads as one thing down the table rather than stopping
+ *   at the label. `index` is the same leaf index columnWidths uses, so a host
+ *   that pins column 3 marks column 3 without a second way of naming it.
+ * @param {Function}       [props.onHeaderClick]    - (columnKey, isGroupHeader)
+ *   => void. TAKES OVER the header click, replacing sorting rather than sharing
+ *   with it: a host that wants the click for selecting a column would otherwise
+ *   get a sort it never asked for on every selection. Hosts that use this are
+ *   expected to offer sorting elsewhere.
+ * @param {Function}       [props.onColumnSizing]   - Receives the full sizing
+ *   record — per column: natural width, floor, assigned width, and WHY. For
+ *   hosts that need to explain a width back to a user.
+ * @param {boolean}        [props.cellZoom]         - Double-click a cell to
+ *   pop it out enlarged, for reading a small or long value. A reading aid, so
+ *   hosts generally enable it on read-only views and leave it off while
+ *   editing. Takes over the double-click gesture, so it is ignored when
+ *   childDisplay is 'popup' (there, double-click already opens the record).
+ * @param {Function}       [props.cellStyle]        - ({ row, rowIndex,
+ *   columnKey, value }) => style object | null. Applied per cell, on top of
+ *   any conditional formatting from the schema. The host decides WHERE the
+ *   style comes from (theme, saved overrides); tableStyles.js is exported to
+ *   resolve those layers, but this component only applies what it's handed.
+ *   Its presence also switches the table to separated borders — see the CSS.
+ * @param {Function}       [props.headerStyle]      - ({ columnKey, isGroupHeader,
+ *   depth }) => style object | null. The header's counterpart to cellStyle,
+ *   and it exists for the same reason: a host that can style every row band
+ *   but not the header can restyle a table into something the header no
+ *   longer belongs to. Resolved by the host from the same vocabulary
+ *   (tableStyles.js); this component only applies what it's handed.
  * @param {string}         [props.className]        - Additional CSS class
  * @param {Function}       [props.onCommit]         - async (changeSet[]) => void
  * @param {Array<{key: string, label: string, icon?: any, onClick: (row) => void,
@@ -70,16 +155,50 @@ export default function XeplrTable(props) {
     minDetectionRows: props.minDetectionRows,
     pageSize: props.pageSize,
     enableSorting: props.enableSorting,
+    // Controlled sorting, when the host owns the order — see
+    // useTableController. Passing `sorting` is what switches it on; the
+    // header still reads and clicks exactly as before.
+    sorting: props.sorting,
+    onSortingChange: props.onSortingChange,
     enableFiltering: props.enableFiltering,
     enablePagination: props.enablePagination
   });
 
   var enableFiltering = props.enableFiltering !== false;
   var enablePagination = props.enablePagination !== false;
-
   var headerGroups = table.getHeaderGroups();
   var rows = table.getRowModel().rows;
 
+  // A consumer that wants a frozen header opts in with its own CSS
+  // (`position: sticky; top: 0` on .xeplr-table-th) — this component has no
+  // opinion on whether stickiness is on. What it DOES have to get right,
+  // once it opts in, is WHERE each row sticks: a single-row header can
+  // hardcode top:0 and be done, but a grouped one (a pivoted date over its
+  // measures) has a SECOND row that also needs to freeze, directly below
+  // the first — and it doesn't know that row's height in advance, because
+  // that depends on the font/theme/padding a THEME sets, not anything this
+  // component controls. Measured after layout and set as an inline `top`
+  // per row, which wins over a consumer's blanket `top: 0` by specificity —
+  // row 0 keeps top:0 (same value, so nothing changes there), every row
+  // below it gets pushed down by the actual height of the rows above it.
+  // A no-op for every table that has exactly one header row (offsets[0] is
+  // always 0) and for every table that never opts into sticky at all (an
+  // inline `top` with no `position: sticky` does nothing).
+  var headerRowRefs = useRef([]);
+  var [stickyTops, setStickyTops] = useState([]);
+  useLayoutEffect(function() {
+    var heights = headerRowRefs.current.slice(0, headerGroups.length).map(function(el) {
+      return el ? el.offsetHeight : 0;
+    });
+    var offsets = [];
+    var acc = 0;
+    for (var i = 0; i < heights.length; i++) {
+      offsets.push(acc);
+      acc += heights[i];
+    }
+    setStickyTops(offsets);
+  }, [headerGroups.length]);
+
   function getRowId(row) {
     return row._tempId || row.id;
   }
@@ -92,6 +211,53 @@ export default function XeplrTable(props) {
 
   var hasRowActions = actions.hasActions || !!(props.rowActions && props.rowActions.length > 0);
 
+  // Content sizing measures the whole dataset's first N rows, not the current
+  // page — otherwise every page turn would re-measure and the columns would
+  // visibly jump.
+  var widths = useColumnWidths({
+    enabled: props.columnSizing === 'content',
+    data: props.data,
+    columns: columns,
+    columnText: props.columnText,
+    sizingKey: props.sizingKey,
+    columnWidths: props.columnWidths,
+    onSizing: props.onColumnSizing,
+    sampleRows: props.sizingSampleRows,
+    minColumnWidth: props.minColumnWidth,
+    maxColumnWidth: props.maxColumnWidth
+  });
+  var sizing = widths.sizing;
+
+  // PER-COLUMN CLASS, resolved by leaf index — the same index `columnWidths`
+  // uses, so a host that pins column 3 highlights column 3 without a second
+  // way of naming it. Header and body share one answer: a selected column is
+  // selected all the way down, or the highlight stops at the header and the
+  // thing being resized looks like just a label.
+  var columnClassName = props.columnClassName;
+  var classForColumn = useCallback(function(accessor) {
+    if (!columnClassName) return '';
+    var index = columns.findIndex(function(c) { return c.accessor === accessor; });
+    if (index < 0) return '';
+    return columnClassName(columns[index], index) || '';
+  }, [columnClassName, columns]);
+
+  // Zoom is addressed by row+column id rather than by holding the cell object,
+  // so paging, sorting or a refresh can't leave a stale cell open — the lookup
+  // below simply stops finding it and the box closes.
+  var [zoom, setZoom] = useState(null);
+  var closeZoom = useCallback(function() { setZoom(null); }, []);
+  var cellZoom = !!props.cellZoom && !usePopup;
+
+  // One context for both toolbar slots.
+  var toolbarContext = {
+    rowCount: table.getFilteredRowModel().rows.length,
+    totalCount: (props.data || []).length,
+    selectedCount: actions.selectedIds.size,
+    resetFilters: resetFilters,
+    resetSorting: resetSorting,
+    enableFiltering: enableFiltering
+  };
+
   var totalColumns = headerGroups[0]?.headers.length || 1;
   if (showExpandCol) totalColumns++;
   if (actions.hasDelete) totalColumns++;
@@ -114,6 +280,16 @@ export default function XeplrTable(props) {
     }
   }
 
+  // Resolved fresh each render: if the row has paged, sorted or filtered away,
+  // there is nothing to find and the box simply isn't rendered.
+  var zoomCell = null;
+  if (cellZoom && zoom) {
+    var zoomRow = rows.find(function(r) { return r.id === zoom.rowId; });
+    if (zoomRow) {
+      zoomCell = zoomRow.getVisibleCells().find(function(c) { return c.column.id === zoom.columnId; }) || null;
+    }
+  }
+
   return (
     <div className={'xeplr-table-container' + (props.className ? ' ' + props.className : '')}>
       <div className="xeplr-table-toolbar">
@@ -147,26 +323,70 @@ export default function XeplrTable(props) {
             </button>
           </div>
         )}
+        {/* Rendered AFTER the built-in buttons: those are driven by the
+            table's own behaviour (there is a pending commit, rows are
+            selected) and a host slot shouldn't be able to displace them. */}
+        {props.toolbarLeading && props.toolbarLeading(toolbarContext)}
+
         <div className="xeplr-table-toolbar-spacer" />
-        {enableFiltering && (
-          <button type="button" className="xeplr-table-toolbar-btn" onClick={resetFilters}>
-            Clear Filters
-          </button>
-        )}
-        <button type="button" className="xeplr-table-toolbar-btn" onClick={resetSorting}>
-          Clear Sort
-        </button>
+        {/* The toolbar's trailing actions. A consumer can replace them
+            entirely by passing `toolbarActions` — it receives the behaviour
+            (the reset handlers) and returns whatever presentation it wants.
+            The library owns what the buttons DO; how they look, and whether
+            they're text or icons or sit beside other controls, is the
+            consumer's business, not something this component should carry an
+            opinion about. */}
+        {props.toolbarActions
+          ? props.toolbarActions(toolbarContext)
+          : (
+            <>
+              {enableFiltering && (
+                <button type="button" className="xeplr-table-toolbar-btn" onClick={resetFilters}>
+                  Clear Filters
+                </button>
+              )}
+              <button type="button" className="xeplr-table-toolbar-btn" onClick={resetSorting}>
+                Clear Sort
+              </button>
+            </>
+          )}
       </div>
 
-      <div className="xeplr-table-scroll">
-        <table className="xeplr-table">
+      <div className="xeplr-table-scroll" ref={widths.scrollRef}>
+        {/* When sized to content the table stops at the width it needs; the
+            container's own background fills the rest. No filler cells, so row
+            styling (banding, selection, host row classes) ends cleanly at the
+            table edge instead of being stretched across empty space. */}
+        <table
+          ref={widths.tableRef}
+          className={'xeplr-table' + (sizing ? ' xeplr-table-sized' : '') + (props.cellStyle ? ' xeplr-table-styled' : '')}
+          style={sizing ? { width: sizing.tableWidth + 'px' } : undefined}
+        >
+          {sizing && (
+            <colgroup>
+              {showExpandCol && <col style={{ width: (sizing.extraWidths.expand || 36) + 'px' }} />}
+              {actions.hasDelete && <col style={{ width: (sizing.extraWidths.checkbox || 40) + 'px' }} />}
+              {sizing.widths.map(function(width, i) {
+                return <col key={columns[i] ? columns[i].accessor : i} style={{ width: width + 'px' }} />;
+              })}
+              {hasRowActions && <col style={{ width: (sizing.extraWidths.actions || 80) + 'px' }} />}
+            </colgroup>
+          )}
           <thead>
-            {headerGroups.map(function(headerGroup) {
+            {headerGroups.map(function(headerGroup, rowIndex) {
+              // Every cell in a header row that ISN'T the last one needs the
+              // divider under it, not just the ones that happen to be real
+              // groups — otherwise the line drawn under "2025-05-01" simply
+              // stops where a plain (never-grouped) column like Category
+              // Name sits beside it, and a divider that quits partway across
+              // reads as broken, not as "this column has nothing under it."
+              var isNotLastHeaderRow = rowIndex < headerGroups.length - 1;
+              var stickyTop = stickyTops[rowIndex] || 0;
               return (
-                <tr key={headerGroup.id}>
-                  {showExpandCol && <th className="xeplr-table-th xeplr-table-th-expand" />}
+                <tr key={headerGroup.id} ref={function(el) { headerRowRefs.current[rowIndex] = el; }}>
+                  {showExpandCol && <th className="xeplr-table-th xeplr-table-th-expand" style={{ top: stickyTop }} />}
                   {actions.hasDelete && (
-                    <th className="xeplr-table-th xeplr-table-th-checkbox">
+                    <th className="xeplr-table-th xeplr-table-th-checkbox" style={{ top: stickyTop }}>
                       <input type="checkbox" className="xeplr-table-checkbox" checked={allSelected}
                         onChange={function() { actions.toggleSelectAll(visibleIds); }} />
                     </th>
@@ -177,13 +397,61 @@ export default function XeplrTable(props) {
                     var dataType = header.column.columnDef.meta?.dataType || TYPES.STRING;
                     var FilterComponent = filterComponentMap[dataType];
                     var canFilter = header.column.getCanFilter() && enableFiltering;
+                    // A REAL group column (built via columnHelper.group, e.g.
+                    // a pivoted date) carries its child column defs on
+                    // header.column.columns. header.subHeaders.length > 0 is
+                    // NOT this check — TanStack also pads every OTHER
+                    // top-level column to the same depth with a placeholder
+                    // header the moment ANY column in the table is grouped,
+                    // and that placeholder reports subHeaders too, which
+                    // would misclassify a plain ungrouped column (Category
+                    // here) as a group and center/border its empty top cell.
+                    var isGroupHeader = Boolean(header.column.columns && header.column.columns.length);
+                    // The FIRST/LAST column under a group is where that
+                    // group's own block actually begins/ends — that edge
+                    // gets the heavy boundary, carried down through the data
+                    // rows too. The group header cell itself spans the whole
+                    // block by definition (that's what colSpan means), so
+                    // its own left/right edges are always both boundaries.
+                    var parentCols = header.column.parent && header.column.parent.columns;
+                    var isGroupStart = isGroupHeader || (parentCols ? parentCols[0].id === header.column.id : false);
+                    var isGroupEnd = isGroupHeader || (parentCols ? parentCols[parentCols.length - 1].id === header.column.id : false);
+                    var colClass = isGroupHeader ? '' : classForColumn(header.column.id);
+                    var thClass = 'xeplr-table-th' +
+                      (colClass ? ' ' + colClass : '') +
+                      (isGroupHeader ? ' xeplr-table-th-group' : '') +
+                      (isNotLastHeaderRow ? ' xeplr-table-th-row-divider' : '') +
+                      (isGroupStart ? ' xeplr-table-th-group-start' : '') +
+                      (isGroupEnd ? ' xeplr-table-th-group-end' : '');
 
                     return (
-                      <th key={header.id} className="xeplr-table-th">
+                      // colSpan defaults to 1 for a flat leaf column — every
+                      // table that never nests columns renders exactly as
+                      // before. It only widens for a GROUP header (a pivoted
+                      // date spanning the measures under it), which is what
+                      // TanStack computed it for.
+                      <th key={header.id} colSpan={header.colSpan} className={thClass}
+                        // The host's header style sits UNDER `top`, so a
+                        // sticky header stays stuck whatever it is styled with.
+                        style={Object.assign(
+                          {},
+                          props.headerStyle
+                            ? props.headerStyle({ columnKey: header.column.id, isGroupHeader: isGroupHeader, depth: header.depth })
+                            : null,
+                          { top: stickyTop }
+                        )}>
                         <div className="xeplr-table-header-cell">
+                          {/* onHeaderClick TAKES THE GESTURE. A host that wants
+                              the click for something else (selecting a column to
+                              resize) gets it outright rather than having to fight
+                              the sort handler — two things on one click is how you
+                              get a sort nobody asked for on every selection. */}
                           <span
-                            className={'xeplr-table-header-label' + (canSort ? ' sortable' : '')}
-                            onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                            className={'xeplr-table-header-label' +
+                              (props.onHeaderClick ? ' clickable' : (canSort ? ' sortable' : ''))}
+                            onClick={props.onHeaderClick
+                              ? function() { props.onHeaderClick(header.column.id, isGroupHeader); }
+                              : (canSort ? header.column.getToggleSortingHandler() : undefined)}
                           >
                             {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                             {sorted === 'asc' && <span className="xeplr-table-sort-icon"> ▲</span>}
@@ -195,7 +463,7 @@ export default function XeplrTable(props) {
                     );
                   })}
                   {hasRowActions && (
-                    <th className="xeplr-table-th xeplr-table-th-actions">
+                    <th className="xeplr-table-th xeplr-table-th-actions" style={{ top: stickyTop }}>
                       <div className="xeplr-table-header-cell">
                         <span className="xeplr-table-header-label">Actions</span>
                       </div>
@@ -219,6 +487,13 @@ export default function XeplrTable(props) {
               var isNew = !!original._tempId;
 
               var rowClass = 'xeplr-table-row';
+              // Consumer-supplied per-row class. Lets a host mark rows that
+              // mean something to IT without this component needing to know
+              // what those categories are, or that they exist.
+              if (props.rowClassName) {
+                var extraClass = props.rowClassName(original);
+                if (extraClass) rowClass += ' ' + extraClass;
+              }
               if (isSelected) rowClass += ' xeplr-table-row-selected';
               if (isNew) rowClass += ' xeplr-table-row-new';
               if (usePopup) rowClass += ' xeplr-table-row-clickable';
@@ -248,8 +523,47 @@ export default function XeplrTable(props) {
                     var cellStyleDef = meta?.cellStyle;
                     var condStyle = cellStyleDef
                       ? resolveCellStyle(cell.getValue(), cellStyleDef, cell.column.id, row.original) : null;
+                    // Host-supplied styling wins over the schema's conditional
+                    // formatting: the conditional rule is a default the report
+                    // author set once, the override is what they just chose.
+                    var hostStyle = props.cellStyle
+                      ? props.cellStyle({ row: row.original, rowIndex: row.index,
+                          columnKey: cell.column.id, value: cell.getValue() })
+                      : null;
+                    var tdStyle = condStyle || hostStyle
+                      ? Object.assign({}, condStyle, hostStyle) : undefined;
+                    // Same boundary the header drew for this column — so a
+                    // group's divider is one continuous line down the table,
+                    // not a border that stops after the header row.
+                    var cellParentCols = cell.column.parent && cell.column.parent.columns;
+                    var tdColClass = classForColumn(cell.column.id);
+                    var tdClass = 'xeplr-table-td' +
+                      (tdColClass ? ' ' + tdColClass : '') +
+                      (cellParentCols && cellParentCols[0].id === cell.column.id ? ' xeplr-table-td-group-start' : '') +
+                      (cellParentCols && cellParentCols[cellParentCols.length - 1].id === cell.column.id
+                        ? ' xeplr-table-td-group-end' : '');
                     return (
-                      <td key={cell.id} className="xeplr-table-td" style={condStyle}>
+                      <td
+                        key={cell.id}
+                        className={tdClass}
+                        style={tdStyle}
+                        onDoubleClick={cellZoom ? function(e) {
+                          // Stopped so the row's own double-click handler
+                          // doesn't also fire — the gesture belongs to the cell.
+                          e.stopPropagation();
+                          // The cell's own font travels with it, so the box
+                          // scales off THIS cell's size rather than the
+                          // container's — a compact theme zooms proportionally
+                          // instead of jumping to some fixed size.
+                          var cellStyle = window.getComputedStyle(e.currentTarget);
+                          setZoom({
+                            rowId: row.id,
+                            columnId: cell.column.id,
+                            rect: e.currentTarget.getBoundingClientRect(),
+                            font: { fontSize: cellStyle.fontSize, fontFamily: cellStyle.fontFamily }
+                          });
+                        } : undefined}
+                      >
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </td>
                     );
@@ -299,12 +613,14 @@ export default function XeplrTable(props) {
           <button type="button" onClick={function() { table.setPageIndex(table.getPageCount() - 1); }} disabled={!table.getCanNextPage()}>»»</button>
           <select className="xeplr-table-page-size" value={table.getState().pagination.pageSize}
             onChange={function(e) { table.setPageSize(Number(e.target.value)); }}>
-            {[10, 20, 50, 100].map(function(size) { return <option key={size} value={size}>{size} rows</option>; })}
+            {[100, 200, 500, 1000].map(function(size) { return <option key={size} value={size}>{size} rows</option>; })}
           </select>
           <span className="xeplr-table-row-count">({table.getFilteredRowModel().rows.length} total)</span>
         </div>
       )}
 
+      {zoomCell && <CellZoom cell={zoomCell} anchorRect={zoom.rect} font={zoom.font} onClose={closeZoom} />}
+
       {/* Detail popup (childDisplay === 'popup') */}
       {actions.detailRow && usePopup && (
         <RecordDetail