🚀 TableCrafter: WordPress Data Tables & Dynamic Content Plugin

Transform any JSON API or CSV into beautiful, responsive WordPress data tables. Features live search, pagination, sorting, mobile optimization, and SEO-friendly server-side rendering.

📸 Screenshots

Gutenberg Block Editor

Native WordPress block with visual sidebar controls, quick demo data options, and live preview. No external APIs needed to test functionality.

Admin Dashboard & Live Preview

Product inventory demo showing JSON data transformed into responsive tables with live search functionality. Includes shortcode generator for easy copying.

Interactive Data Table

Real-time search filtering and smart auto-detected column filters working on live data. Shows mobile-responsive design and advanced filtering capabilities.

🚀 Why TableCrafter?

The most powerful WordPress data table plugin for displaying dynamic content from external APIs, JSON files, and CSV data sources. Perfect for developers, agencies, and businesses who need to showcase real-time data without database bloat.

🌟 Zero Database Impact

Unlike other WordPress table plugins that store data in your database, TableCrafter fetches data directly from your sources, keeping your WordPress installation clean and fast.

🔍 SEO-Optimized Tables

Every table is rendered server-side with proper HTML structure, making all your data crawlable by Google, Bing, and other search engines for better rankings.

⚡ Lightning-Fast Performance

Advanced caching with Stale-While-Revalidate (SWR) delivers sub-100ms load times while keeping data fresh.

📱 Mobile-First Design

Tables automatically transform into responsive card layouts on mobile devices, ensuring perfect user experience across all screen sizes.

🚀 Upgrade to Pro: Gravity Tables

Unlock the full potential of your data with Advanced Data Tables for Gravity Forms — the ultimate solution for managing Gravity Forms entries.

Why Upgrade?

✏️ Frontend Editing: Let users update their own entries directly from the table.
🛡️ Role-Based Permissions: Control exactly who can view, edit, or delete data.
⚡ Bulk Actions: Delete, approve, or modify hundreds of entries in one click.
🔍 Advanced Filtering: Logic-based filters, date ranges, and multi-select dropdowns.
🎨 Conditional Formatting: Highlight rows or cells based on their values (e.g., "Status = Overdue").
📥 Pro Export: Export filtered views to Excel, CSV, or PDF.
♾️ Unlimited Freedom: No limits on tables, columns, or rows.

Start your 10-day free trial today!

🛠️ Key Features for WordPress Developers

🎯 API Integration: Connect to any REST API, JSON endpoint, or CSV file with zero coding
⚡ Live Search & Filtering: Real-time data filtering as users type, with debounced performance
📱 Responsive Design: Mobile-optimized card view with automatic reflow for small screens
🔧 Gutenberg Block: Native WordPress block editor integration with visual controls
📄 Smart Pagination: Client-side pagination for large datasets with customizable page sizes
🎨 Custom Styling: CSS-friendly with variables and hooks for complete design control
🔒 Security First: Built-in SSRF protection and WordPress capability-based authorization
📊 Data Export: CSV and clipboard export with respect for current filters
🗂️ Column Management: Show/hide specific columns with include/exclude parameters
🔗 Auto-Linking: Automatically converts URLs and email addresses to clickable links

💼 Perfect Business Use Cases

Financial Services: Display live cryptocurrency prices, stock data, or exchange rates from APIs like CoinGecko, Alpha Vantage, or custom trading platforms.

E-Commerce: Show real-time inventory levels, price comparisons, or product catalogs from external suppliers and marketplaces.

SaaS Dashboards: Create client portals displaying usage metrics, billing information, or performance data from your application's API.

Real Estate: Display property listings, market data, or rental information from MLS feeds or real estate APIs.

News & Media: Showcase live sports scores, weather data, or social media metrics from external feeds.

Corporate Directories: Display employee information, contact lists, or organizational data from HR systems.

🚀 Quick Start

Option 1: Gutenberg Block (Recommended)

Add the TableCrafter block to any page/post
Enter your JSON URL in the sidebar
Configure display options (search, export, pagination)
Publish and you're done!

Option 2: Shortcode

[tablecrafter source="https://api.example.com/data.json" search="true" export="true"]

Option 3: PHP Function

echo tablecrafter_render([
    'source' => 'https://api.example.com/data.json',
    'search' => true,
    'per_page' => 25
]);

📚 Technical Documentation

System Requirements

WordPress: 5.0+
PHP: 7.4+ (8.0+ recommended)
MySQL: 5.7+ or MariaDB 10.3+
Memory: 64MB+ (128MB+ recommended for large datasets)

Browser Support

Chrome 70+
Firefox 65+
Safari 12+
Edge 79+
iOS Safari 12+
Android Chrome 70+

