Styjun

I'm using a responsive datatable with 7 columns. See it live within its template (it is the larger table): http://darasu.xyz/DatatableExample/datatable-ex.html

The one I'm using is from here:
https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html

I want all columns to always show on desktops. There is feasible space for it, plus I do not like the expandable "+" buttons showing by default.

It only seems to allow 6 columns to span across. The 7th is forced its own expandable row, as it should be if viewing on smaller view-ports. How do I make all rows visible when viewing on desktops, but remain responsive on smaller view-ports? Is 6 columns a default in jQuery datatables? If so, can I change it to 7 and how?

After reading the datatable documentation, I have tried varied classes to alter breakpoints, as seen here: https://datatables.net/extensions/responsive/classes

This has been a challenge as after I obtain my desired table on desktops, the table adapts behaviors in smaller view-ports which I do not want. Example: The class "all" will force the 7th column to be visible on all screens, which I do not want. "min-desktop" will force the 7th column to be visible on desktops or larger, but will hide another column to compensate. The same can be said for other breakpoint classes, or data-priority options: https://datatables.net/extensions/responsive/priority

The more I use these options to obtain my desired desktop table, the worse it looks on smaller view-ports.

I've tried gimmicky workarounds, such as forcing all data to show:

$(document).ready(function() {
 var table = $('#condolistings').DataTable( 
 responsive: 
 details: false
 
 );

Then assigning the table bootstrap classes which hide my table in smaller view-ports: "d-none d-xl-block d-lg-block", then adding a second responsive table which hides on desktops with classes: "d-lg-none d-xl-none". It worked but my borders got visually mangled by the "block" classes so it is not usable. (See: https://i.imgur.com/hIfHUfz.png)

Code:

<table id="condolistings" class="table table-bordered datatable-font nowrap" style="width:100%;">
 <thead>
 <tr>
 <th><strong>Unit</strong></th>
 <th><strong># Bed</strong></th>
 <th><strong># Bath</strong></th>
 <th><strong>Sq Ft</strong></th>
 <th><strong>Price</strong></th>
 <th><strong>Brokerage</strong></th>
 <th><strong>Favourite?</strong></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>#703</td>
 <td>2</td>
 <td>2</td>
 <td>743</td>
 <td>$628,000</td>
 <td>Luxmore Realty</td>
 <td><a class="colored-link" href="#">Add</a></td>
 </tr>
 <tr>
 <td>#602</td>
 <td>2</td>
 <td>2</td>
 <td>827</td>
 <td>$649,000</td>
 <td>Macdonald Realty Westmar</td>
 <td><a class="colored-link" href="#">Add</a></td>
 </tr>
 <tr>
 <td>#1502</td>
 <td>2</td>
 <td>2</td>
 <td>1103</td>
 <td>$849,000</td>
 <td>Coldwell Banker Westburn Rlty</td>
 <td><a class="colored-link" href="#">Add</a></td>
 </tr>
 <tr>
 <td>#1701</td>
 <td>3</td>
 <td>2</td>
 <td>1265</td>
 <td>$978,000</td>
 <td>Regent Park Realty Inc.</td>
 <td><a class="colored-link" href="#">Add</a></td>
 </tr>
 <tr>
 <td>#2402</td>
 <td>3</td>
 <td>3</td>
 <td>1637</td>
 <td>$1,308,000</td>
 <td>RE/MAX Central</td>
 <td><a class="colored-link" href="#">Add</a></td>
 </tr>
 </tbody>
 </table>

$(document).ready(function() 
 var table = $('#condolistings').DataTable( 
 responsive: true,
 "paging": false,
 "searching": false,
 "info": false
 );

 new $.fn.dataTable.FixedHeader( table );
 );

CSS files pulled from Bootstrap 4.

According to the official documentation:

Responsive has three modes of operation for controlling the visibility of columns in a table:

• Automatic - whereby Responsive will automatically determine if a column should be shown or not


• Manual - where you tell Responsive what columns to show on what screen sizes.


• Priority - Using columns.responsivePriority to tell Responsive which columns should be given visibility priority.

When you don't assign a class to a column, DataTables will automatically determine if a column should be shown or not. So if you want to force showing all columns on larger screen, you need to assign classes (desktop, min-desktop or all) to ALL columns.

I don't think there is a good way to switch to automatic mode on smaller screens, so you need to think which columns you want to show on smaller screens and use appropriate classes.

For example, with the following markup first three columns will be shown on all devices and last three columns will be shown on desktop (>1024px) devices.

<thead>
 <tr>
 <th class="all">Name</th>
 <th class="all">Position</th>
 <th class="all">Office</th>
 <th class="desktop">Age</th>
 <th class="desktop">Start date</th>
 <th class="desktop">Salary</th>
 </tr>
</thead>

See this example for code and demonstration.