Shiv Maikhuri

<p><strong>WSTech Visual Table Builder</strong> is a Gutenberg table builder for creating responsive pricing tables, comparison tables, feature matrices, and structured data tables without code.</p>
<p>Build tables visually with drag-and-drop editing, merged cells, templates, sorting, search, pagination, CSV import/export, and mobile display controls. Create reusable tables once and insert them anywhere with shortcodes, or build inline tables directly in Gutenberg.</p>
<h4>✨ Key Features</h4>
<p><strong>Reusable Table Management</strong><br />
* Dedicated “WSTech Tables” admin screen — create, edit, duplicate, delete<br />
* Each table gets a unique shortcode: <code>[wstech_table id="123"]</code><br />
* Embed tables in Gutenberg, Elementor, Divi, Beaver Builder, Classic Editor, or PHP templates<br />
* Slug-based shortcodes supported: <code>[wstech_table slug="pricing-table"]</code><br />
* WordPress revisions for table version history</p>
<p><strong>Editor Experience</strong><br />
* Click-to-edit cells with full rich text (bold, italic, underline, strikethrough, links)<br />
* Per-cell formatting: background colour, text colour, alignment, vertical align, padding<br />
* Tab/Shift+Tab keyboard navigation — auto-adds rows at the end<br />
* Right-click context menu for quick row/column operations<br />
* Drag & drop row and column reordering<br />
* Undo / Redo via WordPress native history (Ctrl+Z / Ctrl+Y)</p>
<p><strong>Table Structure</strong><br />
* Header row (thead), footer row (tfoot), first-column headers<br />
* Merge cells (colspan + rowspan) — Shift+click to multi-select, then merge<br />
* Unmerge any merged cell with one click<br />
* Duplicate rows and columns<br />
* Insert/delete rows and columns (above/below/before/after)<br />
* Optional table caption</p>
<p><strong>10 Built-in Templates</strong><br />
* Blank 4×4, Employee Directory, Pricing Table, Product Comparison<br />
* Invoice/Bill, Class Timetable, Sports Standings, Project Tracker<br />
* Budget Tracker, Nutrition Facts</p>
<p><strong>6 Premium Themes</strong><br />
* Default (Indigo), Striped (Sky Blue), Bordered (Slate), Dark, Minimal, Colorful</p>
<p><strong>Data Import / Export</strong><br />
* Export CSV (always available in editor)<br />
* Export JSON (.vtb.json) — full table backup including styles and settings<br />
* Import CSV — file upload or paste, auto-detects delimiter<br />
* Import JSON — restore a previously exported .vtb.json<br />
* Frontend CSV Export button (opt-in per table)</p>
<p><strong>Frontend Interactivity (instant, no page reloads)</strong><br />
* Column sorting (ASC/DESC, numeric + date-aware)<br />
* Live search / row filter<br />
* Pagination with configurable page size<br />
* Hover row highlight</p>
<p><strong>Responsive Design</strong><br />
* Horizontal scroll mode (default)<br />
* Stack on Mobile mode — each row becomes a vertical card with column labels</p>
<p><strong>Universal Compatibility</strong><br />
* Gutenberg Block Editor (native)<br />
* Elementor (Shortcode Widget)<br />
* Divi (Code Module)<br />
* Beaver Builder<br />
* Classic Editor<br />
* PHP templates: <code><?php echo do_shortcode('[wstech_table id="123"]'); ?></code></p>
<p><strong>Privacy / External Services</strong><br />
* The plugin does not send table data to external services.<br />
* Links to the plugin website and donation page are ordinary admin/readme links only.</p>
<p><strong>Source Code and Build</strong><br />
* Public source repository: https://github.com/shivmaikhuri12/wstech-visual-table-builder<br />
* Editable block source files are in the <code>src/</code> directory.<br />
* Compiled block assets are generated into the <code>build/</code> directory by <code>@wordpress/scripts</code>.<br />
* Build tools and development dependencies are declared in <code>package.json</code>.<br />
* To rebuild the production assets from source, run:</p>
<pre><code>npm install
npm run build
</code></pre>
<p><strong>Uninstall</strong><br />
* Uninstalling the plugin through WordPress removes WSTech Tables created by the plugin and their associated post meta.</p>
<h4>🔧 How to Use</h4>
<p><strong>Method 1: Reusable Tables (Recommended)</strong><br />
1. Go to <strong>WSTech Tables <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong> in the admin<br />
2. Name your table and design it using the visual editor<br />
3. Click <strong>Publish</strong><br />
4. Copy the shortcode from the sidebar: <code>[wstech_table id="123"]</code><br />
5. Paste the shortcode anywhere — pages, posts, Elementor, Divi, etc.</p>
<p><strong>Method 2: Inline Tables (Quick)</strong><br />
1. In any post/page, click <strong>+ Add Block</strong> and search for “Visual Table Builder”<br />
2. Design your table directly in the post<br />
3. Save the post — your table is live!</p>
<h3>Features</h3>
<h4>Drag & Drop Table Builder</h4>
<p>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.</p>
<h4>Merge Cells</h4>
<p>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.</p>
<h4>Responsive Tables</h4>
<p>Choose between horizontal scroll mode and Stack on Mobile mode. Horizontal scroll keeps wide tables intact on smaller screens, while Stack on Mobile turns rows into compact vertical cards with column labels.</p>
<h4>CSV Import and Export</h4>
<p>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.</p>
<h4>JSON Backup and Restore</h4>
<p>Export a full <code>.vtb.json</code> 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.</p>
<h4>Reusable Tables</h4>
<p>Create tables in <strong>WSTech Tables <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong>, publish them once, and embed them across multiple pages. Updating the saved table updates every shortcode instance automatically.</p>
<h4>Shortcodes</h4>
<p>Embed reusable tables with <code>[wstech_table id="123"]</code> or <code>[wstech_table slug="pricing-table"]</code>. Shortcodes work in posts, pages, widgets, Classic Editor, Elementor, Divi, Beaver Builder, and PHP templates.</p>
<h4>Search and Pagination</h4>
<p>Enable live search to help visitors filter table rows instantly. Enable pagination when a table has many rows and should be split into smaller page sets.</p>
<h4>Templates</h4>
<p>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.</p>
<h4>Gutenberg Integration</h4>
<p>Use the native <strong>Visual Table Builder</strong> block for inline tables, or use the WordPress Shortcode block to insert reusable tables created from the WSTech Tables admin screen.</p>
<h3>Docs</h3>
<h4>Creating a Reusable Table</h4>
<p>Reusable tables are best when the same table needs to appear in more than one place. Create the table under <strong>WSTech Tables</strong>, publish it, and use its shortcode anywhere. When the table is edited later, all embedded instances update automatically.</p>
<h4>Creating an Inline Gutenberg Table</h4>
<p>For a table that only belongs to one post or page, add the <strong>Visual Table Builder</strong> block directly in the Gutenberg editor. Inline tables are stored with the post content.</p>
<h4>Importing CSV Data</h4>
<p>Use <strong>Import <span aria-hidden="true" class="wp-exclude-emoji">→</span> CSV</strong> 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.</p>
<h4>Exporting Table Data</h4>
<p>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.</p>
<h4>Frontend Data Controls</h4>
<p>Sorting, search, pagination, hover highlighting, and frontend CSV export are optional per table. Enable only the features each table needs.</p>
<h4>Responsive Display</h4>
<p>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.</p>
<h3>Shortcodes</h3>
<h4>Embed by Table ID</h4>
<pre><code>[wstech_table id="123"]
</code></pre>
<p>This is the recommended shortcode because the numeric ID does not change.</p>
<h4>Embed by Table Slug</h4>
<pre><code>[wstech_table slug="pricing-table"]
</code></pre>
<p>This is useful for readable shortcodes. If the table slug changes, update the shortcode.</p>
<h4>Use in PHP Templates</h4>
<pre><code><?php echo do_shortcode( '[wstech_table id="123"]' ); ?>
</code></pre>
<h4>Where Shortcodes Work</h4>
<ul>
<li>WordPress Shortcode block</li>
<li>Classic Editor</li>
<li>Elementor Shortcode widget</li>
<li>Divi Code module</li>
<li>Beaver Builder shortcode/HTML module</li>
<li>Widget areas that support shortcodes</li>
<li>Theme templates with <code>do_shortcode()</code></li>
</ul>
<h4>Shortcode Troubleshooting</h4>
<p>If a shortcode does not display a table, confirm that the table exists, is published, and that the shortcode ID or slug is correct.</p>
<h3>Developer Notes</h3>
<p><strong>Data Model:</strong> Tables are stored as JSON in post meta (<code>_wstech_table_data</code>) with a <code>version</code> field for future migration support.</p>
<p><strong>Rendering:</strong> A shared PHP renderer (<code>WSTech_Table_Renderer</code>) generates frontend HTML for both Gutenberg blocks (via <code>render_callback</code>) and shortcodes.</p>
<p><strong>Block Name:</strong> The Gutenberg block namespace is <code>vtb/table-builder</code> (stable, will not change).</p>
<p><strong>Building from source:</strong><br />
    <code>cd wp-content/plugins/wstech-visual-table-builder<br />
