Ninja Tables has a unique function that will boost the effectiveness of your table. This feature has contributed to Ninja Tables becoming even more user-friendly and adaptable.
Stackable Table allows you to partition each row of any table into individual tables. It results in a stacked table arrangement that is compatible with all types of devices.
This easy guide explains to you how to quickly and easily build up stackable tables!
Note that Stackable Table and Responsive Breakpoint will not work together. Either you can use Stackable Features or Responsive Breakpoints.
- First, go to the Ninja Tables dashboard → click on the Edit option of the particular Table.
- Next, click over the Table Design tab placed at the top panel. Then at the bottom of the Styling tab, you will notice the Stackable Table Configuration option.
- Now, select the Enable Stackable Table checkbox. Once this step is done, the Target Devices option will appear.
- And make sure you click the Update Settings button to save the changes. Here you can choose your table to be displayed in a stacked format on various devices that suits your requirements, as shown below –
- Given below is an example of a Product Listing table after enabling a stackable table on Tablet Device.
- You will notice that separate tables have been generated in a stacked layout from individual rows. And to adjust the columns in this device width, the row header & content is placed on the left & right side, respectively. This step is similarly applicable to mobile, laptop, and desktop devices.
- Stackable Tables has another amazing feature, which allows you to customize the appearance in a stacked view of your table. Following the screenshot below, click on the Hide Column Headings located under the Stacked Appearance option.
- Then here comes the fun part: the column on the left side is now hidden. And if you want to hide the internal borders of the table, just select the Hide Internal Borders checkbox. Take a look at the example below to hide column headings –
- As you can see, the left column heading is no longer visible.
This is how easy it is to configure the Stackable table format in your Ninja tables!
