How to Set Up Data Bars in TableCrafter in 2 Minutes

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

Data bars turn raw numeric columns into instant visual indicators, no charting library, no custom code, no shortcode gymnastics. If you have a TableCrafter Pro table already displaying numbers, you are two minutes away from inline bar charts that make trends scannable at a glance. 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. WooCommerce powers over 6 million live online stores (BuiltWith, 2026).

What Data Bars Actually Do?

A data bar is a proportional horizontal bar rendered directly inside a table cell alongside the numeric value. TableCrafter calculates each bar's width relative to the column's min and max values across all visible rows, so the longest bar always fills the cell and every other bar scales accordingly.

They are purely a display layer. The underlying Gravity Forms entry data is untouched, data bars are a rendering decision made at output time, not a stored computed field. That means you can toggle them on or off without any data migration, and they respect your existing filters, pagination, and role-based column visibility settings.

If this step produces unexpected output, check the source data directly in the connected system. TableCrafter passes data through without modification — if a cell displays an unexpected value, the source record contains that value. Use the TableCrafter debug log (Settings > Advanced > Debug Mode) to trace the exact query sent to the source and the raw response received, which narrows the diagnosis to either a source-side or rendering-side issue.

What Do I Need Before Getting Started?

Check these three things before opening the table builder:

• A Pro license activated, data bars will not appear in the column settings on a free install. Confirm under TableCrafter → Settings that your license is active.
• A numeric source field, the column you want to visualize must map to a Gravity Forms number field, calculation field, or a numeric value from another supported data source (Google Sheets, REST API, Airtable, WooCommerce). Text fields rendered as numbers will not trigger the bar option.
• An existing table, if you have not created one yet, go to TableCrafter → Tables → Add New and connect it to your form or data source first. The shortcodes [tablecrafter id="X"], [tablecrafter id="X"], and [tablecrafter id="X"] all work interchangeably once the table is saved.

How Do I Enable Data Bars: Step-by-Step?

The entire setup lives inside the column configuration panel. There is no separate "Charts" menu or widget to install.

1. Navigate to TableCrafter → Tables and click Edit on the table you want to update.
2. In the table builder, locate the numeric column in your column list. Click the column row to expand its settings panel.
3. Find the Display Type (or Cell Format) dropdown. Change it from Plain Text to Data Bar.
4. Optional, set a Min Value and Max Value manually if you want a fixed scale instead of a dynamic one derived from the current result set. A fixed scale is useful when comparing tables side by side or when outliers would otherwise compress most bars into a thin sliver.
5. Optional, pick a Bar Color. TableCrafter ships with a color picker that accepts hex values, so you can match your brand palette or use a traffic-light scheme (green for on-target, red for over-budget, etc.).
6. Click Save Table. Changes take effect immediately on any page embedding the shortcode, no cache flush required on the plugin side, though if you run a full-page caching layer like NitroPack or WP Rocket you may want to purge that page manually.

How Does Combining Data Bars with Other Pro Features Work?

Data bars are most useful when layered with other TableCrafter Pro features rather than used in isolation.

Status badges alongside data bars, put the data bar on a revenue or quantity column and add a status badge on a separate status column. The badge maps text values (like "Pending", "Shipped", "Cancelled") to colors. Together, a row communicates both magnitude and state without the user needing to read every cell.

Advanced filters + data bars, TableCrafter's advanced filter panel lets users narrow rows by date range, dropdown value, or numeric threshold. Because bars scale to the visible result set, filtering to a subset automatically rescales the bars. Users can filter to a region or time period and immediately see relative performance within that subset.

Inline editing + data bars, Pro's inline editing lets users click a cell and update the underlying Gravity Forms entry via GFAPI::update_entry_field(). After saving an edit, the table refreshes and bar widths recalculate. This makes TableCrafter practical for lightweight data entry workflows where visual feedback on the updated value matters, think budget tracking, inventory counts, or KPI logs.

Auto-refresh + data bars, if your table pulls live data (order counts, form submission tallies, WooCommerce revenue), enable the AJAX auto-refresh under the table's settings and set your polling interval. The bars will redraw each cycle, giving you a live dashboard feel without a page reload.

Role-based column visibility, if certain user roles should not see the numeric column at all, you can hide the entire column (and therefore its data bar) for those roles via the column-level permission settings. The Pro permission system operates at both the table level and the column level.

What Is Troubleshooting: Data Bars Not Showing?

If you saved the table but the bars are not appearing on the frontend, work through this checklist:

• License not active, visit TableCrafter → Settings and confirm the Pro license status. A free install silently falls back to plain text display even if the column setting was saved as Data Bar.
• Column maps to a text field, open the Gravity Forms form editor and verify the source field type is Number or a calculation. If it is a Single Line Text field that happens to contain digits, TableCrafter cannot guarantee numeric parsing and will not render bars.
• All rows have the same value, if every row returns the same number, the dynamic min/max are equal and the bar width calculation produces 100% for every cell (or 0%, depending on implementation). Set an explicit Min Value slightly below the expected range to avoid this edge case.
• Page cache serving stale HTML, purge the page from your caching plugin after saving the table configuration. TableCrafter's own output is not cached by the plugin, but a full-page cache layer will serve the pre-change HTML until purged.
• Column is hidden for the current user's role, check the column-level role permissions. If the column is restricted, logged-out visitors or lower-privilege users will not see it at all.

How Does Embedding the Table on a Page Work?

Once data bars are configured, embed your table anywhere WordPress accepts shortcodes: pages, posts, Elementor text widgets, Gutenberg shortcode blocks, and most third-party page builders.

[tablecrafter id="42"]

All three shortcode aliases resolve to the same renderer, so existing embeds do not need to be updated when you change display settings in the admin:

[tablecrafter id="42"]
[tablecrafter id="42"]
[tablecrafter id="42"]

For pages where you want the table to initialize with a specific filter pre-applied (useful for per-department dashboards sharing one table config), you can pass URL parameters that TableCrafter's filter system will pick up on load. Data bars will still render correctly against the filtered result set.

The shortcode accepts all column and filter settings defined in the table builder as defaults, but you can override individual parameters inline. For example, `[tablecrafter id="1" per_page="25"]` overrides the default rows-per-page setting for this specific embed without changing the saved table configuration. This lets you reuse one table definition across multiple pages with different display requirements.