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.
- 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.
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.
- 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.
- 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.
- 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.
- 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.
Advanced Settings #
In Advanced Settings, you can have multiple options for configuring your columns.
Conditional Formatting #
Conditional Formatting will allow you to give a condition for formatting your columns in very different ways.
Transform Value #
Using Transform Values, you can transform values from one to another.
Table Design Tab #
In this section, you will find three design options for configuring your tables. They are Styling, Table Colors & Other.
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 UI, Bootstrap 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 Cells, Fixed Layout, Hover Rows, Bordered 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.
- 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.
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.
- 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.