When using tag attribute in collection button, the view is wrong.

msd86911

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.

msd86911

Here is live view if some want to have a look:
https://live.datatables.net/puluduru/1/

allan

I'm not sure what your goal is here? The custom tag isn't accounted for in the default stylesheet, so if you wanted to do that, you'd need to customise the styling.

Allan