Column Visibility Picker

By Fahad Murtaza • Updated July 2026

Give visitors control over which columns they see. A single checkbox in Display Options adds a Columns button to the table toolbar, users click it to show or hide any column, and their choices are remembered in the browser so the layout is exactly as they left it on their next visit.

What it does and why it matters

Tables that serve multiple audiences, drivers checking their own loads, dispatchers reviewing the full fleet, admins auditing payroll, often contain more columns than any single user needs at once. Scrolling past irrelevant columns is friction. Asking your developer to build a custom filtered view for each role is expensive.

The Column Visibility Picker solves this without server-side code or database storage. Each visitor independently chooses which columns to show. The selection is stored in localStorage keyed to that specific table, so it persists through page reloads, tab closes, and browser restarts, right up until the visitor clears their browser data or you reset the table configuration.

Because everything runs in the browser, there are no extra database queries, no AJAX calls on toggle, and no session management overhead. It is one of the most cost-effective personalization features you can add to a public-facing or internal data table.

Good candidates for this feature include:

• Load tracking tables with 10+ columns where drivers only care about their route and status
• Admin dashboards where finance staff want payment fields visible but dispatchers do not
• Directory tables where different visitors prioritize different contact fields
• Team views shared across departments with different information needs

Enabling it in the table builder

Open WordPress Admin > TableCrafter, then click the table you want to edit (or create a new one). In the builder, navigate to the Display Options tab. Look for the Column visibility picker checkbox and enable it.

1. Go to WordPress Admin > TableCrafter and open your table.
2. Click the Display Options tab in the builder panel.
3. Check Column visibility picker.
4. Save the table configuration.

No additional settings are required. The picker automatically discovers every column you have configured in the Columns tab, you do not need to register them separately.

Once saved, visit the page containing your shortcode. The table toolbar now shows a Columns button alongside the search box and any filter controls.

[tablecrafter id="42"]

The id value is the table ID shown in the TableCrafter admin list. The Columns button appears automatically, no shortcode attribute is needed to activate it.

User experience walkthrough

When a visitor lands on a page with the picker enabled, they see the full table with all columns visible by default. In the toolbar, a Columns button sits next to the search field.

Opening the picker

Clicking Columns opens a dropdown checklist. Every column in the table appears as a labeled checkbox, pre-checked. The list uses the column labels you set in the table builder, not raw Gravity Forms field IDs, so it reads naturally to non-technical visitors.

Hiding a column

Unchecking a column immediately hides both the <th> header cell and every <td> data cell in that column. The table reflows to fill the available width. There is no page reload and no spinner, the change is instantaneous.

Restoring a column

Re-checking the column in the dropdown brings it back in its original position. Column order is always preserved; the picker only toggles visibility, it does not reorder columns. (For column reordering, see Column Management.)

Closing the picker

Clicking anywhere outside the dropdown closes it. The table retains the current visibility state. Visitors can reopen the picker at any time to adjust their layout.

localStorage persistence

When a visitor unchecks or re-checks a column, the current hidden-column list is immediately written to localStorage. On the next page load, TableCrafter reads this stored list and hides the appropriate columns before the table is painted, so there is no visible flicker.

Storage key format

The localStorage key is derived from the table ID, so preferences for different tables never collide. The key pattern is:

gt_col_visibility_{tableId}

For a table with ID 42, the key is gt_col_visibility_42. The value is a JSON array of hidden column indices (zero-based), for example:

// localStorage value for table 42 with columns 2 and 4 hidden
"gt_col_visibility_42": "[2,4]"

Scope and isolation

localStorage is scoped to the browser origin (yourdomain.com), so preferences set on one device do not transfer to another. Each visitor's layout is independent. Two people using the same computer and same browser profile will share the stored preference, which is usually the correct behavior for shared admin machines.

Resetting preferences

Visitors can restore all columns by re-checking everything in the dropdown. They can also clear the preference by clearing site data in their browser settings. From a developer perspective, you can reset the key programmatically:

// Remove visibility preferences for a specific table
localStorage.removeItem('gt_col_visibility_42');

// Or clear all TableCrafter visibility preferences
Object.keys(localStorage)
  .filter(k => k.startsWith('gt_col_visibility_'))
  .forEach(k => localStorage.removeItem(k));

Interaction with export and print

Hidden columns are excluded from all export outputs, Excel, PDF, CSV, and clipboard. What the visitor sees in the table is exactly what lands in the export file. This is intentional: if a dispatcher hides the internal note column before exporting a load report, the internal notes stay out of the export.

Excel and CSV export

The export handler reads the current DOM visibility state at the moment the visitor clicks the export button. Any column marked hidden by the picker is skipped. Column order in the export matches the visible column order in the table.

PDF export

PDF generation similarly respects the picker state. Only visible columns are included in the generated document. If you need to guarantee that certain columns always appear in PDF exports regardless of visitor preferences, consider using Column Role Visibility (Pro) to enforce column presence at the server level for specific roles.

Print view

TableCrafter's print stylesheet also honors the picker state. Hidden columns are suppressed via CSS so they do not appear in printed output. This means a driver can hide columns they do not need, then print a clean single-page load manifest without extra columns crowding the layout.

Interactions with other table features

Column reordering

If you have column drag-and-drop reordering enabled (configured separately in the table builder), the reorder and visibility features are independent. A visitor can reorder columns and then hide some of them. Both preferences are stored separately in localStorage and applied in sequence on page load.

Responsive card view

On small screens, TableCrafter can switch to a card layout where each row becomes a card and field labels appear inline. The Column Visibility Picker still applies in card view: hidden columns are suppressed from each card's label-value pairs. See Responsive & Mobile for card view configuration.

Auto-refresh

When Auto-Refresh is active, the table re-renders on each data fetch cycle. The picker state is preserved across refreshes, newly fetched rows respect the current visibility settings without requiring the visitor to re-apply their preferences.

Known issues and version notes