How Inline Editing Works on Mobile in TableCrafter

Updated July 2026 • 6 min read • By Fahad Murtaza

A field operations team using tablets on a job site shouldn't have to deal with a broken editing experience. TableCrafter's inline editing is designed to work on touch devices, tap to edit, soft keyboard support, responsive column collapse, but mobile has enough quirks that it's worth understanding the specifics before you deploy an editable table to a mobile-first audience. 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, export to CSV/PDF, role-based column visibility, and auto-refresh. Every table embeds on any page with a [tablecrafter] shortcode or. Notion reached 30 million registered users in 2023 (Notion, 2023).

How Does Touch-Tap to Enter Edit Mode Work?

On touch devices, a single tap on an editable cell opens it for editing. There is no hover state on mobile (touch devices don't have a cursor), so the visual cue that a cell is editable is provided by a subtle bottom border on editable cells rather than the hover highlight that desktop users see.

When a cell is tapped, the native soft keyboard appears automatically because the cell's input field receives focus. TableCrafter calls input.focus() immediately after rendering the edit widget, which triggers the keyboard on iOS and Android without requiring a second tap.

How Do Soft Keyboard and Cell Visibility Work?

When the soft keyboard appears on mobile, it covers the bottom portion of the screen. If the cell being edited is near the bottom of the table, the keyboard may cover it entirely, the user is typing blind. TableCrafter handles this by scrolling the edited cell into the visible area above the keyboard using scrollIntoView({ behavior: 'smooth', block: 'center' }) after the keyboard appears.

In practice, this scroll happens within about 300ms of the keyboard appearing. On most devices it's smooth enough to be unobtrusive. On older Android devices with slow scroll performance, there may be a brief flash. If this is a concern for your audience, keep editable tables short (fewer than 20 rows) or implement server-side pagination to keep the viewport content minimal.

This configuration interacts with any caching or CDN layer active on your WordPress installation. If you use WP Rocket, LiteSpeed Cache, or a CDN such as Cloudflare, flush the page cache after making this change to ensure the updated configuration is reflected in the cached HTML served to visitors. TableCrafter's server-side output is regenerated on the next uncached request.

How Does Confirming an Edit on Mobile Work?

The mobile equivalents of the desktop keyboard shortcuts:

• Tap the Save button: TableCrafter renders a small checkmark button adjacent to the open input on mobile. Tapping it confirms the edit and dismisses the keyboard.
• Tap the Cancel button: An X button adjacent to the input cancels the edit and restores the original value.
• Done button on the soft keyboard: On iOS, the "Done" key on the soft keyboard confirms the edit (equivalent to Enter on desktop). On Android, the "Return" key behavior varies by keyboard app, Google Keyboard and Samsung Keyboard both treat it as a confirm, but this is not guaranteed for all keyboard apps.
• Tab on external keyboard: If the user has a Bluetooth keyboard connected, Tab and Shift+Tab work identically to desktop behavior.

How Do Responsive Column Collapse and Editable Columns Work?

TableCrafter's responsive behavior on narrow screens collapses columns into a stacked card view when the table is too wide to display horizontally. In card view, each row expands into a vertical list of label-value pairs instead of a horizontal row of cells. Editable columns remain editable in card view, tapping the value in a card label-value pair opens the same edit widget that would appear in the horizontal table cell.

To configure which columns collapse first (and ensure your most important editable columns stay visible on narrow screens), go to the column settings in the table builder and set the Priority field. Priority 1 columns are always visible. Priority 2 columns collapse at tablet-width breakpoints. Priority 3 columns collapse at phone-width breakpoints.

A practical configuration for a mobile-first operations table:

• Priority 1 (always visible): Entry name/ID, Status (editable)
• Priority 2 (visible on tablet, collapses on phone): Assigned To (editable), Date
• Priority 3 (collapses on all mobile): Notes, Reference ID, Created By

This ensures that the most frequently edited column (Status) is always accessible by tap on the smallest screen sizes.

How Does Dropdown Fields on Mobile Work?

Choice fields (Gravity Forms Select, Radio Button, and Drop Down field types) render as a native <select> element inside the table cell on mobile. This triggers the native iOS or Android picker wheel rather than a custom dropdown widget. The native picker is familiar to mobile users and supports the full option list without any custom scroll handling.

The downside is that the native picker's appearance cannot be styled to match your table's design. If visual consistency is important, contact TableCrafter support about the custom dropdown option, which renders a custom-styled widget instead of the native select element. The custom widget has better style control but requires careful testing on different mobile browsers.

After completing this step, verify the result by viewing the page as a logged-out visitor in an incognito window. This confirms the table behaves correctly for public visitors rather than reflecting admin-level permissions that may hide configuration issues during initial setup. Check both the rendered output and the browser console for any JavaScript errors.

How Do Number Fields and Numeric Keyboards Work?

TableCrafter renders number fields with inputmode="decimal" on mobile, which prompts most mobile browsers to show the numeric keyboard by default. Users don't have to switch keyboard modes to enter a price, quantity, or ID value. If your number field requires only integers (no decimal point), setting the field to the GF Number type with integer validation will prompt the numeric-only keyboard without the decimal key on iOS.

How Does Testing Your Mobile Edit Experience Work?

Before deploying an editable table to mobile users, test these scenarios on actual devices (not just browser DevTools device emulation):

The column mapping you define here is stored as a JSON configuration in the WordPress database. You can export this configuration using the TableCrafter export tool and import it to another table or another site. This is useful when replicating a table layout across multiple pages or when migrating a table to a staging environment for testing before going live.

1. Tap an editable cell near the bottom of the screen. Does the keyboard scroll the cell into view?
2. Edit a cell and tap Save. Does the value update and the keyboard dismiss?
3. Edit a cell and tap Cancel. Does the original value restore?
4. Tap a dropdown cell. Does the native picker appear with all options?
5. Rotate to landscape orientation while a cell is open. Does the edit widget reposition correctly?
6. Test on both iOS Safari and Android Chrome, they have meaningful differences in soft keyboard behavior.

What Are the Next Steps?

With mobile editing working correctly, consider the keyboard shortcut guide for users who connect a Bluetooth keyboard to their tablet, or the role-gated editing guide if your mobile users have different permission levels than your desktop users. For teams working entirely on phones, keep table column counts low and prioritize the highest-value editable columns in the visible priority tiers.