How to Style Data Bars with Custom CSS in TableCrafter

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

TableCrafter's data bars feature turns raw numeric columns into inline bar charts that let readers scan performance at a glance, without leaving the table. This guide walks through enabling data bars in the table builder, understanding the generated markup, and writing targeted CSS to match your brand or client's design system. 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. Shortcode embeds remain compatible with 100% of WordPress themes regardless of page builder (WordPress Codex).

What Are Data Bars and Why Use Them?

Data bars are a conditional-formatting technique borrowed from spreadsheet tools like Excel and Google Sheets. Instead of displaying a bare number, each cell renders a filled bar whose width is proportional to the cell's value relative to the column's range. A driver logging 9,500 miles in a month sees a nearly full bar next to their entry, while a 1,200-mile entry gets a narrow sliver.

The visual encoding dramatically reduces the cognitive load of scanning a table with hundreds of rows. Stakeholders who need a quick read on relative performance, load counts, invoice totals, completion percentages, can do so without sorting or filtering first.

How Do I Enable Data Bars in the Table Builder?

Data bars are configured per-column inside the TableCrafter admin. Navigate to TableCrafter → Tables, open an existing table or click Add New, and locate the column you want to enhance.

1. In the column row, expand the Display options panel.
2. Set the Cell Format dropdown to Data Bar.
3. Optionally set a Min Value and Max Value to anchor the scale. If left blank, TableCrafter calculates the range dynamically from the current dataset on each AJAX fetch.
4. Choose a Bar Color using the color picker. This writes an inline style attribute on the bar element, which you can override with CSS.
5. Save the table. The shortcode [tablecrafter id="X"] (also accepts [tablecrafter id="X"] and [tablecrafter id="X"]) immediately reflects the change on the frontend.

How Does Understanding the Generated Markup Work?

Before writing CSS, you need to know what TableCrafter actually renders. Inspecting a data bar cell in your browser's DevTools reveals a structure like this:

<td class="gt-cell gt-cell--data-bar" data-column="total_miles" data-value="9500">
  <div class="gt-data-bar-wrapper">
    <div class="gt-data-bar" style="width: 87%; background-color: #4a90e2;"></div>
    <span class="gt-data-bar-label">9,500</span>
  </div>
</td>

Key classes to target:

• .gt-cell--data-bar, the table cell itself; useful for controlling cell height and overflow.
• .gt-data-bar-wrapper, the positioning container; it is position: relative by default so the bar sits behind the label.
• .gt-data-bar, the colored fill element; its width is set inline, but background-color, border-radius, height, and transitions are fully overridable.
• .gt-data-bar-label, the numeric text rendered on top of the bar.

The data-value and data-column attributes on the <td> make it straightforward to write attribute-targeted CSS or JavaScript for more advanced per-column theming.

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.

What Is Writing Custom CSS: Common Recipes?

Add your CSS to your theme's Appearance → Customize → Additional CSS panel, or to a site-specific stylesheet. Using a specificity level just above TableCrafter's defaults (a single extra class selector) is usually sufficient, avoid !important unless you are fighting a page-builder that inlines everything.

Change bar color per column

Use the data-column attribute on the cell to scope color changes without touching other columns:

/* Green bars for the "completion_rate" column */
.gt-cell--data-bar[data-column="completion_rate"] .gt-data-bar {
  background-color: #2e7d32;
}

/* Amber bars for "open_invoices" */
.gt-cell--data-bar[data-column="open_invoices"] .gt-data-bar {
  background-color: #f57c00;
}

Add rounded corners and a smooth transition

.gt-data-bar {
  border-radius: 3px;
  transition: width 0.4s ease;
  height: 8px; /* slimmer bar */
}

The transition fires when TableCrafter re-renders rows after an inline edit or auto-refresh, giving users a satisfying animated feedback that a value changed.

Stack the label below the bar instead of overlaying it

.gt-data-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gt-data-bar-label {
  position: static; /* remove any absolute positioning */
  font-size: 0.75rem;
  color: #555;
}

Gradient fills

.gt-data-bar {
  background: linear-gradient(to right, #1565c0, #42a5f5);
  background-color: transparent; /* override inline style */
}

Dark-mode support

@media (prefers-color-scheme: dark) {
  .gt-data-bar {
    background-color: #64b5f6;
    opacity: 0.85;
  }
  .gt-data-bar-label {
    color: #e0e0e0;
  }
}

How Does Combining Data Bars with Other Pro Display Features Work?

Data bars pair naturally with two other Pro display features: status badges and inline editing.

Status badges on adjacent columns, A "Status" column can use TableCrafter's badge mapping (text → color) while a numeric "Revenue" column shows a data bar. Together, a row with status "Overdue" in red and a near-full revenue bar gives an account manager all the signal they need in one row scan.

Inline editing, When a user edits a numeric cell directly in the table (TableCrafter writes the change via GFAPI::update_entry_field() on the server side), the data bar in that cell re-renders immediately with its updated width. If you added a CSS transition on width, the bar animates to its new position, reinforcing that the edit landed successfully.

Auto-refresh, For tables displaying live operational data (active loads, real-time invoices), enabling auto-refresh under the column's AJAX settings causes data bars to update on every polling interval without a page reload. Custom CSS transitions will fire on every refresh cycle, so keep durations short (200–400ms) to avoid a strobing effect when multiple rows update simultaneously.

How Do Troubleshooting and Edge Cases Work?

Bar width is always 0% or 100%. This usually means the dynamic min/max calculation is failing because the column contains non-numeric characters (currency symbols, commas). Check your Gravity Forms field type and ensure TableCrafter can parse the value as a float. Setting explicit Min and Max values bypasses the calculation entirely.

CSS changes are not appearing. NitroPack, WP Rocket, or similar caching plugins may be serving a stale stylesheet. Clear all caches after saving CSS changes. If you are using Elementor's custom CSS panel, note that Elementor also has its own CSS optimization layer.

Bar color picker setting is ignored. If your custom CSS gradient is not rendering, confirm the specificity rules above. The inline style attribute always wins over a stylesheet rule at equal specificity. Target background-color with !important specifically rather than the whole rule block.

Bars look correct in admin preview but wrong on the frontend. TableCrafter's AJAX endpoint (wp-admin/admin-ajax.php) returns HTML fragments for the table body. Ensure your custom stylesheet is enqueued on the frontend page that hosts the shortcode, not just in the admin.

Bars are invisible on mobile. The wrapper defaults to overflow: hidden. If your theme sets a very small min-height on table cells, the bar can be clipped to zero height. Add an explicit min-height on .gt-cell--data-bar to resolve it.