Inline Cell Diff Badge

By Fahad Murtaza • Updated July 2026

After saving a cell edit, TableCrafter shows a small muted badge next to the updated value that reads ← was: previous value. It fades out automatically after 3 seconds, just long enough to confirm you saved the right thing, without cluttering the table.

What the diff badge shows

The moment a cell save completes successfully, the cell renders its new value and a secondary badge appears inline to its right. The badge always follows this format:

← was: Driver A

The badge inherits the cell's line height and sits flush with the text so it does not shift surrounding columns. It uses a muted color drawn from TableCrafter's CSS custom property --tc-diff-muted (defaults to rgba(0,0,0,0.38) in light mode, rgba(255,255,255,0.38) in dark mode), so it is readable without competing with the new value for attention.

The badge only renders when the value actually changed. If you click a cell, leave the input unchanged, and save, no badge appears. This keeps the display clean when users accidentally trigger the edit mode.

What counts as "previous value"

The previous value is whatever was last saved to the Gravity Forms entry, the value fetched when the table row loaded (or last refreshed). For fields that store a raw value and display a formatted label, such as a dropdown or radio button, the badge shows the display label, not the stored key. This matches what the user saw in the cell before editing, which is the most useful reference.

Why 3 seconds

The 3-second duration is deliberate. It is long enough to read a short value comfortably, including a glance away and back, but short enough that the badge never accumulates across multiple rapid edits. In usability testing on data-entry workflows, badge durations under 2 seconds were frequently missed, while durations above 5 seconds left the table feeling cluttered when several rows were edited in succession.

The fade is a CSS transition, not a JavaScript timeout that removes the element abruptly. The element opacity transitions from 1 to 0 over 400ms, which begins at the 2.6-second mark, making the total visible window just over 3 seconds. The element is then removed from the DOM after the transition completes so it does not accumulate hidden nodes during long editing sessions.

Bulk Fill diff preview Pro

The same "see what you are about to change" principle extends to the Bulk Fill modal in TableCrafter Pro. When you open the Bulk Fill modal and start typing a value, the Apply button updates dynamically to preview both the scope and the value you are about to write:

Apply to 14 rows → 'In Transit'

This live preview updates on every keystroke. If you clear the value field, the button reverts to the plain Apply label. On the free tier, or when the value field is empty, the button always shows plain Apply.

The scope count ("14 rows") reflects the number of rows currently selected via checkboxes or, if no rows are checked, the full visible row set after any active filters are applied. This means the preview is always accurate to what will actually be updated, not the total entry count for the form.

Use cases

Load tracking and dispatch tables

When dispatchers update a driver assignment or load status directly in the table, the diff badge confirms the previous value at a glance. If a dispatcher changes a "Driver" cell from Driver A to Driver B, the badge reads ← was: Driver A for 3 seconds. This eliminates the need to open the full Gravity Forms entry to verify the change, which is especially useful when editing multiple rows in a session.

Directory and membership tables

For sites using Gravity Forms as a directory backend, contact directories, member lists, vendor registries, editors frequently update fields like phone numbers, email addresses, or status values. The diff badge acts as a built-in sanity check: if the badge shows an unexpected previous value, the editor knows immediately that they edited the wrong row rather than navigating away and discovering the error later.

Multi-step data entry workflows

When several people enter or verify data in a shared table, the 3-second badge gives each operator a brief window to catch a typo or paste error before moving on. Combined with Inline Edit Validation, which can block a save entirely if the value fails a rule, the diff badge handles the softer case: the save succeeded, but the operator wants to confirm visually that the right value landed.

Customizing the fade timing via CSS

The badge fade is controlled entirely by CSS custom properties and a transition declaration on the .gt-diff-badge element. You can override the timing in your theme or in the Custom CSS field inside the TableCrafter table builder without touching plugin files.

Extend the badge to 6 seconds

/* Add to Appearance > Customize > Additional CSS
   or in the table builder's Custom CSS field */
.gt-diff-badge {
  animation-duration: 6s;
}

Make the badge persist until the next edit

.gt-diff-badge {
  animation: none;
  opacity: 1;
}

With animation: none, the badge will stay visible until the cell is edited again, at which point it is replaced by the new badge for the latest change. This can be useful in audit-focused workflows where you always want the previous value visible as a reference.

Adjust the badge color

.gt-diff-badge {
  color: var(--tc-diff-muted, rgba(0,0,0,0.38));
}

/* Or override the CSS variable directly: */
:root {
  --tc-diff-muted: #9ca3af;
}

Behavior reference