release: @datasketch/monkeytab@0.3.0

Author: jpmarindiaz

BROWSER.md

@@ -60,6 +60,29 @@ function App() {
 | `sortDirection` | `'asc' \| 'desc' \| null` | — | Controlled sort direction |
 | `onSortChange` | `(fieldId, direction) => void` | — | Fires when user changes sort. Use for server-side sorting. |
 
+### Selection Actions
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `selectionActions` | `(ids: string[], clear: () => void) => ReactNode` | — | Render prop for custom bulk actions when rows are selected |
+
+### Grouping
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `groupBy` | `string \| null` | — | Field ID to group rows by. Omit for no grouping |
+| `groupCollapsed` | `boolean` | `false` | Start groups collapsed |
+| `onGroupByChange` | `(fieldId: string \| null) => void` | — | Fires when user changes grouping via column menu |
+| `groupOrder` | `'auto' \| 'asc' \| 'desc' \| 'count-asc' \| 'count-desc' \| string[]` | `'auto'` | Group display order. `'auto'` uses SingleSelect option order, or alphabetical |
+
+### Row Coloring
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `colorBy` | `string \| null` | — | Field ID whose value tints each row (SingleSelect colors, Boolean green/red) |
+| `onColorByChange` | `(fieldId: string \| null) => void` | — | Fires when user changes coloring via column menu |
+| `colorByMap` | `Record<string, string>` | — | Optional per-value color overrides |
+
 ### Pagination
 
 | Prop | Type | Default | Description |
@@ -77,6 +100,9 @@ function App() {
 |---|---|---|---|
 | `height` | `'auto' \| number \| string` | `'100%'` | `'auto'` fits content, number = fixed pixels (ghost rows on), string = CSS |
 | `maxHeight` | `number` | — | Max height in px. Caps `'auto'` growth or fluid containers |
+| `columnFit` | `'auto' \| 'fill' \| 'fixed'` | `'auto'` | `'auto'` fits content, `'fill'` distributes container width, `'fixed'` uses 180px per column |
+| `autoFitMin` | `number` | `60` | Minimum column width in `'auto'` mode |
+| `autoFitMax` | `number` | `320` | Maximum column width in `'auto'` mode |
 | `rowHeight` | `RowHeightOption` | `'medium'` | `'short'` \| `'medium'` \| `'tall'` \| `'extra-tall'` \| `'fit'` |
 | `showRowNumbers` | `boolean` | `false` | Show row number column |
 | `compactMode` | `boolean` | `false` | Denser layout — smaller fonts, tighter padding |

CHANGELOG.md

@@ -6,6 +6,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.3.0] — 2026-04-16
+
+### New
+- **`selectionActions` render prop** — Custom bulk-action buttons in the toolbar when rows are selected.
+- **Row grouping** — `groupBy` / `groupCollapsed` / `onGroupByChange` with collapsible headers, row counts, and select-all-in-group checkboxes. Context menu adds "Group by this column".
+- **`groupOrder` prop** — Control group display order: `'auto'` (default, uses SingleSelect option order), `'asc'`, `'desc'`, `'count-asc'`, `'count-desc'`, or explicit `string[]`.
+- **Row coloring** — `colorBy` / `onColorByChange` / `colorByMap` tints rows by a field value. Uses SingleSelect option colors and Boolean defaults (pastel green/red).
+- **`columnFit` prop** — `'auto'` (new default, sizes to content), `'fill'` (distributes container width), `'fixed'` (180px per column).
+- **`autoFitMin` / `autoFitMax`** — Tune auto column-width bounds (defaults 60 / 320).
+
+### Changed
+- Default column width is now content-aware (`columnFit="auto"`) instead of fixed 180px.
+- Cell overflow fade inherits the row's background color instead of always fading to white.
+- Column header type icon auto-hides when the column is too narrow to show it with the label.
+
+### Fixed
+- Horizontal overflow when tables are inside flex parents (side-by-side panels).
+- Email / URL / Phone cells now fade like other types instead of showing `...` ellipsis.
+
 ## [0.2.1] — 2026-04-15
 
 ### New
@@ -75,6 +94,7 @@ First public release.
 - `onUpload` prop — bring your own file upload (S3, Cloudinary, etc.)
 - Drag-and-drop and paste support for Image cells
 
-[Unreleased]: https://github.com/datasketch/monkeytab/compare/v0.2.1...HEAD
+[Unreleased]: https://github.com/datasketch/monkeytab/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/datasketch/monkeytab/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/datasketch/monkeytab/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/datasketch/monkeytab/releases/tag/v0.2.0

examples/browser-standalone/main.tsx

@@ -581,6 +581,8 @@ function App() {
   const [sortBy, setSortBy] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc' | null>(null);
   const [ghostGrid, setGhostGrid] = useState(true);
+  const [groupBy, setGroupBy] = useState<string | null>(null);
+  const [colorBy, setColorBy] = useState<string | null>(null);
 
   const locale = language === 'es' ? 'es-CO' : 'en-US';
 
@@ -630,6 +632,33 @@ function App() {
             <input type="checkbox" checked={ghostGrid} onChange={(e) => setGhostGrid(e.target.checked)} />
             Ghost grid
           </label>
+          <label style={{ fontSize: '14px', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+            Group:
+            <select
+              value={groupBy ?? ''}
+              onChange={(e) => setGroupBy(e.target.value || null)}
+              style={{ padding: '2px 6px', fontSize: '13px', borderRadius: '4px', border: '1px solid #d1d5db' }}
+            >
+              <option value="">None</option>
+              <option value="Role">Role</option>
+              <option value="Active">Active</option>
+            </select>
+          </label>
+          <label style={{ fontSize: '14px', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+            Color:
+            <select
+              value={colorBy ?? ''}
+              onChange={(e) => setColorBy(e.target.value || null)}
+              style={{ padding: '2px 6px', fontSize: '13px', borderRadius: '4px', border: '1px solid #d1d5db' }}
+            >
+              <option value="">None</option>
+              {COLUMNS
+                .filter((c) => c.type === 'SingleSelect' || c.type === 'MultiSelect' || c.type === 'Boolean')
+                .map((c) => (
+                  <option key={c.id} value={c.id}>{c.id}</option>
+                ))}
+            </select>
+          </label>
           {tab === 'editable' && (
             <>
               <span style={{ fontSize: '14px', color: '#6b7280' }}>
@@ -677,6 +706,27 @@ function App() {
                   await new Promise(r => setTimeout(r, 1000));
                   return URL.createObjectURL(file);
                 }}
+                groupBy={groupBy}
+                onGroupByChange={setGroupBy}
+                colorBy={colorBy}
+                onColorByChange={setColorBy}
+                selectionActions={(ids, clear) => (
+                  <button
+                    onClick={() => { alert(`Processing ${ids.length} rows: ${ids.join(', ')}`); clear(); }}
+                    style={{
+                      padding: '4px 8px',
+                      background: '#dbeafe',
+                      color: '#1d4ed8',
+                      border: 'none',
+                      borderRadius: '4px',
+                      fontSize: '12px',
+                      fontWeight: 500,
+                      cursor: 'pointer',
+                    }}
+                  >
+                    Process
+                  </button>
+                )}
               />
             </div>
             {log.length > 0 && (

examples/browser-standalone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-standalone",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datasketch/monkeytab",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Embeddable, editable React table component",
   "keywords": [
     "react",

src/browser/MonkeyTable.tsx

@@ -85,6 +85,33 @@ export interface MonkeyTableProps {
   /** Called when a single cell value changes — fires before the mutation with rowId, fieldId, new and old values */
   onCellChange?: (rowId: string, fieldId: string, newValue: Value, oldValue: Value) => void;
 
+  /** Render prop for custom bulk actions shown when rows are selected.
+   *  Receives the selected row IDs and a function to clear the selection. */
+  selectionActions?: (selectedIds: string[], clearSelection: () => void) => React.ReactNode;
+
+  // ── Grouping ──────────────────────────────────────────────────────────────
+  /** Field ID to group rows by (single column). Omit or null for no grouping. */
+  groupBy?: string | null;
+  /** Default collapsed state for groups (default: false = expanded) */
+  groupCollapsed?: boolean;
+  /** Called when user changes grouping via column header menu */
+  onGroupByChange?: (fieldId: string | null) => void;
+  /** Group display order.
+   *  - `'auto'` (default): SingleSelect/MultiSelect use their option order; other fields sort alphabetically.
+   *  - `'asc'` / `'desc'`: alphabetical / reverse-alphabetical by group value.
+   *  - `'count-desc'` / `'count-asc'`: by row count within each group.
+   *  - `string[]`: explicit order — list of group values in the desired sequence. */
+  groupOrder?: 'auto' | 'asc' | 'desc' | 'count-asc' | 'count-desc' | string[];
+
+  // ── Row Coloring ──────────────────────────────────────────────────────────
+  /** Field ID whose value determines each row's background tint. Uses the field's
+   *  existing color mapping (SingleSelect option colors, Boolean true/false). */
+  colorBy?: string | null;
+  /** Called when user changes coloring via column header menu */
+  onColorByChange?: (fieldId: string | null) => void;
+  /** Optional per-value color overrides, keyed by stringified value. */
+  colorByMap?: Record<string, string>;
+
   // ── Sorting ───────────────────────────────────────────────────────────────
   /** Controlled sort field — the column currently sorted */
   sortBy?: string | null;
@@ -119,6 +146,15 @@ export interface MonkeyTableProps {
   /** Maximum height in pixels. Useful with `height="auto"` to cap growth, or with
    *  `height="100%"` to limit fluid containers. Ignored when `height` is a fixed number. */
   maxHeight?: number;
+  /** Column sizing strategy.
+   *  - `'auto'` (default): each column sized to fit its content (header + data). Table may scroll horizontally.
+   *  - `'fill'`: distribute available container width evenly across columns (no horizontal overflow).
+   *  - `'fixed'`: each column starts at 180px (or its `width` prop). */
+  columnFit?: 'auto' | 'fill' | 'fixed';
+  /** Minimum column width in `'auto'` mode (default: 60). Per-column `minWidth` overrides this. */
+  autoFitMin?: number;
+  /** Maximum column width in `'auto'` mode (default: 320). Per-column `maxWidth` overrides this. */
+  autoFitMax?: number;
   /** Row height preset (default: 'medium') */
   rowHeight?: RowHeightOption;
   /** Show row number column (default: false) */
@@ -214,6 +250,16 @@ export function MonkeyTable({
   selectedRowIds,
   onRowClick,
   onCellChange,
+  selectionActions,
+  // Grouping
+  groupBy,
+  groupCollapsed,
+  onGroupByChange,
+  groupOrder,
+  // Row coloring
+  colorBy,
+  onColorByChange,
+  colorByMap,
   // Sorting
   sortBy,
   sortDirection,
@@ -230,6 +276,9 @@ export function MonkeyTable({
   height = '100%',
   maxHeight,
   rowHeight,
+  columnFit = 'auto',
+  autoFitMin,
+  autoFitMax,
   showRowNumbers,
   compactMode,
   // Permissions
@@ -680,6 +729,7 @@ export function MonkeyTable({
     display: 'flex',
     flexDirection: 'column',
     overflow: 'hidden',
+    minWidth: 0, // Allow shrinking inside flex parents (prevents horizontal page overflow)
   };
 
   return (
@@ -712,8 +762,19 @@ export function MonkeyTable({
                 pageSize={pageSize}
                 onPageChange={onPageChange}
                 ghostGrid={resolvedGhostGrid}
+                columnFit={columnFit}
+                autoFitMin={autoFitMin}
+                autoFitMax={autoFitMax}
                 paginationMode={paginationMode}
                 paginationLoading={paginationLoading}
+                selectionActions={selectionActions}
+                groupBy={groupBy}
+                groupCollapsed={groupCollapsed}
+                onGroupByChange={onGroupByChange}
+                groupOrder={groupOrder}
+                colorBy={colorBy}
+                onColorByChange={onColorByChange}
+                colorByMap={colorByMap}
               />
             </GridStoreProvider>
           </I18nProvider>

src/browser/TableView.tsx

@@ -92,9 +92,31 @@ export interface TableViewProps {
   paginationLoading?: boolean;
   /** Show faint ghost rows/columns to fill the viewport, spreadsheet-style */
   ghostGrid?: boolean | { rows?: number; columns?: number };
+  /** Column sizing strategy — 'auto' (default) fits content, 'fill' distributes width, 'fixed' uses 180px */
+  columnFit?: 'auto' | 'fill' | 'fixed';
+  /** Min column width in 'auto' mode (default: 60) */
+  autoFitMin?: number;
+  /** Max column width in 'auto' mode (default: 320) */
+  autoFitMax?: number;
+  /** Render prop for custom bulk actions when rows are selected */
+  selectionActions?: (selectedIds: string[], clearSelection: () => void) => React.ReactNode;
+  /** Field ID to group rows by */
+  groupBy?: string | null;
+  /** Default collapsed state for groups */
+  groupCollapsed?: boolean;
+  /** Called when user changes grouping via column header menu */
+  onGroupByChange?: (fieldId: string | null) => void;
+  /** Group display order */
+  groupOrder?: 'auto' | 'asc' | 'desc' | 'count-asc' | 'count-desc' | string[];
+  /** Field ID whose value determines each row's background tint */
+  colorBy?: string | null;
+  /** Called when user changes coloring via column header menu */
+  onColorByChange?: (fieldId: string | null) => void;
+  /** Optional per-value color overrides */
+  colorByMap?: Record<string, string>;
 }
 
-export function TableView({ baseId, tableId, onNavigate, onNavigateHome, onSelectionChange, selectedRowIds, onRowClick, customRenderers, customIcons, columnEditable, columnWidth, columnMinWidth, columnMaxWidth, columnSortable, columnAlign, onUpload, onCellChange, onSortChange, sortBy, sortDirection, totalRows, page = 1, pageSize = 500, onPageChange, paginationMode = 'simple', paginationLoading, ghostGrid }: TableViewProps) {
+export function TableView({ baseId, tableId, onNavigate, onNavigateHome, onSelectionChange, selectedRowIds, onRowClick, customRenderers, customIcons, columnEditable, columnWidth, columnMinWidth, columnMaxWidth, columnSortable, columnAlign, onUpload, onCellChange, onSortChange, sortBy, sortDirection, totalRows, page = 1, pageSize = 500, onPageChange, paginationMode = 'simple', paginationLoading, ghostGrid, columnFit, autoFitMin, autoFitMax, selectionActions, groupBy, groupCollapsed, onGroupByChange, groupOrder, colorBy, onColorByChange, colorByMap }: TableViewProps) {
   const { t } = useI18n();
   const client = useClient();
   const { data: base } = useBase(baseId);
@@ -434,7 +456,10 @@ export function TableView({ baseId, tableId, onNavigate, onNavigateHome, onSelec
             showRowNumbers={settings.showRowNumbersControl ? displayShowRowNumbers : undefined}
             onShowRowNumbersChange={settings.showRowNumbersControl ? handleShowRowNumbersChange : undefined}
             selectedCount={selectedRows.size}
+            selectedRowIds={Array.from(selectedRows)}
             onDeleteSelected={!isReadOnly ? handleDeleteSelected : undefined}
+            onClearSelection={() => { setSelectedRows(new Set()); onSelectionChange?.([]); }}
+            selectionActions={selectionActions}
             totalRecords={rows.length}
             searchQuery={settings.showSearch ? searchQuery : undefined}
             onSearchChange={settings.showSearch ? setSearchQuery : undefined}
@@ -492,6 +517,16 @@ export function TableView({ baseId, tableId, onNavigate, onNavigateHome, onSelec
           onUpload={onUpload}
           loading={isFetching || rowsLoading}
           ghostGrid={ghostGrid}
+          columnFit={columnFit}
+          autoFitMin={autoFitMin}
+          autoFitMax={autoFitMax}
+          groupBy={groupBy}
+          groupCollapsed={groupCollapsed}
+          onGroupByChange={onGroupByChange}
+          groupOrder={groupOrder}
+          colorBy={colorBy}
+          onColorByChange={onColorByChange}
+          colorByMap={colorByMap}
         />
       </div>