tosijs-ui 1.5.0 → 1.5.3

package/dist/data-table.d.ts

@@ -125,6 +125,7 @@ export declare class TosiTable extends WebComponent {
         localized: boolean;
     };
     selectionChanged: SelectCallback;
+    rowRendered: ((item: any, cells: HTMLElement[]) => void) | null;
     private selectedKey;
     private selectBinding;
     maxVisibleRows: number;
@@ -174,6 +175,8 @@ export declare class TosiTable extends WebComponent {
     get visibleRows(): any[];
     get visibleSelectedRows(): any[];
     get selectedRows(): any[];
+    getCells(itemOrCell: any): HTMLElement[] | undefined;
+    getItem(cell: Element): any;
     private draggedColumn?;
     private dropColumn;
     render(): void;

package/dist/data-table.js

@@ -45,13 +45,24 @@ const columns = [
   },
 ]
 
-preview.append(tosiTable({
+const table = tosiTable({
   multiple: true,
   array: emojiData,
   localized: true,
   columns,
   rowHeight: 40,
-}))
+})
+
+table.addEventListener('mouseover', (e) => {
+  for (const el of table.querySelectorAll('.row-hover')) {
+    el.classList.remove('row-hover')
+  }
+  const item = table.getItem(e.target)
+  if (!item) return
+  table.getCells(item)?.forEach(c => c.classList.add('row-hover'))
+})
+
+preview.append(table)
 ```
 ```css
 .preview input.td {
@@ -64,6 +75,10 @@ preview.append(tosiTable({
 .preview tosi-table {
   height: 100%;
 }
+
+.preview .row-hover {
+  background: #08835810;
+}
 ```
 ```test
 const table = await waitFor('tosi-table')
@@ -98,6 +113,30 @@ test('row selection via data model', () => {
   expect(items[0][table.selectedKey]).not.toBe(true)
   expect(items[1][table.selectedKey]).not.toBe(true)
 })
+
+test('getCells and getItem', async () => {
+  // Wait for list binding to stamp DOM elements
+  const items = table.visibleRows
+  let cells
+  await new Promise(resolve => {
+    const check = () => {
+      cells = table.getCells(items[0])
+      if (cells) return resolve()
+      setTimeout(check, 100)
+    }
+    check()
+  })
+
+  expect(cells.length).toBe(table.visibleColumns.length)
+
+  // getItem round-trips back to the same item
+  const item = table.getItem(cells[0])
+  expect(item).toBe(items[0])
+
+  // getCells from a cell element
+  const cellsFromCell = table.getCells(cells[1])
+  expect(cellsFromCell).toBe(cells)
+})
 ```
 
 > In the preceding example, the `name` column is *editable* (and *bound*, try editing something and scrolling
@@ -143,15 +182,18 @@ rendering with no jitter.
 import { elements } from 'tosijs'
 import { tosiTable, icons } from 'tosijs-ui'
 
-const { button } = elements
+const { button, span } = elements
 
 const count = 100
 const cols = ['Q1', 'Q2', 'Q3', 'Q4']
+const numKeys = []
 const rows = Array.from({ length: count }, (_, i) => {
   const row = { id: i + 1, name: 'Item ' + (i + 1) }
   for (const year of [2024, 2025, 2026]) {
     for (const q of cols) {
-      row[q + ' ' + year] = Math.round(Math.random() * 10000) / 100
+      const key = q + ' ' + year
+      row[key] = Math.round((Math.random() * 200 - 100) * 100) / 100
+      if (i === 0) numKeys.push(key)
     }
   }
   return row
@@ -159,25 +201,44 @@ const rows = Array.from({ length: count }, (_, i) => {
 
 // totals row
 const totals = { id: '', name: 'Total' }
-for (const key of Object.keys(rows[0])) {
-  if (key === 'id' || key === 'name') continue
+for (const key of numKeys) {
   totals[key] = Math.round(rows.reduce((sum, r) => sum + r[key], 0) * 100) / 100
 }
 rows.push(totals)
 
-const dataColumns = []
-for (const year of [2024, 2025, 2026]) {
-  for (const q of cols) {
-    dataColumns.push({ prop: q + ' ' + year, width: 100, align: 'right' })
-  }
+// custom cell that colors negative numbers red
+function numCell(options) {
+  return span({
+    class: 'td num-cell',
+    bindText: '^.' + options.prop,
+    bind: {
+      value: '^.' + options.prop,
+      binding: {
+        toDOM(el, val) {
+          el.style.color = val < 0 ? '#c00' : ''
+        }
+      }
+    }
+  })
 }
 
-preview.append(tosiTable({
+const dataColumns = numKeys.map(key => ({
+  prop: key, width: 100, align: 'right', dataCell: numCell,
+}))
+
+const table = tosiTable({
   array: rows,
   rowHeight: 32,
   pinnedBottom: 1,
   pinnedLeft: 2,
   pinnedRight: 1,
+  rowRendered(item, cells) {
+    const total = numKeys.reduce((sum, key) => sum + (item[key] || 0), 0)
+    const cls = total < 0 ? 'row-negative' : ''
+    for (const c of cells) {
+      c.classList.toggle('row-negative', total < 0)
+    }
+  },
   columns: [
     { prop: 'id', name: '#', width: 50, align: 'right' },
     { prop: 'name', width: 120 },
@@ -199,7 +260,9 @@ preview.append(tosiTable({
       },
     },
   ],
-}))
+})
+
+preview.append(table)
 ```
 ```css
 .preview tosi-table {
@@ -217,6 +280,12 @@ preview.append(tosiTable({
   background: #eee;
   font-weight: bold;
 }
+.preview .row-negative {
+  background: #fdd;
+}
+.preview .num-cell {
+  font-variant-numeric: tabular-nums;
+}
 ```
 
 ## Selection
@@ -237,6 +306,43 @@ The following methods are also provided:
 
 These are rather fine-grained but they're used internally by the selection code so they may as well be documented.
 
+## Row Access
+
+Because the table uses a flat CSS grid (no `.tr` row elements), two methods
+provide O(1) access between items and their cells:
+
+- `<tosi-table>.getCells(itemOrCell)` — returns the `HTMLElement[]` of cells for a
+  given data item or any cell in the row, or `undefined` if the row isn't
+  currently rendered (virtual scroll)
+- `<tosi-table>.getItem(cell)` — returns the data item bound to a cell element
+
+These are useful for row-level hover effects, styling, and event handling:
+
+```typescript
+table.addEventListener('mouseover', (e) => {
+  for (const el of table.querySelectorAll('.row-hover')) {
+    el.classList.remove('row-hover')
+  }
+  const item = table.getItem(e.target)
+  if (!item) return
+  table.getCells(item)?.forEach(c => c.classList.add('row-hover'))
+})
+```
+
+### `rowRendered` callback
+
+For virtual tables, cells are created and destroyed as you scroll. The
+`rowRendered` callback fires whenever a row's cells are rendered, letting
+you apply styling that survives virtualisation:
+
+```typescript
+table.rowRendered = (item, cells) => {
+  if (item.overdue) {
+    cells.forEach(c => c.classList.add('overdue'))
+  }
+}
+```
+
 ## Sorting
 
 By default, the user can sort the table by any column which doesn't have a `sort === false`.
@@ -300,7 +406,7 @@ You'll need to make sure your localized strings include:
 
 As well as any column names you want localized.
 */
-import { Component as WebComponent, elements, vars, varDefault, tosiValue, getListItem, tosi, } from 'tosijs';
+import { Component as WebComponent, elements, vars, varDefault, tosiValue, getListItem, getListBinding, bind, tosi, } from 'tosijs';
 import { trackDrag } from './track-drag';
 import { icons } from './icons';
 import { popMenu } from './menu';
@@ -445,6 +551,7 @@ export class TosiTable extends WebComponent {
     selectionChanged = () => {
         /* do not care */
     };
+    rowRendered = null;
     selectedKey = Symbol('selected');
     selectBinding = (elt, obj) => {
         if (obj == null)
@@ -590,12 +697,12 @@ export class TosiTable extends WebComponent {
         return style;
     }
     applyPinnedToCustomCell(cell, colIndex, si, style) {
-        cell.dataset.col = String(colIndex);
+        cell.setAttribute('aria-colindex', String(colIndex + 1));
         cell.tabIndex = -1;
         cell.classList.add(...this.cellClasses('td', si).split(' '));
         Object.assign(cell.style, style);
     }
-    buildPinnedCells(rows, cols, stickyInfo, pin, rowHeight) {
+    buildPinnedCells(rows, cols, stickyInfo, pin, rowHeight, startRowIndex) {
         const cells = [];
         for (let r = 0; r < rows.length; r++) {
             const rowItem = rows[r];
@@ -607,13 +714,14 @@ export class TosiTable extends WebComponent {
                 const si = stickyInfo[c];
                 cells.push(span({
                     class: this.cellClasses(`td pinned-${pin}`, si),
-                    role: 'cell',
+                    role: 'gridcell',
                     tabindex: -1,
+                    ariaRowindex: String(startRowIndex + r + 1),
+                    ariaColindex: String(c + 1),
                     style: this.cellStyle(col, si, {
                         position: 'sticky',
                         [pin]: offset,
                     }),
-                    dataCol: String(c),
                 }, String(rowItem[col.prop] ?? '')));
             }
         }
@@ -777,44 +885,20 @@ export class TosiTable extends WebComponent {
         if (!this._grid)
             return null;
         const cols = this.visibleColumns.length;
-        // Header cells
+        // Header cells (row -1)
         if (rowIndex === -1) {
-            return this._grid.querySelector(`.th[data-col="${colIndex}"]`);
-        }
-        // Pinned top cells
-        if (rowIndex < this.pinnedTop) {
-            let count = 0;
-            for (const child of this._grid.children) {
-                const el = child;
-                if (el.classList.contains('pinned-top') &&
-                    el.dataset.col === String(colIndex)) {
-                    if (count === rowIndex)
-                        return el;
-                    count++;
-                }
-            }
-            return null;
+            return this._grid.querySelector(`.th[aria-colindex="${colIndex + 1}"]`);
         }
-        // Pinned bottom cells
-        const totalRows = this._array.length;
-        if (rowIndex >= totalRows - this.pinnedBottom) {
-            const bottomIdx = rowIndex - (totalRows - this.pinnedBottom);
-            let count = 0;
-            for (const child of this._grid.children) {
-                const el = child;
-                if (el.classList.contains('pinned-bottom') &&
-                    el.dataset.col === String(colIndex)) {
-                    if (count === bottomIdx)
-                        return el;
-                    count++;
-                }
-            }
-            return null;
-        }
-        // Virtual data cells — find by aria-rowindex and aria-colindex
+        // Pinned cells use full-array-relative aria-rowindex
+        // Virtual data cells use visible-data-relative aria-rowindex (set by bindList)
+        // Try pinned first, then virtual
+        const cell = this._grid.querySelector(`.pinned-top[aria-rowindex="${rowIndex + 1}"][aria-colindex="${colIndex + 1}"],` +
+            `.pinned-bottom[aria-rowindex="${rowIndex + 1}"][aria-colindex="${colIndex + 1}"]`);
+        if (cell)
+            return cell;
+        // Virtual data cell: convert full-array index to visible-data index
         const dataRowIndex = rowIndex - this.pinnedTop;
-        const cell = this._grid.querySelector(`[aria-rowindex="${dataRowIndex + 1}"][aria-colindex="${colIndex + 1}"]`);
-        return cell;
+        return this._grid.querySelector(`[aria-rowindex="${dataRowIndex + 1}"][aria-colindex="${colIndex + 1}"]:not(.pinned-top):not(.pinned-bottom)`);
     }
     _pendingFocus = null;
     onScrollEnd = () => {
@@ -850,45 +934,29 @@ export class TosiTable extends WebComponent {
         const target = el.closest('.td') || el.closest('.th');
         if (!target)
             return;
-        const colIndex = parseInt(target.dataset.col, 10);
-        if (isNaN(colIndex))
+        const ariaCol = parseInt(target.getAttribute('aria-colindex') || '', 10);
+        if (isNaN(ariaCol))
             return;
+        const colIndex = ariaCol - 1;
         const cols = this.visibleColumns.length;
         const totalRows = this._array.length;
         const meta = event.metaKey || event.ctrlKey;
         const isHeader = target.classList.contains('th');
-        // Determine current logical row index (-1 for header)
+        // Determine current logical row index (-1 for header, 0-based full-array for data)
         let rowIndex;
         if (isHeader) {
             rowIndex = -1;
         }
-        else if (target.classList.contains('pinned-top')) {
-            let count = 0;
-            for (const child of this._grid.children) {
-                if (child === target)
-                    break;
-                const c = child;
-                if (c.classList.contains('pinned-top') &&
-                    c.dataset.col === String(colIndex)) {
-                    count++;
-                }
-            }
-            rowIndex = count;
-        }
-        else if (target.classList.contains('pinned-bottom')) {
-            let count = 0;
-            for (const child of this._grid.children) {
-                if (child === target)
-                    break;
-                const c = child;
-                if (c.classList.contains('pinned-bottom') &&
-                    c.dataset.col === String(colIndex)) {
-                    count++;
-                }
-            }
-            rowIndex = totalRows - this.pinnedBottom + count;
+        else if (target.classList.contains('pinned-top') ||
+            target.classList.contains('pinned-bottom')) {
+            // Pinned cells: aria-rowindex is full-array-relative (1-based)
+            const ariaRow = parseInt(target.getAttribute('aria-rowindex') || '', 10);
+            if (isNaN(ariaRow))
+                return;
+            rowIndex = ariaRow - 1;
         }
         else {
+            // Virtual data cells: aria-rowindex is visible-data-relative (1-based)
             const ariaRow = parseInt(target.getAttribute('aria-rowindex') || '', 10);
             if (isNaN(ariaRow))
                 return;
@@ -986,9 +1054,9 @@ export class TosiTable extends WebComponent {
         if (this._grid) {
             const stickyInfo = this.computeStickyInfo(cols);
             for (const cell of this._grid.querySelectorAll('.col-pinned')) {
-                const colIndex = parseInt(cell.dataset.col, 10);
-                if (!isNaN(colIndex) && stickyInfo[colIndex]) {
-                    const si = stickyInfo[colIndex];
+                const ci = parseInt(cell.getAttribute('aria-colindex') || '', 10) - 1;
+                if (!isNaN(ci) && stickyInfo[ci]) {
+                    const si = stickyInfo[ci];
                     if (si.left != null)
                         cell.style.left = si.left;
                     if (si.right != null)
@@ -1086,10 +1154,24 @@ export class TosiTable extends WebComponent {
     get selectedRows() {
         return this.array.filter((obj) => obj[this.selectedKey]);
     }
+    getCells(itemOrCell) {
+        if (!this._grid)
+            return undefined;
+        const binding = getListBinding(this._grid);
+        if (!binding)
+            return undefined;
+        const item = itemOrCell instanceof Element ? getListItem(itemOrCell) : itemOrCell;
+        if (item == null)
+            return undefined;
+        return binding.itemToElement.get(tosiValue(item));
+    }
+    getItem(cell) {
+        return getListItem(cell);
+    }
     draggedColumn;
     dropColumn = (event) => {
         const target = event.target.closest('.drag-over');
-        const colIndex = parseInt(target.dataset.col, 10);
+        const colIndex = parseInt(target.getAttribute('aria-colindex') || '', 10) - 1;
         const dropped = this.visibleColumns[colIndex];
         const draggedIndex = this.columns.indexOf(this.draggedColumn);
         const droppedIndex = this.columns.indexOf(dropped);
@@ -1151,8 +1233,8 @@ export class TosiTable extends WebComponent {
                     role: 'columnheader',
                     tabindex: -1,
                     ariaSort,
+                    ariaColindex: String(i + 1),
                     style: this.cellStyle(col, si),
-                    dataCol: String(i),
                 }, this.captionSpan({ style: { flex: '1' } }, typeof col.name === 'string' ? col.name : col.prop), menuButton);
             // Apply sticky to custom headerCell
             if (col.headerCell !== undefined) {
@@ -1174,11 +1256,23 @@ export class TosiTable extends WebComponent {
             }
             return cell;
         });
-        const pinnedTopCells = this.buildPinnedCells(pinnedTopData, cols, stickyInfo, 'top', rowHeight);
-        const pinnedBottomCells = this.buildPinnedCells(pinnedBottomData, cols, stickyInfo, 'bottom', rowHeight);
+        const pinnedTopCells = this.buildPinnedCells(pinnedTopData, cols, stickyInfo, 'top', rowHeight, 0);
+        const pinnedBottomCells = this.buildPinnedCells(pinnedBottomData, cols, stickyInfo, 'bottom', rowHeight, this._array.length - this.pinnedBottom);
         // Data cells via listBinding with itemsPerRow
         const selectEnabled = this.select || this.multiple;
         const selectBindingFn = this.selectBinding;
+        const { rowRendered } = this;
+        const lastCol = cols.length - 1;
+        const rowRenderedBinding = rowRendered
+            ? (cell) => {
+                const item = getListItem(cell);
+                if (item != null) {
+                    const cells = this.getCells(item);
+                    if (cells)
+                        rowRendered(item, cells);
+                }
+            }
+            : null;
         const binding = this.rowData.visible.listBinding(({ span: s }, item, colIndex) => {
             const col = cols[colIndex];
             const si = stickyInfo[colIndex];
@@ -1186,14 +1280,16 @@ export class TosiTable extends WebComponent {
             if (col.dataCell != null) {
                 const customCell = col.dataCell(col);
                 this.applyPinnedToCustomCell(customCell, colIndex, si, style);
+                if (rowRenderedBinding && colIndex === lastCol) {
+                    bind(customCell, item, { toDOM: rowRenderedBinding });
+                }
                 return customCell;
             }
             const props = {
                 class: this.cellClasses('td', si),
-                role: 'cell',
+                role: 'gridcell',
                 tabindex: -1,
                 style,
-                dataCol: String(colIndex),
                 bindText: item[col.prop],
             };
             if (selectEnabled) {
@@ -1202,6 +1298,19 @@ export class TosiTable extends WebComponent {
                     binding: { toDOM: selectBindingFn },
                 };
             }
+            // Fire rowRendered on the last cell of each row
+            if (rowRenderedBinding && colIndex === lastCol) {
+                props.bind = {
+                    value: item,
+                    binding: {
+                        toDOM(cell) {
+                            if (selectEnabled)
+                                selectBindingFn(cell, getListItem(cell));
+                            rowRenderedBinding(cell);
+                        },
+                    },
+                };
+            }
             return s(props);
         }, {
             virtual: {