how to make all columns visible in mobile of KTDatatable - datatable

Question

I am using KTDatatable. it works like a charm in desktop view. but when I view the table on the mobile screen, only first two-column is being shown. Code:
<div class="kt-datatable"></div>
<script>
function listing(){
$('.kt-datatable').KTDatatable({
translate: {
records: {
processing: '{{"Please wait"|__}}...',
noRecords: '{{"No records found"|__}}'
},
toolbar: {
pagination: {
items: {
default: {
first: '{{"First"|__}}',
prev: '{{"Previous"|__}}',
next: '{{"Next"|__}}',
last: '{{"Last"|__}}',
more: '{{"More pages"|__}}',
input: '{{"Page number"|__}}',
select: '{{"Select page size"|__}}'
},
info: "{{"Displaying"|__}} {{ '{{' }}start{{ '}}' }} - {{ '{{' }}end{{ '}}' }} {{"of"|__}} {{total}} {{"records"|__}}"
}
}
}
},
// layout definition
layout: {
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#generalSearch'),
delay: 400,
},
data: {
type: 'remote',
source: {
read: {
url: '{{url("api/dashboardpayments")}}'
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
// columns definition
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100
},
{
field: "amount",
title: "{{'Amount'|__}}",
sortable: false,
width: 'auto',
},
{
field: "trxId",
title: "{{'trxId'|__}}",
sortable: false,
width: 'auto'
},
{
field: "for",
title: "{{'Service'|__}}",
sortable: false,
width: 'auto'
},
{
field: "created_at_date",
title: "{{'Date'|__}}",
sortable: false,
width: 'auto',
},
{
field: "Actions",
width: 100,
title: "{{'Actions'|__}}",
sortable: false,
overflow: 'visible',
template: function (data) {
var output = '' +
'<div class="btn-group btn-group">'+
'<a href="javascript:;" data-id='+data.id+' class="btn btn-brand btn-sm btn-icon confirmPayment" data-skin="dark" data-toggle="kt-tooltip" data-placement="top" title="{{"OK"|__}}"><i class="fa fa-check"></i></button>';
'</div>';
return output;
},
}
]
});
$('body').tooltip({selector: '[data-toggle="kt-tooltip"]'});
}
</script>
I am trying a lot of possible ways of custom CSS. But no luck. Any idea?

Answer 1

To make this work you can add the following:
rows: {
autoHide: false
},
AND
// layout definition
layout: {
scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
header: true,
},

Answer 2

I just put autoHide:false in a column definition. i.e:
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100,
autoHide: false
}
]