Implement responsive data tables by setting a specific class for hiding columns

Question

Implement responsive data tables by setting a specific class for hiding columns

Having trouble assigning a specific class name to individual columns in datatables? It seems that when columns are hidden using the responsive extension, the desired class is not applied. Looking for a solution or workaround.

Check out this example from Datatables:

https://datatables.net/extensions/responsive/examples/display-control/init-classes.html

The visible salary column has a class of desktop

$('.desktop').length;
12

The hidden extn column has a class of none

$('.none').length;
0

Edit:

Seems like there's been an ongoing issue since 2016 regarding this matter.

https://github.com/DataTables/Responsive/issues/93

Any suggestions for workarounds would be greatly appreciated.

Take a look at this jsfiddle for a visual demonstration of the problem.

http://jsfiddle.net/9n6qbcdr/

When the display size is reduced horizontally, the salary column disappears. Upon expanding it again, notice how the yellow color of the column is lost.

javascript jquery html css datatables

Answer 1

Answer №1

When the class is set to none, DataTables removes it from the table and displays Length: 0. To resolve this, you need to modify the class like this:

{ "data": "extn", className: "hiddenColumn" }

and apply CSS by adding display:none

Answer 2

When the class is set to none, DataTables removes it from the table and displays Length: 0. To resolve this, you need to modify the class like this:

{ "data": "extn", className: "hiddenColumn" }

and apply CSS by adding display:none

Answer 3

Answer №2

Utilizing Michał B's code as a reference, here is a solution:

HTML

<div class="container">
  <table class="dataTable table table-striped" id="example">
  </table>
</div>

CSS

td.customColumn{
  background-color:yellow;
}

.customColumn > .dtr-data{
  background-color:yellow;
}

Javascript

let dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422","$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "$433,060"],
];

let columnDefs = [{
  title: "Name"
}, {
  title: "Position"
}, {
  title: "Office"
}, {
  title: "Extn.",
  className: "customColumn"
}, {
  title: "Salary",
}];

let myTable = $('#example').DataTable({
  data: dataSet,
  columns: columnDefs,
  responsive: true,
}).on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
        if(typeof row.selector.rows[0] !== 'undefined'){
        $(row.selector.rows[0].nextSibling).find('li[data-dt-column="3"]').addClass('customColumn');    
    }

}).on('responsive-resize',function( e, datatable, columns ){
        $(columns).find('li[data-dt-column="3"]').addClass('customColumn');
});

Answer 4

Utilizing Michał B's code as a reference, here is a solution:

HTML

<div class="container">
  <table class="dataTable table table-striped" id="example">
  </table>
</div>

CSS

td.customColumn{
  background-color:yellow;
}

.customColumn > .dtr-data{
  background-color:yellow;
}

Javascript

let dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422","$170,750"],
  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "$86,000"],
  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "$433,060"],
];

let columnDefs = [{
  title: "Name"
}, {
  title: "Position"
}, {
  title: "Office"
}, {
  title: "Extn.",
  className: "customColumn"
}, {
  title: "Salary",
}];

let myTable = $('#example').DataTable({
  data: dataSet,
  columns: columnDefs,
  responsive: true,
}).on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
        if(typeof row.selector.rows[0] !== 'undefined'){
        $(row.selector.rows[0].nextSibling).find('li[data-dt-column="3"]').addClass('customColumn');    
    }

}).on('responsive-resize',function( e, datatable, columns ){
        $(columns).find('li[data-dt-column="3"]').addClass('customColumn');
});

Implement responsive data tables by setting a specific class for hiding columns

Answer №1

Answer №2

Similar questions

Choose options with selectize.js including option separators

The dynamic relationship between redux and useEffect

Ensure that the height of the div matches the height of the background image

The jQuery.one() function fires off twice

Tips for designing a customizable color scheme for your website

Incorporating conditional statements within a loop

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

Guide to including objects into your project without the need for babel through the use of CDN

Issues with Mega Menu functionality preventing items from being clickable and links from properly navigating

Is PHP-generated HTML not responding to external Javascript?

What is the best way to eliminate particular elements from a nested JSON payload in JavaScript?

After changing the page, the Facebook JS SDK fails to function properly when using JQueryMobile

Real-time database logging triggered by Firebase user authentication

Issue: The module "node:util" could not be located while attempting to utilize the "sharp" tool

Discover the steps to execute a continuous loop of animations on a singular component using framer-motion

Use jQuery's `on` method in conjunction with `load` to dynamically execute a function

Pushing down menu items in a dropdown CSS navigation bar

Experience the sleek transparency when black hues grace the interface on iOS 14 and above

Utilize CSS to style Hover effects

Add a custom filter to the active route for a stylish look