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 for operational, yellow for degraded, red for outage)
• 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. This means your status page stays live without visitors needing to hit Refresh; an outage that appears at any point will show the updated badge color within 30 seconds of your monitoring API reporting it. The data source is a REST API endpoint you provide, either from a hosted monitoring service or a custom WordPress endpoint. No custom PHP is needed for the table configuration itself; you build and embed it entirely through the TableCrafter admin interface and a single shortcode.

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 initial configuration, use a static .json file hosted on your server or a tool like JSONPlaceholder to verify the table column mapping and badge color configuration before connecting a live monitoring API. Upload a JSON file containing a few representative rows to your WordPress media library (or a publicly accessible path) and use that URL as the data source endpoint while setting up columns. Once the table renders correctly with the mock data, swap the endpoint URL to your real monitoring API. This approach avoids hitting your monitoring service's rate limits or authentication layer during the configuration phase, and lets you test with controlled values like "status": "outage" to verify your red badge appears correctly without waiting for a real outage to occur.

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, API key header for other services, or no auth for a public WordPress route.

Click Test Connection and confirm you see a sample row in the preview. TableCrafter makes a live GET request to the URL and shows the first few rows of the response. If the preview is empty or shows an error, the most common causes are: an incorrect URL, a missing or wrong authentication header, or an endpoint that returns a single object rather than a JSON array. TableCrafter expects the endpoint to return a JSON array at the root level or at a known path that you can configure in the Data Path field (for example, data.monitors for UptimeRobot responses). Once the preview shows your services correctly, save the data source.

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

Set Sort Default to Ascending so services appear alphabetically by default. This makes the dashboard predictable; returning visitors can find a specific service without scanning the full list. If your API returns services in a fixed priority order and you want to preserve that order, leave the default sort unset and disable the sort control for this column in the column's Display settings.

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

Enabling sorting on this column lets you quickly find the slowest service. Setting Decimal Places to 0 keeps values clean since millisecond integers are more readable than 142.00 ms. For services returning 0ms during an outage (no response received), the 0 value is still a valid integer and will display correctly. If your API returns null for response time during an outage instead of 0, set the column's Empty Value to -- so the cell shows a dash rather than a blank or a zero.

Uptime column

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

Two decimal places gives the precision needed to distinguish 99.97% from 99.99% uptime, which matters for SLA reporting. Setting the column type to Number ensures the value sorts numerically in the frontend table and exports as a numeric cell in XLSX files rather than a text string, so spreadsheet SUM/AVERAGE formulas work correctly on an exported report.

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

Set the format to include seconds (HH:mm:ss) since a status dashboard is most useful when visitors can see exactly how recent the data is. If your API returns a Unix timestamp integer instead of an ISO 8601 string, set the Storage Format in the column settings to Unix Timestamp so TableCrafter parses the integer correctly before formatting it for display. The 30-second auto-refresh in Step 4 keeps this timestamp current without any action from the visitor.

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"]