using angular datatables but not using colvis functionality of angularjs datatables instead using ng-show/hide to hide columns. The show/hide functionality works as expected but the width of th and td changes. I tried table-layout:fixed; but that does not help.
here is the html code
<div class="container">
<table id="taskSearch"
datatable="ng"
dt-options="dtOptions"
class="table table-bordered table">
<thead>
<tr>
<th ng-show="checkboxModel.pn">Policy Number</th>
<th ng-show="checkboxModel.lob">LOB</th>
<th ng-show="checkboxModel.state">State</th>
<th ng-show="checkboxModel.firstInsuredFirstName">First Insured First Name</th>
<th ng-show="checkboxModel.firstInsuredLastName">First Insured Last Name</th>
<th ng-show="checkboxModel.transEffDate">Transaction Effective Date</th>
<th ng-show="checkboxModel.policyEffDate">Policy Effective Date</th>
<th ng-show="checkboxModel.receivedPassDate">Received Pass Date</th>
<th ng-show="checkboxModel.documentType">Document Type</th>
<th ng-show="checkboxModel.inWorkflow">In WorkFlow?</th>
<th ng-show="checkboxModel.workflowTaskType">WorkFlow Task Type</th>
<th ng-show="checkboxModel.batchName">Batch Name</th>
<th ng-show="checkboxModel.systemOfRecord">System of Record</th>
<th ng-show="checkboxModel.taskPinName">Task PIN and Name</th>
<th ng-show="checkboxModel.taskStatus">Task Status</th>
<th ng-show="checkboxModel.taskComplexity">Task Complexity</th>
<th ng-show="checkboxModel.taskCompleteDate">Task Complete Date</th>
<th ng-show="checkboxModel.taskActualCycleTime">Task Actual Cycle Time</th>
<th ng-show="checkboxModel.taskTargetCycleTime">Task Target Cycle Time</th>
<th ng-show="checkboxModel.docCreationSource">Doc Creation Source</th>
<th ng-show="checkboxModel.documentTypeCode">Document Type Code</th>
<th ng-show="checkboxModel.policyExpirationDate">Policy Expiration Date</th>
<th ng-show="checkboxModel.scanPinName">Scan/Import PIN and Name</th>
<th ng-show="checkboxModel.fileName">File Name</th>
<th ng-show="checkboxModel.uniqueDocId">Unique Doc ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ts in taskSearch">
<td ng-show="checkboxModel.pn">
{{ ts.policyNumber }}
</td>
<td ng-show="checkboxModel.lob">
{{ ts.lob }}
</td>
<td ng-show="checkboxModel.state">
{{ ts.jurisCode}}
</td>
<td ng-show="checkboxModel.firstInsuredLastName">
{{ ts.firstInsuredFirstName}}
</td>
<td ng-show="checkboxModel.firstInsuredFirstName">
{{ ts.firstInsuredLastName}}
</td>
<td ng-show="checkboxModel.transEffDate">
{{ ts.transEffDate }}
</td>
<td ng-show="checkboxModel.policyEffDate">
{{ ts.policyEffDate }}
</td>
<td ng-show="checkboxModel.receivedPassDate">
{{ ts.receivedPassDate}}
</td>
<td ng-show="checkboxModel.documentType">
{{ ts.docTypeDesc}}
</td>
<td ng-show="checkboxModel.inWorkflow">
{{ ts.inWorkflow}}
</td>
<td ng-show="checkboxModel.workflowTaskType">
{{ ts.workflowTaskType }}
</td>
<td ng-show="checkboxModel.batchName">
{{ ts.batchName }}
</td>
<td ng-show="checkboxModel.systemOfRecord">
{{ ts.systemOfRecord}}
</td>
<td ng-show="checkboxModel.taskPinName">
{{ ts.taskPinName}}
</td>
<td ng-show="checkboxModel.taskStatus">
{{ ts.taskStatus}}
</td>
<td ng-show="checkboxModel.taskComplexity">
{{ ts.taskComplexity }}
</td>
<td ng-show="checkboxModel.taskCompleteDate">
{{ ts.taskCompleteDate }}
</td>
<td ng-show="checkboxModel.taskActualCycleTime">
{{ ts.taskActualCycleTime}}
</td>
<td ng-show="checkboxModel.taskTargetCycleTime">
{{ ts.taskTargetCycleTime}}
</td>
<td ng-show="checkboxModel.docCreationSource">
{{ ts.tocCreateSource}}
</td>
<td ng-show="checkboxModel.documentTypeCode">
{{ ts.docTypeCode }}
</td>
<td ng-show="checkboxModel.policyExpirationDate">
{{ ts.policyExpDate }}
</td>
<td ng-show="checkboxModel.scanPinName">
{{ ts.ingestionUserDisplayName}}
</td>
<td ng-show="checkboxModel.fileName">
{{ ts.importFilename}}
</td>
<td ng-show="checkboxModel.uniqueDocId">
{{ ts.documentID}}
</td>
</tr>
</tbody>
</table>
</div>
css is the bootstrap css
table {
max-width: 100%;
background-color: transparent;
}
th {
text-align: left;
}
.table {
width: 100%;
margin-bottom: 20px;
}
.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #dddddd;
}
hide and show using angular
<div class="col-sm-3">
<li>
<label class="toggle-vis">
<input type="checkbox" ng-model="checkboxModel.pn">
Policy Number
</label>
</li>
<hr class="style1">
<li>
<label class="toggle-vis">
<input type="checkbox" ng-model="checkboxModel.firstInsuredLastName">
First Insured Last Name
</label>
</li>
<hr class="style1">
<li>
<label class="toggle-vis">
<input type="checkbox" ng-model="checkboxModel.documentType">
Document Type
</label>
</li>
</div>
for the one still having this issue, the wrong resize of the table happens 70% when you hide and show the table, cell or row with the wrong option in the display. Table's should not be 'display:block' or 'display:inline-block';
Here a detailed list of what each display does: https://www.w3schools.com/cssref/pr_class_display.asp
And here is a sample where you can hide or show a tbody based on a codition: