Gutenberg Block

TableCrafter ships a native WordPress block, tablecrafter/data-table, that lets you build dynamic data tables visually in the block editor — configure everything from the sidebar Inspector and watch a true server-rendered live preview update as you type.

Overview

The block is the recommended integration method for modern WordPress sites (5.0+) and block-based themes. It is a thin visual wrapper over the same engine that powers the [tablecrafter] shortcode: every control in the block sidebar maps one-to-one to a shortcode attribute, and the frontend output is identical. There is no separate data store — the block persists a small set of attributes in the post content and resolves the data at render time, so your database stays clean.

How the Block Is Registered

TableCrafter registers the block in PHP on the init hook (it does not use a block.json file). The registration wires up the editor script, shared frontend stylesheet, the server render callback, and the full attribute schema:

register_block_type('tablecrafter/data-table', [
    'editor_script'   => 'tablecrafter-block',
    'style'           => 'tablecrafter-style',
    'render_callback' => [$this, 'render_block_callback'],
    'attributes'      => [ /* source, root, search, ... */ ],
]);

Editor behavior lives in assets/js/block.js, which calls blocks.registerBlockType('tablecrafter/data-table', …) with a matching title of "TableCrafter", a table-grid SVG icon, and the widgets category. The server callback (render_block_callback) auto-generates a unique container id when one is missing and then delegates straight to the shortcode renderer (render_table), so block output and shortcode output share the same caching, sanitization, and markup.

Inserting the Block

1. Edit any post or page and click the + (block inserter).
2. Search for TableCrafter (found under the Widgets category) and insert it.
3. Open the block sidebar (the Settings gear) to reveal the Inspector panels.
4. Paste a data source URL — or pick a bundled demo — and the live preview renders immediately.

Sidebar Controls (Data Settings)

The first Inspector panel, Data Settings, is open by default and contains the core configuration. Each control writes directly to a block attribute.

Sidebar Controls (Auto-Refresh Settings)

The second panel, Auto-Refresh Settings, is collapsed by default. Turning on Enable Auto-Refresh reveals the remaining controls — they stay hidden while auto-refresh is off to keep the sidebar focused. This turns a static table into a live dashboard that periodically re-fetches its source.

The panel footer includes a Documentation link out to the project repository for additional help.

Live Preview

The block's edit() function renders its preview through wp.serverSideRender, pointing at the tablecrafter/data-table block with the current attributes. This means the editor shows the real server-rendered table — the same HTML visitors will see — rather than a placeholder mock-up. Every attribute change triggers a fresh server render.

Because the preview HTML is injected by SSR after the React render, the block script re-initializes the interactive layer (search, filters, export, pagination, auto-refresh) on the client once the markup lands. It does this by reading the data-* attributes on the rendered .tablecrafter-container — including data-source, data-search, data-filters, data-export, data-per-page, data-auto-refresh, and data-refresh-interval — and constructing a fresh TableCrafter instance whenever any of them change.

Block Markup and the Shortcode Equivalent

In the post content, the block is stored as a comment-delimited dynamic block holding only its attributes — no rendered table HTML:

<!-- wp:tablecrafter/data-table {"source":"https://api.example.com/users.json","search":true,"per_page":10} /-->

Since the block and shortcode share one render path, the example above is exactly equivalent to:

[tablecrafter source="https://api.example.com/users.json" search="true" per_page="10"]

If you ever need to move a configured table into a classic theme or a template file, you can reproduce any block 1:1 with the matching shortcode attributes.

Requirements and Notes

• WordPress 5.0+ with the block editor enabled. The plugin guards registration with a function_exists('register_block_type') check, so it degrades gracefully on classic-editor-only setups.
• The data source must be publicly reachable; the URL is sanitized with esc_url_raw before use, and an empty source renders a friendly placeholder instead of an error.
• External requests pass through TableCrafter's secure server-side proxy (using the localized AJAX URL and a tc_proxy_nonce) to bypass CORS and apply SSRF protection.
• The block enqueues the shared tablecrafter-style stylesheet, so frontend and editor preview styling match automatically.

Next, see shortcodes.html for the full attribute reference shared by the block, or elementor-widget.html if you build with Elementor.