How to Build a Live API Status Dashboard in WordPress with TableCrafter

Updated July 2026 • 8 min read • By Fahad Murtaza

An operations status dashboard shows the health of your services, APIs, or integrations at a glance, updated in real time without a page reload. This guide builds a complete status dashboard in WordPress using TableCrafter's REST API source, auto-refresh, and badge column type. 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 the native Gutenberg block. TablePress has over 800,000 active installs on WordPress.org (WordPress.org, 2026).

What You Will Build?

A WordPress page displaying a table with one row per monitored service, showing:

• Service name
• Current status as a color-coded badge (green/yellow/red)
• Response time in milliseconds
• Uptime percentage over the last 30 days
• Last checked timestamp

The table auto-refreshes every 30 seconds without a full page reload.

Test this step while logged in as a user with the target role to confirm the expected behavior. Logged-in admin users always see all columns and all rows regardless of role restrictions, which can mask visibility issues during initial configuration.

The configuration you set here applies to every visitor who loads a page containing this table, regardless of whether they are logged in. Role-specific overrides for columns and rows are a separate layer and do not replace these global display settings. Apply global settings first, then add role restrictions as needed for tables that serve multiple user types.

Step 1: How Do I Prepare Your Status API Endpoint?

TableCrafter reads data from an HTTP endpoint, you need an endpoint that returns a JSON array of service status objects. Three options:

Option A: Use a hosted monitoring service

Services like Statuspage.io, Freshping, and UptimeRobot expose REST APIs that return service status in JSON format. For example, UptimeRobot's /v2/getMonitors endpoint returns an array of monitor objects with status codes and uptime ratios.

Option B: Build a custom WordPress endpoint

Register a custom REST API route in your theme's functions.php or a small plugin that pings your services and returns status JSON:

add_action('rest_api_init', function() {
  register_rest_route('status/v1', '/services', [
    'methods'  => 'GET',
    'callback' => 'get_service_statuses',
    'permission_callback' => '__return_true',
  ]);
});

function get_service_statuses() {
  return [
    ['service' => 'API Gateway',    'status' => 'operational', 'response_ms' => 142, 'uptime' => 99.97],
    ['service' => 'Database',       'status' => 'degraded',    'response_ms' => 890, 'uptime' => 98.41],
    ['service' => 'File Storage',   'status' => 'operational', 'response_ms' => 67,  'uptime' => 100.00],
    ['service' => 'Email Service',  'status' => 'outage',      'response_ms' => 0,   'uptime' => 94.12],
  ];
}

The endpoint would be available at: https://yoursite.com/wp-json/status/v1/services

Option C: Use a static mock for testing

During configuration, use JSONPlaceholder or a .json file hosted on your server to verify the table setup before connecting a live monitoring API.

Step 2: How Do I Create the REST API Data Source?

Go to TableCrafter → Data Sources → Add New. Select REST API. Enter your status endpoint URL. Set authentication as required by your monitoring service (Bearer token for UptimeRobot, no auth for a public WordPress route).

Click Test Connection and confirm you see a sample row in the preview. Save the data source.

The setting is stored in the WordPress options table under the table's configuration key. It does not modify the original data source and can be changed at any time without affecting the underlying records.

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.

Step 3: How Do I Configure the Table Columns?

Create a new table at TableCrafter → Tables → Add New. Select your status data source. Add the following columns:

Service Name column

• Field Path: service
• Label: Service
• Type: Text

Status Badge column

• Field Path: status
• Label: Status
• Type: Badge

In the Badge Value Map setting, configure the color mapping:

• operational → green
• degraded → yellow
• outage → red
• maintenance → blue

TableCrafter renders the badge value as a pill with the configured background color. The text inside the badge is the raw field value, automatically capitalized.

Response Time column

• Field Path: response_ms
• Label: Response (ms)
• Type: Number
• Suffix: ms

Uptime column

• Field Path: uptime
• Label: Uptime (30d)
• Type: Number
• Suffix: %
• Decimal Places: 2

Last Checked column (if your API returns a timestamp)

• Field Path: last_checked
• Label: Last Checked
• Type: DateTime
• Format: MMM D, YYYY HH:mm:ss

Step 4: How Do I Enable Auto-Refresh?

In the table settings, locate the Auto-Refresh section. Enable it and set the interval to 30 seconds. This is a reasonable default for a status dashboard, short enough to catch an outage quickly, not so aggressive that it creates excessive API load.

Enable Show Last Updated Timestamp to display a "Last updated: 2:45:12 PM" line below the table. This timestamp updates every time the table re-fetches data, giving visitors confidence that the data is current.

For a detailed explanation of how auto-refresh works and how to choose intervals, see the auto-refresh guide.

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.

Step 5: How Do I Style the Dashboard Page?

TableCrafter renders the badge column with CSS classes based on the configured color. The default styles are:

.gt-badge-green  { background: #16a34a; color: white; }
.gt-badge-yellow { background: #d97706; color: white; }
.gt-badge-red    { background: #dc2626; color: white; }
.gt-badge-blue   { background: #2563eb; color: white; }

You can override these in your theme's style.css or in the WordPress Customizer's Additional CSS field. For a more prominent dashboard, increase the badge padding and font size:

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.

.gt-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

Step 6: How Do I Add a Summary Row (Aggregated Status)?

Many status dashboards show a summary line at the top, "All systems operational" or "1 service degraded". TableCrafter's Table Summary feature can display aggregated values. Enable the summary row in table settings and configure:

• Average uptime: aggregate the uptime column as Mean
• Incident count: aggregate the status column as Count Where (value equals "outage")

The summary row appears as a pinned row at the top or bottom of the table depending on your configuration.

This applies to all users who can view the table, regardless of role. Role-specific overrides can be set per column under the column Visibility settings. The table-level setting acts as the default for any column without a role override.

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.

Step 7: How Do I Embed the Dashboard?

Create a WordPress page titled something like "System Status" and add the shortcode:

[tablecrafter id="5"]

No additional parameters are needed if you configured search, filter, and auto-refresh in the table builder. You can override specific settings at the shortcode level:

[tablecrafter id="5" search="false" filter="false"]

This disables search and filter controls since a status dashboard typically shows all services without user filtering.

Changes take effect immediately after saving. No cache flush or page refresh is required for the new configuration to apply to all shortcode instances of this table.

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 Does Complete Configuration Summary Work?

• Data source type: REST API
• Endpoint: Your monitoring API or custom WordPress route
• Columns: service (Text), status (Badge with color map), response_ms (Number), uptime (Number with %), last_checked (DateTime)
• Auto-refresh: 30 seconds
• Last updated timestamp: Enabled
• Shortcode: [tablecrafter id="5"]