Responsive Table Design

When it comes to design and UX, responsiveness is the first thing that comes to mind. It’s important to ensure a responsive table design 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 Table Design #

Option NameType
GeneralEnable Responsive TableToggle on or off
Mode OptionsMobileToggle, dropdown, numeric
TabletToggle, dropdown, numeric
DesktopToggle, dropdown, numeric
Responsive SettingsMobileNumeric & radio button
TabletNumeric & radio button

General #

Enable the table to be responsive by toggling the button on.

Responsivenss of a table

Mode Options #

Mobile and Tablet: From here, you can customize the responsiveness on mobile and tablet. Both the options have the same customization directions.

Enable table responsiveness on mobile
  • Disable Breakpoint will only work when the “Enable Responsive Table” mode is toggled on.
  • Cell Stack Direction works when you turn off “Disable Breakpoint” and change the direction of cells stacking as rows or columns.
  • Toggle the “Top Row as Header” option.
  • Control the number of Items Per Header.
  • Select Group Separator.

Desktop: This is where you can change the header and row position for a desktop view of the table.

table responsiveness of desktop

Responsive Settings #

You can change Cell Padding and Table Alignment for mobile and tablets the same way.

table responsiveness on mobile and tablet

For example, here’s the same table as mobile responsive with its top row as a header, 1 item per header, and “Rows” for Cell Stack Direction.

Mobile responsive table

And we can also show you another responsive table on a tablet that has the top row as its header, cell stack direction “column”, and 1 item per header.

Responsive table on tablets

Conclusion #

A responsive table design is a must to keep your audience engaged. Since everyone is now a mobile-user, you can’t deny them a good UX. Make your data tables responsive for all devices.

Let us know your thoughts.


Leave a Reply

Your email address will not be published. Required fields are marked *