How to Display Data from a Public API in a WordPress Table (No Auth Required)

Updated July 2026 • 5 min read • By Fahad Murtaza

The fastest way to understand TableCrafter's REST API source is to connect a public API that requires zero authentication. JSONPlaceholder is the ideal starting point: it is stable, well-documented, returns realistic JSON shapes, and has no rate limits, API keys, or account requirements. 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. Pagination reduces time-to-first-interaction by up to 60% compared to infinite scroll on data-heavy pages (Google Web Fundamentals, 2024).

What Is JSONPlaceholder?

JSONPlaceholder (https://jsonplaceholder.typicode.com) is a free, hosted fake REST API used by millions of developers for testing and prototyping. It serves static JSON data for common resource types: users, posts, comments, albums, photos, and todos. The data is read-only, POST, PUT, and DELETE requests are accepted but do not actually persist anything, so it is completely safe to use during development.

For this walkthrough, we will use the /users endpoint which returns 10 user objects with realistic names, emails, addresses, and company data.

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 1: How Do I Create the Data Source?

In your WordPress admin, go to TableCrafter → Data Sources → Add New.

• Name: JSONPlaceholder Users (internal label only)
• Source Type: REST API
• Endpoint URL: https://jsonplaceholder.typicode.com/users
• Method: GET
• Authentication: None
• Root Path: (leave empty, the response is a top-level array)

Click Test Connection. You should see a green success banner and a preview of the first user object:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": { "lat": "-37.3159", "lng": "81.1496" }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Click Save Data Source.

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.

Step 2: How Do I Create the Table?

Go to TableCrafter → Tables → Add New. Fill in the configuration:

• Table Name: User Directory (or any descriptive name — this appears in the admin table list)
• Data Source: Select "JSONPlaceholder Users" from the dropdown (the source you created in Step 1)

TableCrafter fetches a sample response from the endpoint and populates the field selector with every available path, including nested ones like address.city and company.name. The field list is built from the actual API response structure, so if your API returns 30 fields and you only want to show 5, you can deselect the other 25 here without any code changes.

If the field selector is empty or shows an error instead of fields, it means the data source endpoint returned an unexpected response during the sample fetch. Return to the data source settings and click Test Connection again to see the raw response and identify the issue — the most common causes are a wrong URL, an endpoint that requires authentication, or an API that returns XML instead of JSON.

Step 3: How Do I Configure Columns?

Click Add Column for each column you want to display. Here is a complete user directory setup:

1. Field: name — Label: Name — Type: Text
2. Field: username — Label: Username — Type: Text
3. Field: email — Label: Email — Type: Email (renders as a mailto: link)
4. Field: address.city — Label: City — Type: Text
5. Field: company.name — Label: Company — Type: Text
6. Field: website — Label: Website — Type: URL (renders as a clickable link)

Step 4: How Do I Configure Display Options?

Still in the table builder, enable these options:

• Search: On, adds a keyword search box above the table
• Pagination: On, set to 10 rows per page (the JSONPlaceholder /users endpoint only returns 10 records total, but pagination is good practice)
• Striped rows: On, alternating row colors improve readability
• Responsive: On, collapses to a card layout on small screens

Leave filtering off for now, with only 10 rows and 10 records returned from this endpoint, column filters are not necessary.

Save the table. The table will be assigned an ID (for example, ID: 2) shown in the table list.

The column mapping you define here is stored as a JSON configuration in the WordPress database. You can export this configuration using the TableCrafter export tool and import it to another table or another site. This is useful when replicating a table layout across multiple pages or when migrating a table to a staging environment for testing before going live.

Step 5: How Do I Embed the Table?

Create or edit any WordPress page or post. Add the TableCrafter shortcode block (search for "Shortcode" in the block editor) and enter:

[tablecrafter id="2" search="true"]

Publish the page and view it on the frontend. You will see a fully rendered, searchable table displaying the 10 users from JSONPlaceholder.

TableCrafter re-fetches this data on each page load by default. If your data source updates infrequently and your site has significant traffic, enable the built-in caching option in the table's Performance tab. This stores the fetched data for a configurable number of minutes and serves it from WordPress transients, reducing API calls to the source and improving page load time for visitors.

How Does Exploring Other JSONPlaceholder Endpoints Work?

Once your first table works, try these endpoints to explore different data shapes:

• https://jsonplaceholder.typicode.com/posts, 100 blog posts with userId, title, body
• https://jsonplaceholder.typicode.com/todos, 200 todo items with completed boolean field (try the Badge column type)
• https://jsonplaceholder.typicode.com/photos, 5,000 photos with thumbnailUrl (try the Image column type with URL field)
• https://jsonplaceholder.typicode.com/albums, 100 albums grouped by userId

The /todos endpoint is particularly useful for experimenting with the Badge column type and boolean value mapping, as the completed field is either true or false for every record.

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.

How Does Moving Beyond JSONPlaceholder Work?

When you are ready to connect a real API, the only things that change are the endpoint URL and possibly the authentication method. The column mapping, display configuration, and shortcode work identically regardless of the data source. See these guides for next steps:

• REST API authentication in TableCrafter, API key, Bearer token, and credential storage
• Mapping nested JSON fields, dot notation, arrays, and edge cases
• Handling paginated API responses, offset and cursor pagination