precogly / precogly/precogly

Canvas table component

Open
#520 4 comments 0 reactions 1 assignee Claimed by @AlvinKuruvilla View on GitHub
enhancement from-sync frontend only
Dominant language
TypeScript
Stars
155
Forks
37
Avg merge
1d 17h
Merged PRs (30d)
82

Description

A table node on the DFD canvas (`frontend/src/features/dfd-editor/components/nodes/TableNode.tsx`), registered as the `table` node type alongside the sticky note. It carries no DFD semantics: it annotates a diagram and is excluded from threat analysis.

Initial implementation is on `feat/canvas-table-node`.

## Done

- [x] `table` node type, registered in all three node registries
- [x] Text cells, double-click to edit, Tab / Shift-Tab / Enter to move between them
- [x] Column and row resize by dragging dividers, including the outer edges
- [x] Grid picker on the palette entry — hover to size, plus an input mode for sizes the 8×8 grid can't express
- [x] Row and column grips along the top and left edges, click to select
- [x] Right-click any cell or grip: insert row above/below, insert column left/right, delete row, delete column
- [x] Delete key removes the selected row or column
- [x] Corner handles scale the whole table; shift constrains to a uniform factor and scales cell text with it
- [x] Column/row count steppers and a header-row toggle in the edit panel
- [x] Renders in PNG and SVG export, and in the read-only viewer

## Planned

Ordered by evidence rather than by effort. The first two are what it takes to reproduce a table like the ones people build in Miro today.

- [ ] **Text wrapping in cells.** Currently clipped with an ellipsis. Follow Miro: a row's height becomes a *minimum* that content can grow past, so dragging a divider sets a floor rather than a fixed height.
- [ ] **Cell fill colour.** Only the grey header-row flag exists now. Needed for tinting header cells or marking a column.
- [ ] **Paste and copy tabular data** (markdown / CSV / TSV).
- [ ] **Merged cells.** Miro shipped this as a headline feature; jgraph/drawio#1650 has an issue for it.
- [ ] **Drag-to-reorder rows and columns** from the grips, which already exist as selection targets.
- [ ] **Multi-cell selection** and operations across a range.
- [ ] **Per-cell text alignment.**

File individual issues for these as they get picked up, rather than up front — this list is the context, not eight stubs.

## Open design questions

**Merged cells vs. cells holding diagram nodes.** These interact, and the data model already leans one way: a cell is `{ text }` rather than a bare string specifically so it can gain a field pointing at a child node later, giving draw.io-style container tables where a Process sits in a cell and edges connect to it. Merged cells want a span on the same object. Worth deciding together before either is built, since a cell that both spans and contains is a different thing again.

**Unbounded size.** There is deliberately no cap on rows or columns. Every cell is a DOM node with no virtualization, so a 20×200 table is 4000 elements the canvas walks on every pan and zoom. If large tables turn out to be common, the fix is virtualizing the cell grid rather than reintroducing a limit.

## Known gap

None of the implementation has been exercised in a browser yet — it is compile-verified only. The interaction surface is large (grips, context menu, four corner drags, shift-scaling, zoom-corrected divider drags), so it needs a pass before more is built on top.

Design rationale for what is already built lives in the commit bodies and code comments on the branch rather than here, so there is one copy to keep true.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.