Datatable responsive in Bootstrap 4 Tab - datatable

Question

I am develop a jsf application with a responsive datatable. It does not work fine in a real phone. When I touch and scroll up/down the table, it shows properly.
Here is the code for responsive:
<h:column a:data-priority="1">
<f:facet name="header">ID</f:facet>
#{_row.id}
</h:column>
<h:column a:data-priority="2">
<f:facet name="header">Số CMND</f:facet>
#{_row.code}
</h:column>
<h:column a:data-priority="2">
<f:facet name="header">Tên</f:facet>
#{_row.name}
</h:column>
<h:column a:data-priority="0">
<f:facet name="header">
<h:commandLink action="#{employeeEditBean.addDependent()}" value="Add" >
<f:ajax render="form#{tabname}" onevent="onEventAdd#{tabname}" />
</h:commandLink>
</f:facet>
<h:commandLink action="#{employeeEditBean.editEmployeeDependent(_row.id)}"
value="Edit" title="Hiệu chỉnh dòng"
>
<f:ajax render="form#{tabname}" onevent="onEventEdit#{tabname}" />
</h:commandLink>
<h:outputText value=" " escape="true" />
<h:commandLink action="#{employeeEditBean.editEmployeeDependent(_row.id)}"
styleClass="fa fa-trash" title="Xóa dòng" style="color: #e0a800 !important"
>
<f:ajax render="form#{tabname}Delete" onevent="onEventDelete#{tabname}" />
</h:commandLink>
</h:column>
Java script:
$('#tablexx').DataTable({
rowReorder: {
selector: 'td:nth-child(2)'
}, responsive: true
});
Here is the result:
I also put the app to my test server:
http://51.158.105.169:8080/hr
user:adam/pass:adam1
Please help me.
Thank you very much - VinhCC

Answer 1

I have the answer myself:
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
$(table).dataTable().fnAdjustColumnSizing();
}
});
});
Here is the result: