Responsive Modes Feature Of Data Table Generator optimizes the table’s layout for any screen sizes through the dynamic insertion and removal of columns from the table.
Data Tables plugin provides different modes of Responsive design according to your needs and types of table or chart you use. Every table is special, and we care about display it perfect on any device:
- Standard Responsive mode – all columns become under each other with one cell per row.
- Automatic column hiding – columns will collapse from right to left. Click on “+” icon and you will see columns that are not fitted.
- Horizontal scroll – scroll bar will be added if table overflows parent container width.
- Disable responsivity – table without responsivity.
Do you want to check it? The elementary way to make table responsive is, of course, to make it with the help of Responsive Table Generator by Supsystic. Do you want to understand if your table is really responsive? The easiest way – open it on tablets, laptops or cell phones:
Standard Responsive mode
Name | Position | Extn. | Start date | Salary |
---|---|---|---|---|
Airi Satou | Accountant | 5407 | 28.08.2003 | $162,700 |
Angelica Ramos | Chief Executive Officer | 5797 | 09.09.2000 | $1,200,000 |
Ashton Cox | Junior Technical Author | 1562 | 12.09.1999 | $86,000 |
Bradley Greer | Software Engineer | 2558 | 13.12.2005 | $132,000 |
Brenden Wagner | Software Engineer | 1314 | 07.11.2007 | $206,850 |
Brielle Williamson | Integration Specialist | 4804 | 02.12.2010 | $372,000 |
Bruno Nash | Software Engineer | 6222 | 03.11.2009 | $163,500 |
Caesar Vance | Pre-Sales Support | 8330 | 12.11.2011 | $106,450 |
Cara Stevens | Sales Assistant | 3990 | 06.11.2014 | $145,600 |
Cedric Kelly | Senior Javascript Developer | 6224 | 29.12.2015 | $433,060 |
Charde Marshall | Regional Director | 6741 | 16.08.2006 | $470,600 |
Colleen Hurst | Javascript Developer | 2360 | 15.09.2000 | $205,500 |
Automatic column hiding
Name | Position | Extn. | Start date | Salary |
---|---|---|---|---|
Airi Satou | Accountant | 5407 | 28.08.2003 | $162,700 |
Angelica Ramos | Chief Executive Officer | 5797 | 09.09.2000 | $1,200,000 |
Ashton Cox | Junior Technical Author | 1562 | 12.09.1999 | $86,000 |
Bradley Greer | Software Engineer | 2558 | 13.12.2005 | $132,000 |
Brenden Wagner | Software Engineer | 1314 | 07.11.2007 | $206,850 |
Brielle Williamson | Integration Specialist | 4804 | 02.12.2010 | $372,000 |
Bruno Nash | Software Engineer | 6222 | 03.11.2009 | $163,500 |
Caesar Vance | Pre-Sales Support | 8330 | 12.11.2011 | $106,450 |
Cara Stevens | Sales Assistant | 3990 | 06.11.2014 | $145,600 |
Cedric Kelly | Senior Javascript Developer | 6224 | 29.12.2015 | $433,060 |
Charde Marshall | Regional Director | 6741 | 16.08.2006 | $470,600 |
Colleen Hurst | Javascript Developer | 2360 | 15.09.2000 | $205,500 |
Horizontal scroll
Name | Position | Extn. | Start date | Salary |
---|---|---|---|---|
Airi Satou | Accountant | 5407 | 28.08.2003 | $162,700 |
Angelica Ramos | Chief Executive Officer | 5797 | 09.09.2000 | $1,200,000 |
Ashton Cox | Junior Technical Author | 1562 | 12.09.1999 | $86,000 |
Bradley Greer | Software Engineer | 2558 | 13.12.2005 | $132,000 |
Brenden Wagner | Software Engineer | 1314 | 07.11.2007 | $206,850 |
Brielle Williamson | Integration Specialist | 4804 | 02.12.2010 | $372,000 |
Bruno Nash | Software Engineer | 6222 | 03.11.2009 | $163,500 |
Caesar Vance | Pre-Sales Support | 8330 | 12.11.2011 | $106,450 |
Cara Stevens | Sales Assistant | 3990 | 06.11.2014 | $145,600 |
Cedric Kelly | Senior Javascript Developer | 6224 | 29.12.2015 | $433,060 |
Charde Marshall | Regional Director | 6741 | 16.08.2006 | $470,600 |
Colleen Hurst | Javascript Developer | 2360 | 15.09.2000 | $205,500 |
Disable responsivity
Name | Position | Extn. | Start date | Salary |
---|---|---|---|---|
Airi Satou | Accountant | 5407 | 28.08.2003 | $162,700 |
Angelica Ramos | Chief Executive Officer | 5797 | 09.09.2000 | $1,200,000 |
Ashton Cox | Junior Technical Author | 1562 | 12.09.1999 | $86,000 |
Bradley Greer | Software Engineer | 2558 | 13.12.2005 | $132,000 |
Brenden Wagner | Software Engineer | 1314 | 07.11.2007 | $206,850 |
Brielle Williamson | Integration Specialist | 4804 | 02.12.2010 | $372,000 |
Bruno Nash | Software Engineer | 6222 | 03.11.2009 | $163,500 |
Caesar Vance | Pre-Sales Support | 8330 | 12.11.2011 | $106,450 |
Cara Stevens | Sales Assistant | 3990 | 06.11.2014 | $145,600 |
Cedric Kelly | Senior Javascript Developer | 6224 | 29.12.2015 | $433,060 |
Charde Marshall | Regional Director | 6741 | 16.08.2006 | $470,600 |
Colleen Hurst | Javascript Developer | 2360 | 15.09.2000 | $205,500 |
In order to create Responsive Data Table you need:
- On the left navigation menu click “Add new table”.
- Enter the name of the table and choose the number of rows and columns.
- Click the “Save” button.
- Open “Editor” tab in the table parameters.
- Add data to the table.
- Go to Features section.
- Choose Responsive mode you require.
Important! After changing the data of table don’t forget to click “Save” button.
Here is a short video tutorial “Data Table Generator Responsive Modes”
Data Table by Supsystic is perfectly capable to extend table functionality to your WordPress site. Trust us, that there is no need to go through other plugins, install the trial or even pro versions, wasting your time, money and efforts!
How to make a WordPress table responsive? Install Data Table Generator by Supsystic! It’s very easy and guarantees you the best result with no special efforts, some additional knowledge etc.