Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82264

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

$
0
0

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.


Viewing all articles
Browse latest Browse all 82264

Trending Articles