WSTech Visual Table Builder

WSTech Visual Table Builder is a visual WordPress table builder for creating responsive pricing tables, comparison tables, feature matrices, and structured data tables directly in Gutenberg.

Build tables with a visual Gutenberg editor, drag-and-drop controls, merged cells, starter templates, CSV import/export, sorting, search, pagination, and mobile display options. Create reusable tables once and insert them anywhere with shortcodes, or build inline tables directly inside the block editor.

What You Can Build

Use the plugin for pricing tables, product comparison tables, feature comparison charts, employee directories, class timetables, project trackers, invoice tables, nutrition facts tables, and searchable data tables.

✨ Key Features

Reusable Table Management * Dedicated "WSTech Tables" admin screen — create, edit, duplicate, delete * Each table gets a unique shortcode: [wstech_table id="123"] * Embed tables in Gutenberg, Elementor, Divi, Beaver Builder, Classic Editor, or PHP templates * Slug-based shortcodes supported: [wstech_table slug="pricing-table"] * WordPress revisions for table version history

Editor Experience * Click-to-edit cells with full rich text (bold, italic, underline, strikethrough, links) * Per-cell formatting: background colour, text colour, alignment, vertical align, padding * Tab/Shift+Tab keyboard navigation — auto-adds rows at the end * Right-click context menu for quick row/column operations * Drag & drop row and column reordering * Undo / Redo via WordPress native history (Ctrl+Z / Ctrl+Y)

Table Structure * Header row (thead), footer row (tfoot), first-column headers * Merge cells (colspan + rowspan) — Shift+click to multi-select, then merge * Unmerge any merged cell with one click * Duplicate rows and columns * Insert/delete rows and columns (above/below/before/after) * Optional table caption

10 Built-in Templates * Blank 4×4, Employee Directory, Pricing Table, Product Comparison * Invoice/Bill, Class Timetable, Sports Standings, Project Tracker * Budget Tracker, Nutrition Facts

6 Premium Themes * Default (Indigo), Striped (Sky Blue), Bordered (Slate), Dark, Minimal, Colorful

Data Import / Export * Export CSV (always available in editor) * Export JSON (.vtb.json) — full table backup including styles and settings * Import CSV — file upload or paste, auto-detects delimiter * Import JSON — restore a previously exported .vtb.json * Frontend CSV Export button (opt-in per table)

Frontend Interactivity (instant, no page reloads) * Column sorting (ASC/DESC, numeric + date-aware) * Live search / row filter * Pagination with configurable page size * Hover row highlight

Responsive Design * Horizontal scroll mode (default) * Stack on Mobile mode — each row becomes a vertical card with column labels

Universal Compatibility * Gutenberg Block Editor (native) * Elementor (Shortcode Widget) * Divi (Code Module) * Beaver Builder * Classic Editor * PHP templates: <?php echo do_shortcode('[wstech_table id="123"]'); ?>

Privacy / External Services * The plugin does not send table data to external services. * Links to the plugin website and donation page are ordinary admin/readme links only.

Source Code and Build * Public source repository: https://github.com/shivmaikhuri12/wstech-visual-table-builder * Editable block source files are in the src/ directory. * Compiled block assets are generated into the build/ directory by @wordpress/scripts. * Build tools and development dependencies are declared in package.json. * To rebuild the production assets from source, run:

Uninstall * Uninstalling the plugin through WordPress removes WSTech Tables created by the plugin and their associated post meta.

🔧 How to Use

Method 1: Reusable Tables (Recommended) 1. Go to WSTech Tables → Add New in the admin 2. Name your table and design it using the visual editor 3. Click Publish 4. Copy the shortcode from the sidebar: [wstech_table id="123"] 5. Paste the shortcode anywhere — pages, posts, Elementor, Divi, etc.

Method 2: Inline Tables (Quick) 1. In any post/page, click + Add Block and search for "Visual Table Builder" 2. Design your table directly in the post 3. Save the post — your table is live!

Features

Visual Gutenberg Table Editor

