Ninja Tables

Appearance

Onboarding & Setup Guide ​

Get started with Ninja Tables in just a few simple steps. This guide shows you how to create your first table, add data, customize its settings, and publish it on your website with ease.

Let's walk through the setup, step by step.

Step 1: The Welcome Screen ​

Right after activation, Ninja Tables greets you with a welcome screen. From here you can click Create Your First Table to start from scratch, or Import Table if you already have data to bring in. The Ninja Tables Guide links below give quick access to the Documentation, Introduction, Templates, and Demo.

Ninja Tables welcome screen

You can always get back to this screen later — click Ninja Tables in the WordPress Dashboard sidebar to open the All Tables screen, where every table you create will be listed alongside Tools and Settings and Help & Documentation.

Step 2: Choose Your Table Creation Method ​

Clicking Create Your First Table opens the How would you like to create your table? popup. Pick a method from the left menu:

  • Default: Build a table manually, column by column.
  • Drag & Drop Table: Build a table visually in Simple Mode by dragging elements onto it.
  • Connect Fluent Forms: Build a table from your Fluent Forms entries.
  • WP Posts: Build a table from WordPress posts or any custom post type.
  • FluentCart Table: Build a table from your FluentCart products.
  • Connect Google Sheets: Sync a table's data from a Google Sheet.
  • Connect External CSV: Point a table at a remotely hosted CSV file.
  • Custom SQL Query: Build a table directly from a custom SQL query.

For this walkthrough, we're picking Default. Fill in the Table Title (required), choose a Rendering Engine FooTable (lightweight and responsive, the default) or DataTables (better performance for large datasets) and optionally add a Table Description using the built-in editor. Click Add when you're done.

Choose your table creation method

See Create Your First Table for a full walkthrough of the manual builder, or the Data Sources & Integration guides for the other connection-based options.

Step 3: Add Your First Column ​

Clicking Add takes you into the table editor, opened on the Table Rows tab. Your table's shortcode (for example [ninja_tables id="158"]) is shown at the top, ready to paste into any post or page. Since the table has no columns yet, click + Add Column to get started.

Table editor with no columns yet

Step 4: Configure the Column ​

The Add Table Column popup opens on Basic Settings, where you set the Column Name, Column Key, Data Type (Single Line Text Field, Numeric Value, HTML Field, and more), and Responsive Breakpoint. The Advanced Settings, Conditional Formatting, and Transform Value tabs let you fine-tune the column further. Click Add Column to save it.

Add Table Column settings popup

Step 5: Add Your Data ​

Back on the Table Rows tab, your new column now appears. Click Add Data to start entering rows, or + Add Column to keep building out your table's structure.

Add Data button on the Table Rows tab

Step 6: Configure & Style Your Table ​

With your table's basic structure in place, the tabs at the top let you go further:

  • Table Configuration: Manage Columns, Rendering Settings, Custom Filters, Buttons (CSV/Print), and Language Settings.
  • Table Design: Choose a style library, colors, and layout options like the stackable/responsive table.
  • Frontend Editing: Let visitors edit table data directly on the frontend.
  • Custom CSS/JS: Add your own styling or scripts.
  • Import/Export: Bring in or send out table data.

Table Configuration tab showing available columns

You can also see Create Your First Table for the detailed walkthrough of these tabs.

Quick Access: Creating More Tables ​

Once you're set up, you can always return to this flow from All Tables, click Create New Table at any time to start a new table using any of the same creation methods.