Creating Responsive Datatables with Tablesome

There is a common thought that “Datatables don’t usually have a responsive design”.
Why? Simply because datatables can be quite wide because they could have many number of columns.

To have a responsive design, on a datatable a single row of data needs to be kept together to make any sense.

Generally, HTML tables are not responsive and even if you add an element to make the HTML  table scrollable, users find that your datatable are not responsive.

Creating responsive tables in WordPress has become very easy with a Tablesome plugin. With the Tablesome WordPress table plugin you can quickly create responsive datatables with a large number of rows and columns.

How To Make Your Datatable Responsive

In Tablesome, when a table is created it will automatically adjust the width of the columns based on the content of the column.

Tablesome optimizes the table’s layout for different screen sizes and tables look great on all devices including mobile devices & tablets (iPhone, Android, etc,).
That means it will always take a minimum width required to present its content.

Responsive Horizontal Scroll Bar

When Tablesome container element overflows, a scroll bar is added to accommodate the table content. You can scroll to the side and view the table content that does not fit the screen.

Tables are responsive by default and it will automatically add a horizontal scroll bar if the table size exceeds the screen size (the screen is too small to display the full table).

Tablesome tables can be scrolled horizontally with ease. You also get additional options for responsive tables in Tablesome settings listed under Table Layout options, which we will see below.

Table Layout Options

To access Tablesome Layout options:

• In your WordPress dashboard, find the Tablesome Menu and click Tablesome → Tablesome Settings
• On the General Settings page scroll down and you can find the Layout Options section

Here you can find multiple options for creating responsive tables. Let’s see them one by one:

 

Table Display Mode

Tablesome comes with 2 display modes they are

1. Fit to Container
2. Standard

Fit To Container Mode

If you choose this display mode table would be automatically resized to fit the screen size (container).

If your table size is small it will stretch the table to fill the page container, as you see in the image below.

Standard Mode

In the standard display mode, the column width is assigned based on the content and the table aligns to the left.

 

Minimum Column Width

Since the column width is generated based on the content, some columns with lesser content could end up having less column width which might obstruct visibility.

 

In this case, enable the Column Minimum Width option and set a minimum width for your columns. To do this,

• Go to Layout Options → Enable Column Min Width
• Then in the Column Min Width field give width in pixels

So all the table columns which have less than the set Minimum Width will resize to have the minimum width.

Datatable Fixed Column

Usually, in a large datatable, the first column would give context to all the records and when you scroll the table the first column would be hidden and you might go out of context.

For example, if you see the previous image which is a sports league statistics table the first column contains the team names and the names are not visible as you scroll to the right.

To fix this you need to fix the first column so that it gets displayed even when you scroll. Tablesome gives you the option to fix the first column. To do this,

• Go to Layout Options → Sticky First Column
• Click the Sticky First Column to enable this option and save the settings

Now the first column would be fixed to the screen even when you scroll.
The Sticky First Column option would be very helpful, especially for  mobile responsive datatables.

Mobile Layouts

When you’re viewing the table on a mobile phone, in some cases the scroll bar with a sticky first column may not be enough.

People might want to see all the data at the same time, not wanting to scroll.

In this case, you can enable the Stack Mode. To do this,

• Go to Layout Options → Mobile Layouts
• Here click the “Stack” and save the settings

Stack Tables On Mobile Devices

In the Stack Mode, all table columns stack upon each other for each row on mobile devices. Other datatables features such as Filter, Search and Pagination will work on Stack Mode.

 

Upcoming Table Responsive Features

• Responsive breakpoints – set breakpoints for responsive features
• Datat table hide column responsive – some columns will be hidden in responsive mode