Build tables directly in the WordPress editor using a visual grid. Click any cell to edit content, use toolbar controls for common formatting, and reorder rows or columns with drag and drop controls. The editor is designed for people who need spreadsheet-style table control without writing HTML.

Merge Cells

Create more advanced table layouts with colspan and rowspan support. Select a rectangular group of cells, merge them into one larger cell, and unmerge later when the layout needs to change. This is useful for pricing tables, schedules, invoice totals, grouped comparison rows, and table headings.

Responsive Pricing and Comparison Tables

Choose between horizontal scroll mode and Stack on Mobile mode. Horizontal scroll keeps wide pricing, comparison, and data tables intact on smaller screens, while Stack on Mobile turns rows into compact vertical cards with column labels.

CSV Import / Export for Table Data

Import CSV files from Excel, Google Sheets, LibreOffice, or pasted spreadsheet data. Export CSV from the editor, and optionally enable a frontend CSV export button for visitors when a table needs downloadable data.

JSON Backup and Restore

Export a full .vtb.json backup that includes table content, merged cells, styles, captions, responsive settings, sorting, search, pagination, and other table options. Import the JSON file later to restore the table state.

Reusable WordPress Tables with Shortcodes

Create tables in WSTech Tables → Add New, publish them once, and embed them across multiple pages. Updating the saved table updates every shortcode instance automatically.

Shortcodes

Embed reusable tables with [wstech_table id="123"] or [wstech_table slug="pricing-table"]. Shortcodes work in posts, pages, widgets, Classic Editor, Elementor, Divi, Beaver Builder, and PHP templates.

Sortable Searchable Data Tables

Enable live search to help visitors filter table rows instantly. Add sortable columns and pagination when a data table has many rows and should be easier to scan.

Templates

Start faster with built-in templates including blank table, employee directory, pricing table, product comparison, invoice, class timetable, sports standings, project tracker, budget tracker, and nutrition facts.

Gutenberg Integration

Use the native Visual Table Builder block for inline tables, or use the WordPress Shortcode block to insert reusable tables created from the WSTech Tables admin screen.

Docs

Creating a Reusable Table

Reusable tables are best when the same table needs to appear in more than one place. Create the table under WSTech Tables, publish it, and use its shortcode anywhere. When the table is edited later, all embedded instances update automatically.

Creating an Inline Gutenberg Table

For a table that only belongs to one post or page, add the Visual Table Builder block directly in the Gutenberg editor. Inline tables are stored with the post content.

Importing CSV Data

Use Import → CSV in the table toolbar. You can upload a CSV file or paste CSV text. The importer detects common delimiters such as commas, tabs, semicolons, and pipes.

Exporting Table Data

Use CSV export when you need spreadsheet-compatible data. Use JSON export when you need a full backup of table content, styles, merged cells, and display settings.

Frontend Data Controls

Sorting, search, pagination, hover highlighting, and frontend CSV export are optional per table. Enable only the features each table needs.

Responsive Display

Use horizontal scroll for wide technical or comparison tables. Use Stack on Mobile for directory, pricing, or feature-list tables where each row should become a readable mobile card.

Shortcodes

Embed by Table ID

This is the recommended shortcode because the numeric ID does not change.

Embed by Table Slug

This is useful for readable shortcodes. If the table slug changes, update the shortcode.

Use in PHP Templates

Where Shortcodes Work

• WordPress Shortcode block
• Classic Editor
• Elementor Shortcode widget
• Divi Code module
• Beaver Builder shortcode/HTML module
• Widget areas that support shortcodes
• Theme templates with do_shortcode()

Shortcode Troubleshooting

If a shortcode does not display a table, confirm that the table exists, is published, and that the shortcode ID or slug is correct.

Developer Notes

Data Model: Tables are stored as JSON in post meta (_wstech_table_data) with a version field for future migration support.

Rendering: A shared PHP renderer (WSTech_Table_Renderer) generates frontend HTML for both Gutenberg blocks (via render_callback) and shortcodes.

Block Name: The Gutenberg block namespace is vtb/table-builder (stable, will not change).

Building from source: cd wp-content/plugins/wstech-visual-table-builder npm install npm run build