Content responsiveness plays an important role now. Today, more and more users are accessing the Internet from smartphones and tablets.
The classic table display problem is when it comes to mobile devices. After all, as we know, tables can have many columns, which entails table crashes beyond the screen width on a mobile device.
DataTable is a great solution for displaying your content in fully responsive tables.
The table will be responsive, no matter how you created the Table: manually or imported via MS Excel, CSV, Google Sheet, SQL.
Thanks to the wide functionality and adaptive modes settings of the Data Table plugin, you can choose one of the adaptation modes, select which columns you want to see or hide on tablets and/or mobile devices.
Let’s walk through the process of creating a responsive DataTable:
Responsive design is the practice of designing a table so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops. Data Tables are fully responsive and look great on any device.
The plugin provides 4 different modes of Responsive design according to your needs:
- Standard Responsive mode.
In this mode, if table content doesn’t fit all columns become under each other with one cell per row.
- Automatic column hiding.
In this mode, table columns will collapse from right to left if the content does not fit to parent container width.
- Horizontal scroll.
In this mode scroll bar will be added if the table overflows parent container width
- Disable Responsivity.
Default table fluid layout
You can choose which columns you want to see or hide on tablets and/or mobile devices, while the data of the hidden columns will still be available to users who would like to see them in the drop-down list; it will collapse under the expandable box in the first visible column.
Let’s take a closer look at the responsiveness of columns:
- Always show in all devices: display column on every device.
- Hidden On Desktop: display columns on all devices except PC. On PC, the column will be hidden under the plus sign (+).
- Initial Hidden Mobile: display columns on all devices except mobile. On mobile, the column is hidden under the plus sign (+). If a visitor clicks the plus sign (+), their details will be shown in a hidden column.
- Initial Hidden Mobile and Tab: display the column on all devices except mobile and tabs. On mobile and tabs, the column will be hidden under the plus sign (+).
- Initial Hidden Mobile, Tab and Regular Computers: the column data will be hidden under the plus sign (+) on each device.
- Totally hidden on all devices: hide column on all devices.
Conclusions
As you can see, with the DataTable plugin, your table will look compact and informative, regardless of the device.
Still, have questions or need help? Explore our detailed documentation, or contact us and we will be happy to help you!