🛠️ Shortcode API Reference

Basic Syntax

[tablecrafter source="URL" additional_parameters...]

Core Parameters

Parameter	Type	Default	Description
`source`	string	required	JSON API endpoint or file URL
`root`	string	`""`	JSONPath to data array (e.g., `data.results`)
`search`	boolean	`false`	Enable live search functionality
`export`	boolean	`false`	Enable CSV/clipboard export tools
`per_page`	integer	`0`	Rows per page (0 = show all)
`include`	string	`""`	Comma-separated columns to show
`exclude`	string	`""`	Comma-separated columns to hide
`id`	string	auto-generated	Unique container ID

Advanced Column Selection

[tablecrafter source="..." include="id:Product ID,name:Product Name,price:Cost"]

Nested Data Access

[tablecrafter source="..." root="response.data.products"]

Complete Example

[tablecrafter 
    source="https://api.store.com/products.json" 
    root="data.items"
    include="name:Product,price:Price,category:Category"
    search="true" 
    export="true" 
    per_page="25"
]

🔧 Developer Hooks & Filters

PHP Hooks

Filters

// Modify data before rendering
add_filter('tablecrafter_data', function($data, $source) {
    // Transform $data array
    return $data;
}, 10, 2);

// Customize cache duration (default: 3600 seconds)
add_filter('tablecrafter_cache_ttl', function($ttl, $source) {
    return 7200; // 2 hours
}, 10, 2);

// Modify HTTP request arguments
add_filter('tablecrafter_http_args', function($args, $source) {
    $args['headers']['Authorization'] = 'Bearer ' . get_option('api_token');
    return $args;
}, 10, 2);

// Customize column auto-detection
add_filter('tablecrafter_auto_columns', function($columns, $data) {
    // Modify or reorder $columns array
    return $columns;
}, 10, 2);

Actions

// Before data fetch
add_action('tablecrafter_before_fetch', function($source) {
    // Log API calls, update counters, etc.
});

// After successful data fetch
add_action('tablecrafter_after_fetch', function($data, $source) {
    // Process data, send notifications, etc.
}, 10, 2);

// On fetch error
add_action('tablecrafter_fetch_error', function($error, $source) {
    error_log("TableCrafter fetch failed: {$error->getMessage()}");
}, 10, 2);

JavaScript Hooks

Events

// Table rendered
document.addEventListener('tablecrafter:rendered', function(e) {
    const container = e.detail.container;
    const data = e.detail.data;
    // Custom post-render logic
});

// Search performed
document.addEventListener('tablecrafter:searched', function(e) {
    const searchTerm = e.detail.searchTerm;
    const results = e.detail.results;
    // Analytics, etc.
});

// Data exported
document.addEventListener('tablecrafter:exported', function(e) {
    const format = e.detail.format; // 'csv' or 'clipboard'
    // Track export events
});

Global Configuration

// Modify default configuration
window.TableCrafterDefaults = {
    pagination: true,
    pageSize: 50,
    globalSearchPlaceholder: 'Find records...',
    exportFilename: 'my-export.csv'
};

🏗️ Architecture & Performance

Caching Strategy

TableCrafter implements a Stale-While-Revalidate (SWR) caching pattern:

Serve Stale: Return cached data immediately
Validate in Background: Fetch fresh data asynchronously
Update Cache: Store new data for next request
Fallback: Serve stale data if fetch fails

// Cache key structure
$cache_key = 'tc_html_' . md5($source . $include . $exclude . $search . $export . $per_page);

// Cache storage
wp_cache_set($cache_key, $data, 'tablecrafter', $ttl);

Server-Side Rendering (SSR)

Tables are rendered on the server for:

SEO Benefits: All data is crawlable by search engines
Fast TTFB: No loading spinners or content shifts
Accessibility: Screen readers can access content immediately
Zero-JS Fallback: Tables work even with JavaScript disabled

Security Architecture

SSRF Protection

// URL validation
if (!wp_http_validate_url($url)) {
    throw new Exception('Invalid URL');
}

// Safe HTTP requests
$response = wp_safe_remote_get($url, [
    'timeout' => 30,
    'user-agent' => 'TableCrafter/' . TABLECRAFTER_VERSION,
    'headers' => ['Accept' => 'application/json']
]);

Capability Checks

// Admin-only features
if (!current_user_can('edit_posts')) {
    wp_die('Unauthorized');
}

// Proxy endpoint protection
if (!wp_verify_nonce($_POST['nonce'], 'tablecrafter_proxy')) {
    wp_die('Security check failed');
}

Data Processing Pipeline

┌─────────────────┐    ┌──────────────┐    ┌─────────────────┐
│   JSON Source   │───▶│  HTTP Fetch  │───▶│  Data Parsing   │
└─────────────────┘    └──────────────┘    └─────────────────┘
                                                     │
                                                     ▼
