Design Academy / Content Management / How to Use Ninja Tables (and Import from TablePress)

How to Use Ninja Tables (and Import from TablePress)

Learn how to use Ninja Tables to create, import, and manage tables, plus how to replace old TablePress shortcodes and customize for mobile.

youtube-video-thumbnail

Transcript

Ninja Tables is a modern, responsive table plugin for WordPress that allows you to easily organize and display information—like team rosters, schedules, and commitment lists—in a professional, mobile-friendly format.

If your site previously used TablePress, you can import your existing tables directly into Ninja Tables and replace the old shortcodes to maintain your layouts seamlessly.

Step 1: Access Ninja Tables

  1. Log in to your WordPress dashboard.

  2. In the left-hand menu, click Ninja Tables.

  3. You’ll see options to Add Table, Import Table, or view existing ones.

Step 2: Import Existing TablePress Tables

If you have tables built with TablePress, you can move them into Ninja Tables without recreating them.

  1. Go to Ninja Tables > Import Table.

  2. Choose TablePress from the list of import sources.

  3. Select the table(s) you want to import.

  4. Click Import.

  5. Your TablePress data will now appear in Ninja Tables.

Tip: Imported tables keep their structure, but you can use Ninja Tables’ style options to enhance their appearance.

Step 3: Replace Old TablePress Shortcodes

After importing, you’ll need to replace any old TablePress shortcodes used on pages.

  1. Copy the new Ninja Tables shortcode (found next to your table title in the table list).

    • Example: [ninja_table id="3"]

  2. Go to any page or post where your old TablePress table appeared.

  3. Edit the content and replace the old shortcode (e.g., [table id=3 /]) with the new Ninja Tables shortcode.

  4. Click Update or Publish.

Your page will now display the imported table using Ninja Tables.

Step 4: Customize Your Table

  1. Open your table in Ninja Tables.

  2. You can:

    • Edit columns and rows

    • Add sorting and filtering options

    • Change background and text colors

    • Add links or buttons in cells

    • Enable pagination for long tables

  3. Use the Preview button to see how it will look on your site.

Step 5: Adjust Mobile Responsiveness

Ninja Tables includes built-in mobile optimization features, so your tables display cleanly on smaller screens.

  1. While editing your table, click the Table Design tab.

  2. Under Responsive Breakpoints, choose how your table should behave on mobile:

    • Stackable Table: Converts rows into cards for easier viewing.

    • Scrollable Table: Allows horizontal scrolling.

    • Hide Specific Columns: Hide less important data on mobile.

  3. Save your settings and preview on a phone or tablet to confirm layout.

Step 6: Save and Display

  1. Click Save Settings when finished.

  2. Use your shortcode anywhere in BeaverBuilder by adding an HTML or Text Editor module, and pasting the shortcode there.

Key Features of Ninja Tables

Responsive Design: Works perfectly on desktop, tablet, and mobile.
Easy Import: Bring in tables from TablePress, CSV, or Google Sheets.
Visual Styling: Customize colors, fonts, and layouts without code.
Sorting & Filtering: Let users organize data instantly.
Conditional Formatting: Highlight specific values or results.

Best Practices

  • Keep column headers short for better mobile display.

  • Use sorting and search features to make long tables easy to browse.

  • Always test new tables on both desktop and mobile.

Related Topics

WordPress offers a convenient solution with its Media Library if you’re managing a youth sports website and need to handle...

How to Add A Page

2 min
Page Editing

Imagine a dynamic webpage for your youth sports team that’s as easy to build as playing with building blocks. With...

WordPress Dashboard

1 min
Dashboard, Website Basics

The WordPress Dashboard is the central hub for managing your WordPress website.

In the digital age, where information is a valuable commodity, securing your online presence is paramount. For WordPress site owners,...