When using tag field to use a different tag for the collection button, the div tag for the collection also change to button (instead of div) which causes the view to collapse on itself.
Here is the code I used:
<table slot="data" id="gtable">
<thead>
<tr>
<th data-column-name="first-name">First name</th>
<th data-column-name="last-name">Last name</th>
<th data-colum-name="summary">Summary</th>
<th data-column-name="age" data-cell-numeric>Age</th>
<th data-column-name="action" data-cell-action>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</td>
<td data-cell-numeric>25</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</td>
<td data-cell-numeric>21</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim a</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
</tbody>
</table>
<script>
let table = '#gtable';
let tableConfig = {
layout: {
topStart: 'pageLength',
topEnd: 'buttons',
bottomStart: 'info',
bottomEnd: 'paging',
},
buttons: [
{
name: 'Colvis',
extend: 'colvis',
tag: 'button',
collectionLayout: 'fixed columns',
},
],
};
$(table).DataTable(tableConfig);
</script>
Here is the view I get
Without the tag field, it is correctly represented as below:
Note: I am using a custom tag, I just used button here in this example for simplification.