npm install<br />
npm run build</code></p>


WSTech Visual Table Builder

Build responsive pricing tables, comparison tables, feature matrices and data tables with drag-and-drop editing, templates, sorting and search.

Dear

<p>Instead of forcing you to rebuild your tables from scratch using complicated tools, this PlugIn targets pre-existing or new tables built with the Classic Editor, Gutenberg (Block Editor), or raw HTML, and automatically enhances them. Automatically convert all normal pre-existing or new Classic, or Gutenberg, or HTML tables into fully Responsive Tables with Sortable Headers and Sticky-Header options. Build or edit tables directly within your Post, Page, or Product editor. Adjust Settings for additional customization and control.</p>
<h3>Smartest 4 Features for WordPress Tables</h3>
<ol>
<li><strong>Responsive Table</strong>: Automatically adjusts tables to fit any screen size, ensuring optimal readability on mobile, tablet, and desktop devices. Standard HTML tables often overflow on mobile screens. This PlugIn automatically forces tables to adapt dynamically to smaller screen sizes (like smartphones and tablets) so the text stays readable and the layout doesn’t break your site’s design. </li>
<li><strong>Sticky Table Head</strong>: If a Table is too long with too many rows, then some users forget context of what each column represents. So, you should lock table headers. This PlugIn keeps table header visible while user scrolls the table, and it helps users maintain context without forgetting what each column represents. </li>
<li><strong>Table Header Sortability</strong>: Enable header sorting functionality for your tables as needed. It adds interactivity by allowing visitors to click on a column header to sort the data (alphabetically or numerically), which is incredibly useful for data-heavy charts or product lists.</li>
<li><strong>Customize Styles</strong>: There are many popular table PlugIns where you have to build tables in a separate dashboard and paste a shortcode [table id=1] into your post, but this PlugIn does not have that sort of problems at all. This PlugIn works directly on the tables you type into your page or post editor. You can also customize the desktop and mobile CSS styles right from the PlugIn’s settings page. </li>
</ol>
<p></p>
<h3>Video Preview</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/t8cAiFIhtN4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p></p>
<h3>Why is this PlugIn best?</h3>
<p><strong>Direct Editing</strong>: Use the Classic or Gutenberg editor to create and edit tables directly in Page or Post or Product. Tables are styled and functional without additional markup or complicated workflows.</p>
<p><strong>No Shortcode Hassles</strong>: Skip the extra steps, as tables are styled and responsive without additional markup. But you have your freedom to custimize the default styles.</p>
<p><strong>Cross Browser Compatibility</strong>: Whether you are on a desktop, laptop, tablet, or smartphone, this PlugIn works smoothly with almost every leading browser, including Chrome, Firefox, Edge, Safari, Opera, and Brave.</p>
<p><strong>QC Passed</strong>: Tested to work with commonly used Themes and PlugIns.</p>
<p><strong>Lightweight and Fast</strong>: The PlugIn takes very low space in hosting, and optimized to load quickly and use minimal server resources.</p>
<p></p>
<h3>Are you happy?</h3>
<p>You are requested to provide positive review in WordPress.org with some extra clicks to share this PlugIn in your social network</p>
<p></p>
<h3>Looking for something special? Buy Pro</h3>
<p>You may enable all three</p>
<ol>
<li><strong>Responsive Table</strong></li>
<li><strong>Sticky Table Head</strong></li>
<li><strong>Table Header Sortability</strong></li>
</ol>
<p>options, any two, or a single one via the settings. In the free version, these specified modifications will apply uniformly across all Tables of your WordPress website. This is healthy for small websites. But if your website has lots of posts and pages, with lots of tables, you should consider upgrading to Pro. The Pro version allows control to turn On or Off these “Sticky Table Head, Header Sorting, Responsive” options directly at the individual page, post, or product level. Even you can customize “Desktop CSS Styles of Tables” and “Mobile CSS Styles of Tables” at individual page, post, or product level. </p>
<p>Buy <a href="https://dearstore.gumroad.com/l/auto-responsive-table-for-wordpress" rel="noopener nofollow ugc"><strong>WordPress PlugIn for Auto Responsive Table with Sticky Table Head, Header Sorting and Table CSS Style Customization</strong></a> from trusted marketplace <strong>Gumroad</strong>.</p>
</p>
<p>Thank you</p>
<p><strong>Tawhidur Rahman Dear</strong></p>
<ul>
<li><a href="https://itsolution.devilhunter.net" rel="nofollow ugc">Dear IT Solution</a>  : IT Consultancy, Web and App Development, AdSense, SEO, Graphic Design, Password Recovery and Security, Online Marketing, Corporate Services</li>
<li><a href="https://store.devilhunter.net" rel="nofollow ugc">Dear Store</a>  : WordPress PlugIn, JavaScript, CSS Code, Blogger Theme, Desktop Software for Windows</li>
<li><a href="https://apps.devilhunter.net" rel="nofollow ugc">Dear Apps Corner</a>  : More than 60 Android Apps to make your life beautiful</li>
</ul>
<p></p>


Auto Responsive Table

Responsive, Sticky Table Head, Table Header Sorting, Customize Table CSS. Works on all pre-existing or new Gutenberg and Classic tables. No shortcode.

WSTech Visual Table Builder vs Auto Responsive Table