Ninja Tables has a useful feature that allows users to display data in a table utilizing six separate breakpoints. The device widths are all configured to the exact values appropriate for your goal. This feature helps to ensure that your website’s tables are responsive.
Here is a brief instruction on configuring Ninja Tables’ Responsive Breakdown. So let’s go over how this operates –
- First, go to the Table Configuration tab and click on the Edit icon (Pencil icon) on the right side of the column to modify your desired column to configure the responsive breakpoints.
- You will notice a drop-down containing six options in the Responsive Breakpoint field.
Let’s talk about the six responsive breakpoints in detail below –
- Always show on all devices: This lets the column gets displayed on every device.
- Hidden On Desktop: The column will be displayed on mobiles & tablets except for desktop devices.
- Initial hidden mobile: This allows you to view the columns on all devices other than mobile devices. The column hides beneath the plus(+) icon in the mobile view. So when a user clicks this icon, the hidden column data will be shown.
- Initial hidden Mobile and tab: This lets you view the columns on all devices other than mobile & tab devices. The column will be hidden under a plus(+) icon on mobile and tab devices. And the data from the column is shown when this icon is clicked.
- Initial hidden Mobile, Tab, and all Regular Computers: After selecting this option, the plus(+) icon will hide the column data on all kinds of devices. Like the previous options, users must click the plus(+) icon to display the data.
- Totally hidden on all devices: This option allows you to keep the columns hidden on all devices. Let’s see an example here in the first_name Column, Totally Hidden on all devices selected.
- See how it works –
You can choose any of the choices that best fit your needs. When you want to show certain data on limited devices, make sure you select the suitable configuration from the Responsive Breakpoint segment.
- Hide Empty Items on responsive breakdown: If You enable this, then the empty cell items of a column, then the responsive breakpoint will not show on this column.
- Hide Labels on responsive breakdown: If You enable this, then column headings will not show in a responsive drawer / Stackable View.
