Copy cell classes to responsive display
Closed this issue · 3 comments
Deleted user commented
Copy classes from the td
/ th
cells to the li
tag to maintain styling.
Moved from DataTables/DataTables #864.
MichelleDiniz commented
Hi, first thank you for the good work.
Any news on this issue?
als9xd commented
Here is a workaround using events
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');
});
AllanJard commented
Can't recall when I committed the fix (and blame shows a newer commit), but [Responsive does indeed do this](
Responsive/js/dataTables.responsive.js
Line 1271 in 78abad2