DI01 Basic Indicator

Edit cells to see the orange tint, corner triangle and dirty row stripe — toggle the indicator on/off

Live Demo

Click any cell, change the value, then press Enter or Tab. The cell tints orange with a corner triangle; the row number gets an orange left stripe. Toggling the switch hides indicators without losing the underlying drafts.

Code
Toggling the dirty indicator 
 
 
Description
 
What gets marked dirty
 
  • A cell is dirty when its committed value differs from the original item value.
    •  
  • A row is dirty as soon as any cell in it has been edited (even if the user reverted the value manually).
 
Drafts vs visuals
 
isDirtyIndicatorVisible only controls the visuals.
						The grid still tracks drafts internally — toggle it off, then back on, and the indicators reappear unchanged.
 
DI02 Save / Discard Workflow
 
Read drafts, commit them, or roll them back per-row or all at once
 
Live Demo
 
  
 
 0 rows dirty,
							0 cells dirty
  
Edit a few cells, then click Save All or Discard All.
 
Code
 
Save / Discard with the draft API 
 
 
 
Description
 
The draft API
 
  • getDraftRowIndices() — indices of all rows with pending edits.
    •  
  • getRowDraft(i) — the draft row object for index i, or undefined.
    •  
  • isRowDirty(i) / isCellDirty(i, field) — boolean checks.
    •  
  • discardRowDraft(i) / discardAllDrafts() — roll back.
 
How "save" works
 
The grid never mutates items directly — every commit goes into a draft. To persist, you read the drafts, push them to your backend, then update items and call discardAllDrafts() to clear the draft state.
 
Stat refresh
 
Recompute counts inside onrowchange and after each Save/Discard call. The grid does not expose a "drafts changed" event — every mutation flows through these touchpoints.
 
DI03 Custom Theming
 
Re-skin the indicator with three CSS custom properties
 
Live Demo
 
 
Same component as DI01, but the indicator color, tint and triangle size are overridden by scoped CSS.
 
Code
 
CSS variables for the indicator 
 
 
 
Description
 
Three knobs
 
  • --wg-dirty-indicator-color — colour of the corner triangle and the row-number stripe.
    •  
  • --wg-dirty-cell-bg — full-cell background tint. Use a low-alpha rgba so cell text stays readable.
    •  
  • --wg-dirty-indicator-size — edge length of the triangle. Defaults to 6px.
 
Where to set them
 
Anywhere up the cascade — on :root, on web-grid, on a parent container.
						The grid uses CSS custom properties that pierce shadow DOM, so a host-level override is enough.
 
Dark mode
 
The grid ships dark-mode defaults (#ffa940 on rgba(255, 169, 64, 0.12)).
						Override via the same variables under your data-theme="dark" selector.
 
Dirty / Draft API reference
 
MemberTypeDescription
isDirtyIndicatorVisiblebooleanShow/hide the visuals. Drafts are preserved either way. Default true.
isCellDirty(rowIndex, field)(number, string) => booleanCell value differs from the original.
isRowDirty(rowIndex)(number) => booleanAny draft exists for that row.
getDraftRowIndices()() => number[]Indices of all rows with pending edits.
getRowDraft(rowIndex)(number) => T | undefinedThe draft row object — merge into your items to persist.
discardRowDraft(rowIndex)(number) => voidRoll back a single row.
discardAllDrafts()() => voidClear every draft.