Welcome to Ninja Tables!
This tutorial will explain the most awesome feature, the “Drag & Drop Table” option of this plugin. We will be exploring the possibilities that are brought to you by Ninja Tables and how to use them to create WordPress table.
So let’s get started and create our first Drag & Drop tables visually with Ninja tables.
When we go to the Ninja Tables dashboard, we will be asked to either “Create Our First Table” or “Import From CSV” and we will be selecting the Create Your First Table button.
If you already have created tables earlier, then you will see a similar screen below and Click on the Add Table button.
Once you click on either button, you will see a popup dialogue with various options.
As we are going to explore the features of the Drag & Drop Table, we will be selecting this option from the left sidebar and name the table if we are going to create a table from scratch. Same goes for the other options- import from CSV/ JSON file or select readymade table templates scrolling below.
The first option we will select is to create a fresh table manually by increasing or lowering the rows and columns as marked in the above screenshot. As you can see, we’ve selected 2 rows and 2 columns and clicked on the create button.
Once you click on the create button, Ninja Tables will automatically redirect you to the newly created table with the Drag & Drop Table Editor.
The left section on the menu, grouped by General & Advanced sections, contains table cell elements that you can use in the table. Advanced sections are available in the Pro version.
The General or Free version marked inside the red box includes Text, Button, Icon, Rating, List, HTML, Shortcode, and Image elements.
And the Advanced or Pro version includes Styled List, Ribbon, Progress, and Text Icon as below screenshot.
The boxes in the center are Manage Cells and Background features to operate on the cells, row/column add/delete/duplicate and background colors.
And lastly, the section marked in the blue box provides a shortcode to be used throughout the website, a Preview button, and a Save Button to save the changes in the table.
If you want to create a table from a premade design, scroll a little after the first window to “Drag and Drop Table” opens.
There are 4 different table templates-
- Pricing tables
- Comparison tables
- Employee tables
- Schedule tables
Pick any table template and edit them to fit your purpose.
Now we will be adding a Text element to the table by dragging on the Text Element and dropping it onto the table.
Now once an element is added to the table, clicking on it will reveal the customization options for the element.
More on the customization per element is described in detail separately in documentation.
You can also drag or move, clone an existing element, or delete any element by hovering over the desired element, and it will show you 3 options that are move, clone (duplicate), and delete, as shown in the below screenshot.
Please check our documentation for more on settings, responsiveness, and elements.
Once all the customizations are done, click on the save button and check the preview as below.
From the preview page, we can see the shortcode for the table, editing options, the table data, and at the bottom a message indicating we are only previewing the table.
Now it’s time to use them or add the table to a page or a post. We will add our table on a page by the shortcode.
Below is an example screenshot of adding the table shortcode on a page:
Once the shortcode is added, we can view the page, and the final outcome of the data, design, and other settings applied to the table as below.
So that’s it!
Please check out our other documentation regarding the features of the Drag & Drop Tables and enjoy creating tables visually with Ninja Tables!
