When it comes to design and user experience, responsiveness is the first thing that comes to mind. It’s important to make your tables responsive to all devices so that the content is visible and readable.
Ninja Tables gives you control of your table’s responsiveness, so you don’t have to worry about your tables fitting into different device screens.
You can find this option on the leftmost side of the Table Editor and see the responsiveness setting is turned on by default.
Properties of Responsive option #
| Scope | Option Name | Option Type |
| Mobile | Disable Breakpoint | Toggle On or Off |
| Top Row as Header | Toggle On or Off | |
| Items Per Header | Numeric Value | |
| Cell Border bottom | Numeric Value | |
| Tablet | Disable Breakpoint | Toggle On or Off |
| Top Row as Header | Toggle On or Off | |
| Items Per Header | Numeric Value | |
| Desktop | Top Row as Header | Toggle On or Off |
| Static Top Row | Toggle On or Off |
Responsiveness on mobile and tablet #
Disable Breakpoint: You can disable the breakpoints, which is the variable to show contents in separate ways for different display outputs. Turning responsiveness off and disabling this gets the same in output.
Top Row as Header: With this option, you can set the top row as the header (or turn it off) for mobile devices. By default, it is set to on.
Items Per Header: Additionally, you can set the number of items per header to show more contents in a single view or stack. By default, it is set to 1.
Cell Border bottom: The separator border per stack can also be thickened or thinned by setting the value. By default, it is set to 4.
Responsiveness on desktop #
Top Row as Header: Same as Mobile and Tablet.
Static Top Row: Same as Mobile and Tablet.
