Where should edit state live in a virtualized table?
Explore stable row identity and persistent drafts when editable rows are unmounted or recycled during scrolling, sorting and data refreshes.
Exploration · Principles and possible approaches inspired by a project context.
- Virtualization
- Table editing
- State management
- Stable identity
Related project: Business ERP. Its documented use of virtualized tables motivates this exploration of editable rows; the complete design is not asserted as an existing implementation.
A row can disappear while its draft still matters
Virtualization reduces mounted DOM nodes. It does not make a draft, validation error or save result irrelevant when a row leaves the viewport.
Keeping a draft only inside a cell component can lose it on unmount. Recycling a component for another record can also transfer state to the wrong row.
Use record identity, not array position
Sorting and filtering change indices. Identify a cell by a stable row ID and column key. The virtualizer also needs stable keys to associate measurements and rendered items. TanStack Virtual’s getItemKey illustrates the contract; it is not identified as the ERP project’s library.
Separate editing from the rendering window
Maintain confirmed records by row ID, drafts and errors by row/column identity, and a logical active-cell identity. Mounted controls read and update that state. Scrolling changes which controls exist, not which edits remain valid.
This state can belong to the table’s editing session rather than a global store. Whether it survives navigation is a separate product decision.
Reconcile refreshes with unsaved work
A refresh can update untouched fields while preserving drafts or surfacing conflicts on edited fields. Detecting concurrent writes during save requires a server contract such as version checking; a client-side dirty flag is insufficient.
Deletion, permission changes and failed saves require visible handling. Component unmounting should not silently decide what happens to a user’s work.
Restore focus by logical identity
Keyboard navigation to an unrendered row should first bring it into the virtual window, wait for its control, and then focus it. Before focusing, verify that it is still the active target. A delayed task must not steal focus after a newer move.
Test more than smooth scrolling
Edit, scroll away, return, sort, filter and refresh. Exercise delayed validation, failed saves and deleted records. Each draft must continue to belong to its original record.
Virtualization owns rendering volume. The edit model owns identity and commitment.