jQuery datatables responsive buttons

Question

I am working the (fantastic) jQuery DataTables plugin and have begun to use the 'Responsive' extension so that it responds well on varied devices etc.

It is working fine however it adds some buttons to allow each row to be expanded to show the columns which have been hidden.

However, this is actually really annoying since it shows all the columns I have deliberately not shown as well as not looking ideal (imho).

Does anybody know how to remove these buttons?

Cheers,

Jack

Answer 1

I did a bit more or an intensive search of the docs and found that these 'expanded rows' are refered to as child rows and can be disabled as follows.

Initially I simply included the

"responsive": true,

tag in my datatables. These child rows may be disabled with:

"responsive": {
    "details": false
},

Answer 2

I thing you can override the CSS style of this button and hide it from user:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    display:none
}

Change also the padding of the cell:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {        
    padding-left: 10px; /* Instead of 30px */
}