How the Column Visibility Picker Works on Mobile Devices

Updated July 2026 • 6 min read • By Fahad Murtaza • By Fahad Murtaza

On small screens, data-dense tables become unreadable fast. TableCrafter's column visibility picker solves this by letting your site visitors choose exactly which columns they want to see, hiding the noise and keeping the data that matters. This guide walks through how the picker works, how to configure it, and how to get the best results on phones and tablets. 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. 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 the native Gutenberg block. Elementor is the most popular WordPress page builder, active on over 12 million sites (Elementor, 2025).

What Is the Column Visibility Picker?

The column visibility picker is a Pro feature that renders a toggle panel above (or beside) your table. Each column in your table gets its own labeled checkbox. When a visitor toggles a column off, it collapses instantly without a page reload. When they toggle it back on, it reappears in the same position.

This is not the same as responsive column hiding, where the plugin automatically hides columns based on breakpoints. The visibility picker is user-driven, it gives control to the reader, not the developer. Both mechanisms can be active at the same time, and they complement each other well.

The picker is rendered as part of the table's toolbar, which also houses the search input, bulk action menu, and export buttons. On desktop, the toolbar typically sits in a single row above the table. On mobile, TableCrafter stacks toolbar elements vertically so each control has enough tap target space.

How Do I Enable the Picker in the Table Builder?

To turn on the column visibility picker for a table, open the TableCrafter admin panel and navigate to TableCrafter → Tables. Click the table you want to edit, or create a new one with Add New.

Inside the table builder, scroll to the Display Options tab. You will find a toggle labeled Show Column Visibility Picker. Enable it and save the table. That is the only required step, the picker will now appear for any shortcode that renders this table.

The shortcodes [tablecrafter id="X"], [tablecrafter id="X"], and [tablecrafter id="X"] all point to the same rendering handler, so whichever shortcode variant you are already using will pick up the change automatically.

If you want to override visibility per embed without touching the table's saved settings, you can pass the attribute directly on the shortcode:

[tablecrafter id="12" column_picker="true"]

Setting column_picker="false" hides the picker for that specific embed even when the table-level setting has it enabled. This is handy when the same table is embedded in multiple places and only one location needs the picker.

How It Behaves on Mobile?

TableCrafter detects viewport width via CSS media queries rather than JavaScript user-agent sniffing, which means behavior is driven by the actual available space rather than device type. Below 768px the table switches to its mobile layout.

In the mobile layout, the column visibility picker renders as a collapsible panel. A single button labeled Columns (with a column icon) sits in the toolbar. Tapping it expands a dropdown list of toggles, one per column. Each toggle has a generous touch target so it is easy to tap accurately on a phone screen.

When a visitor hides a column on mobile, the change is local to their session, it is stored in localStorage keyed to the table ID. If they navigate away and return, their preference is restored. This makes the picker genuinely useful rather than just decorative: a driver checking a load table on their phone can hide the internal notes column once and it stays hidden on every return visit.

On tablets (768px–1024px), TableCrafter uses an intermediate layout. The picker renders as an inline button row rather than a collapsed dropdown, giving users a quick visual of which columns are active. On screens above 1024px the full picker panel is always visible in the toolbar.

How Do I Configure Default Hidden Columns?

You can set which columns are hidden by default when a visitor loads the table for the first time. In the table builder, open the Columns tab. Each column row has a Hidden by Default checkbox. Columns marked hidden will be excluded from the initial render but will appear in the visibility picker, so visitors can toggle them on if they want.

A common pattern for mobile-optimized tables is to configure two or three core columns as visible by default and mark the remaining detail columns as hidden by default. The table loads fast on mobile, shows the critical data, and still gives users the option to expand into the full dataset.

Default hidden columns are respected only on the first load. Once a visitor has interacted with the picker, their localStorage preference takes precedence over the table's default. Clearing browser storage or visiting from a new browser will reset back to the configured defaults.

How Does Interaction with Role-Based Column Permissions Work?

TableCrafter Pro supports column-level role-based permissions, and the column visibility picker respects them correctly. If a column is restricted so that only users with the administrator role can see it, that column simply does not appear in the picker for lower-privilege users. They cannot toggle it on because it is not listed as an option.

This is an important distinction from just hiding the column visually. The data for restricted columns is not sent to the browser at all for unauthorized users, the AJAX handler at wp-admin/admin-ajax.php strips restricted columns from the JSON payload before it is returned. So even if a technically inclined visitor inspected the network response, they would not find the restricted column data.

The picker only surfaces columns the current user is permitted to see. If a logged-in driver visits the load table, they will see driver-facing columns in the picker. If an administrator visits, they will see all columns including internal management fields. Each role gets a picker that matches their permission scope.

How Does Troubleshooting Common Issues Work?

A few issues come up regularly when setting up the column visibility picker on mobile.

The picker button does not appear. Confirm that your license is active under TableCrafter → Settings → License. The picker is Pro-only, so an inactive or expired license will silently skip rendering it. Also check that the table was saved after enabling the picker toggle, an unsaved change will not take effect.

Column preferences are not persisting between visits. This is usually a browser privacy setting. Safari in private mode, Firefox with strict tracking protection, and some cookie-blocking extensions prevent writes to localStorage. TableCrafter falls back gracefully by re-reading the table's default hidden columns on each load when storage is unavailable.

The picker dropdown overlaps content on mobile. The picker panel uses z-index and absolute positioning. If your theme or page builder applies a high z-index to floating elements (Elementor sticky headers are a common culprit), the picker can render behind other elements. You can fix this by adding a small CSS rule targeting .tc-column-picker-panel to set a higher z-index value, or by adjusting the conflicting element in your theme.

The picker shows columns that should be hidden for the current role. Clear the localStorage entry for the table by opening the browser console and running localStorage.removeItem('tc_cols_12') (replacing 12 with your table ID). Stale storage from a previous session or role can cause a mismatch. TableCrafter does not automatically invalidate stored preferences when permissions change.