How to Show a Change Indicator When a Table Cell Is Edited

Updated July 2026 • 6 min read • By Fahad Murtaza

When five people are editing the same table during the day, it becomes impossible to tell at a glance which cells have been changed in the current session versus which values have been there since the entry was created. TableCrafter's diff badge feature solves this with a small visual indicator that appears on any cell that has been edited since the page loaded. It's a lightweight audit trail built directly into the table without requiring a separate change log page. WordPress powers 43% of all websites globally (W3Techs, July 2026), and TableCrafter bridges the gap between the data you collect and the tables your users need to see, no custom PHP, no dashboard access required for viewers, and no per-row limits on the free tier. The free version on WordPress.org supports CSV, JSON, Google Sheets, and Excel. Pro adds Gravity Forms, Airtable, Notion, WooCommerce, REST APIs, inline cell editing,. Over 60,000 plugins are available on the WordPress.org plugin directory (WordPress.org, 2026).

What the Diff Badge Is?

The diff badge is a small colored dot or tag that appears in the corner of a table cell after that cell's value has been successfully saved via inline editing. It does not appear until the save AJAX call completes successfully, a canceled edit or a failed save leaves no badge. The badge persists for the duration of the current page session. If the user refreshes the page, the badges disappear because the page load is treated as a fresh session start.

By default the badge is a small orange dot in the upper-right corner of the cell, approximately 8px in diameter. The cell's value is still fully visible, the badge occupies the corner of the cell padding area, not the content area. Hovering over the badge shows a tooltip with the text "Edited this session."

How Do I Enable the Diff Badge?

The diff badge is enabled per table in the table builder. Open your table under TableCrafter → Tables → [your table]. In the Display Options panel, find the Show Edit Indicator toggle and turn it on. Save the table.

No shortcode parameter is needed, the badge setting is stored in the table configuration, not the shortcode. The same shortcode that embeds the table will now show badges when cells are edited:

[tablecrafter id="3" edit="true"]

The badge feature works independently of other display options. You can have search, filters, and export active alongside it.

TableCrafter re-fetches this data on each page load by default. If your data source updates infrequently and your site has significant traffic, enable the built-in caching option in the table's Performance tab. This stores the fetched data for a configurable number of minutes and serves it from WordPress transients, reducing API calls to the source and improving page load time for visitors.

How Do What Admins See and How It Helps Work?

Consider a table showing 50 load entries. A dispatcher works through it during their shift, updating statuses and adding notes. An operations manager reviews the table afterward. Without the diff badge, every cell looks the same, there's no way to tell which cells were touched. With the diff badge enabled, the manager sees orange dots on exactly the cells that changed. They can review just those cells rather than reading every value in the table.

Common admin workflows enabled by the diff badge:

• End-of-shift review: Manager opens the table and scans for badges to verify that a dispatcher's work is complete
• Catching accidental edits: A user accidentally edited the wrong cell. The badge makes the accidental change visible immediately rather than surfacing only in a database audit
• Training new users: A supervisor can watch a trainee work on a table and see exactly which cells they edited by looking at badge positions
• Multi-user awareness: When two users have the same table open, badge positions show the current user which cells their colleague has already updated (session-local, not real-time cross-user sync)

How Does CSS Customization Work?

The default orange dot may not fit your site's design. TableCrafter applies the badge through the CSS class .gt-edit-indicator on a ::after pseudo-element of the edited cell. You can override the badge appearance entirely through your theme's stylesheet or the WordPress Additional CSS panel under Appearance → Customize.

Change the Badge Color

.gt-edit-indicator::after {
  background-color: #2563eb; /* blue instead of orange */
}

Change the Badge Size

.gt-edit-indicator::after {
  width: 12px;
  height: 12px;
}

Use a Badge Tag Instead of a Dot

/* Replace the dot with a text label */
.gt-edit-indicator::after {
  content: 'edited';
  font-size: 10px;
  font-weight: 600;
  color: white;
  background-color: #f97316;
  border-radius: 3px;
  padding: 1px 5px;
  width: auto;
  height: auto;
  border-radius: 3px;
  top: 2px;
  right: 2px;
}

Position the Badge at the Bottom of the Cell

.gt-edit-indicator::after {
  top: auto;
  bottom: 2px;
  right: 2px;
}

Highlight the Entire Edited Cell

If you want the edited cell itself, not just a corner dot, to be visually distinct, target the parent class:

.gt-edit-indicator {
  background-color: #fef3c7; /* light amber */
  position: relative;
}

What the Diff Badge Does Not Do?

The diff badge is session-local and display-only. It does not:

• Persist across page reloads or browser sessions
• Show who made the edit (it only shows that an edit occurred in the current session)
• Store the previous value (it does not enable undo)
• Sync across users in real-time (another user loading the same table sees no badges until they make their own edits)

For persistent change logging with user attribution and timestamps, you would need Gravity Forms' entry update history feature or a separate audit log plugin. The diff badge is a lightweight session indicator, not a full audit system.

The configuration you set here applies to every visitor who loads a page containing this table, regardless of whether they are logged in. Role-specific overrides for columns and rows are a separate layer and do not replace these global display settings. Apply global settings first, then add role restrictions as needed for tables that serve multiple user types.

What Are the Next Steps?

The diff badge works best as part of a broader data quality strategy. Combine it with role restrictions (so you know that badges only appear from authorized editors) and validation rules (so badged cells are guaranteed to contain valid data). For a full picture of how these features compose into a data integrity workflow, see the guide on preventing bad data with inline editing in WordPress tables.

Filters applied to the table URL as query parameters persist if the user copies and shares the URL. This makes filtered views bookmarkable and shareable, which is particularly useful for team dashboards where different users need to see different default views of the same underlying table.

This step completes the connection between your data source and the TableCrafter table engine. Once saved, the plugin caches the connection credentials in the WordPress options table and uses them on every subsequent page load. If you update the source configuration later — for example, rotating an API key or changing a sheet URL — return to this step, enter the new value, and save again. The table updates immediately on next load without any shortcode changes.