┌─────────────────┐    ┌──────────────┐    ┌─────────────────┐
│  Cache Storage  │◀───│  SSR Render  │◀───│ Column Detection│
└─────────────────┘    └──────────────┘    └─────────────────┘
                                                     │
                                                     ▼
┌─────────────────┐    ┌──────────────┐    ┌─────────────────┐
│ Client Hydration│◀───│ HTML Output  │◀───│ Data Formatting │
└─────────────────┘    └──────────────┘    └─────────────────┘

📊 Database Schema

TableCrafter uses zero database tables by design. All data is:

Fetched from external sources
Cached in WordPress transients
Rendered server-side to HTML
Enhanced client-side with JavaScript

Transient Keys

// HTML cache
"tc_html_{md5(source+params)}" => "rendered HTML"

// Data cache  
"tc_data_{md5(source)}" => "parsed JSON data"

// Column cache
"tc_cols_{md5(source)}" => "auto-detected columns"

🧪 Testing & Quality Assurance

Unit Testing

# Run PHP tests
php tests/run-tests.php

# Test specific functionality
php tests/run-tests.php --filter=TestSSRFProtection

Browser Testing Matrix

Browser	Version	Status
Chrome	120+	✅ Full Support
Firefox	115+	✅ Full Support
Safari	16+	✅ Full Support
Edge	120+	✅ Full Support
iOS Safari	15+	✅ Mobile Optimized
Android Chrome	120+	✅ Mobile Optimized

Performance Benchmarks

Cold Load: < 200ms (with external API)
Warm Cache: < 50ms (SWR cache hit)
Client Hydration: < 100ms (embedded data)
Search Response: < 10ms (client-side filtering)

🔍 Debugging & Troubleshooting

Debug Mode

// Enable debug logging
add_filter('tablecrafter_debug', '__return_true');

// Log file location
wp-content/debug.log

Common Issues

CORS Errors

Problem: Access-Control-Allow-Origin errors in browser console
Solution: Use TableCrafter's built-in proxy automatically handles CORS

Memory Limits

Problem: Large datasets causing memory exhaustion
Solution: Use per_page parameter to enable pagination

Cache Issues

Problem: Stale data not refreshing
Solution: Clear cache programmatically

// Clear specific cache
delete_transient('tc_data_' . md5($source));

// Clear all TableCrafter cache
global $wpdb;
$wpdb->query("DELETE FROM {$wpdb->options} WHERE option_name LIKE '_transient_tc_%'");

WP-CLI Commands

# Clear all TableCrafter cache
wp eval "delete_transient('tc_data_*');"

# Test API endpoint
wp eval "var_dump(wp_safe_remote_get('https://api.example.com/data.json'));"

# Check plugin status
wp plugin status tablecrafter-wp-data-tables

🤝 Contributing

Development Setup

# Clone repository
git clone https://github.com/TableCrafter/wp-data-tables.git

# Install development dependencies
composer install
npm install

# Run tests
npm test
php tests/run-tests.php

# Start local development
npm run dev

Code Standards

PHP: WordPress Coding Standards (WPCS)
JavaScript: ESLint + WordPress eslint config
CSS: Stylelint + WordPress CSS guidelines
Documentation: PHPDoc for all functions

Release Process

Update version in tablecrafter.php, readme.txt, CHANGELOG.md, sync_svn.sh
Run full test suite
Create Git tag: git tag v2.2.x
Push to GitHub: git push origin main --tags
Deploy to WordPress.org: ./sync_svn.sh && cd ../tablecrafter-svn && svn ci

📄 License & Legal

Third-Party Assets

Icons: Heroicons (MIT License)
Inspiration: WordPress Core Table Block
Typography: System font stack

🆘 Support & Contact

Documentation: GitHub Wiki
Bug Reports: GitHub Issues
Feature Requests: GitHub Discussions
Custom Development: info@fahdmurtaza.com
Premium Support: Gravity Tables Pro

Love TableCrafter? ⭐ Star us on GitHub | ☕ Support Development

Name		Name	Last commit message	Last commit date
Latest commit History 148 Commits
assets		assets
demo-data		demo-data
docs		docs
views		views
.distignore		.distignore
CHANGELOG.md		CHANGELOG.md
README.md		README.md
readme.txt		readme.txt
screenshot-1.png		screenshot-1.png
screenshot-2.png		screenshot-2.png
screenshot-3.png		screenshot-3.png
screenshot-4.png		screenshot-4.png
tablecrafter.php		tablecrafter.php

TableCrafter/wp-data-tables

Folders and files

Latest commit

History

Repository files navigation