Create Your First Table

Creating a Table with Ninja Tables is as simple as a piece of cake!

If you don’t have Ninja Tables installed, or if you don’t know how to install it, no worries! There is an installation link to how to do that.

Let’s look at how to create a table by going through the article –

Add Table #

  • First, go to the WordPress Dashboard then navigate to Ninja Tables Plugin from the sidebar.

  • Now, Click the Add Table button on your screen’s top right.

  • After clicking on the Add Table button, a popup will appear with the Table Title & Description.

create table online
Table Title & Description

  • Fill up the form and then click the Add button to add a new table.

  • Clicking on the Add button will send you to the Table Rows tab.

add new column
Table Rows Tab

Table Rows #

  • Initially, in the Table Rows tab, you will find only a button which is Add Column button, to create columns.

  • After clicking on the button, an Add Table Column popup will appear with Column Name & Column Key. Fill up the form, then.

Add Table Column
Add Table Column
  • After creating a column, you will get two buttons in the top right corner of the page. One is for creating columns, and another is for inputting data into the created columns.

  • This Table Rows section is used for creating columns and putting data into the created columns.

Table Rows Section
Table Rows Section
  • In the Bulk Actions dropdown, you can delete your Entries by clicking on that particular row, or you can select all of the rows in one click & then Delete Entries → Apply button.

Bulk Actions
  • You also have the choice of Compact View besides the Bulk Actions. It remains to be disabled by default. This option lessens the padding of the rows’ cells when it is enabled.

  • In addition to the Compact View option, there is also a Show meta data option that allows the user to view specific cell data. When this option is enabled, three additional columns—Row ID, Created By, and Reference Date—will be added to the table automatically.

  • Row ID defines the serial number of the table row.

  • The Created By Column will display the name of the person who created the rows.

  • Reference Date displays the date and time when each row was created.

Show Meta Data
  • There are helper shortcodes where you can display your table cell data for a specific table. To know more, check here.

  • You can use any cell to search in the Search Field and find the rows you’re looking for.

  • You may quickly drag and drop your rows and arrange them as needed by enabling the Sort Manually option.

Table Configuration Tab #

  • In this tab, you can add a column and configure your desired Column Name, Column Key (Column key will automatically generate based on your given column name), Data type, Responsive breakpoint, and so on.

  • After setting up, click the Add Column button to add a column. You will also find multiple for configuring your table columns.

  • To configure each column, you need to click on the edit icon, so that you will get four different options. They are Basic Settings, Advanced Settings, Conditional Formatting, Transform Values, etc.

Basic Settings #

Using Basic Settings, you can do basic configuration, including responsive breakpoints of your table configuration.

Basic Settings
Basic Settings

Advanced Settings #

In Advanced Settings, you can have multiple options for configuring your columns.

Advanced Settings
Advanced Settings

Conditional Formatting #

Conditional Formatting will allow you to give a condition for formatting your columns in very different ways.

Conditional Formatting
Conditional Formatting

Transform Value #

Using Transform Values, you can transform values from one to another.

Transform Value
Transform Value

Table Design Tab #

In this section, you will find three design options for configuring your tables. They are Styling, Table Colors & Other.

Variety of Design Options
Variety of Design Options

Styling #

On the right sidebar, you will notice the first tab, named Styling. This tab itself has three separate styling options.

  • The first feature is the Select Styling Library, which manages the library you have to work with. Three different libraries are available in this segment: Semantic UIBootstrap 4 & Bootstrap 3. Each of these libraries has various components once you select one of them.

  • The second feature is the Styles option which offers several functions like Single Line CellsFixed LayoutHover RowsBordered Table, and many more. Check these options according to your styling needs.

  • The other function is the Features which defines many components; all you have to do is to check the one you need for setting your table.

Styling option

  • Last but not least, you can show your rows as a list item with a stackable table. You can target by device width.

Table Colors #

You can style your table in 13 different color schemes. Feel free to check all those color-scheme to find the best color scheme for your table. There is a Color Scheme that extends the styling option of the table. You will find a bunch of custom color options for your table design.

predefined table colors
Table Colors Option

Other #

Pagination – Under the Other option, you will find the pagination section. You can select how many items you want to show per page in this section. You can also disable pagination here.

Other option tab
Other option tab
  • Click on the Update Settings button after finishing up your table configuration.

Add Rows in Table & Duplicate Table #

In this tab, you can insert data into your table.

  • After you click the Add Data button, it will let you add data for one row and then another, and so on.

  • In this Table Row tab, you can also manage your data by deleting or updating the option under the Actions column on the right side of every row.

  • You will find two icons for editing or updating row data and delete options.

You can use Bulk Action if you need to delete more than one entry. You can also duplicate each table using the Duplicate icon in the table dashboard.

  • Let’s visually look at the video demonstration of the basic table setup using the Ninja Tables plugin.