Datatable rowGroups not working on vue web components.

Sahan Weerakoon

Hi,
I created a simple vue component for datatables with grouping enabled. Code for the vue component is as below.

<template>
    <div class="group-datatable">
        <table id="example" class="display" ref="example" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    import $ from 'jquery';
    import 'datatables.net-rowgroup-dt';

    export default {
        name: "GroupDatatable",
        mounted: function() {
            
            // $('#example').DataTable( {
            $(this.$refs.example).DataTable( {
                order: [[2, 'asc']],
                columns: [
                    { data: "Name" },
                    { data: "Position" },
                    { data: "Office" },
                    { data: "Age" },
                    { data: "Start Date" },
                    { data: "Salary" }
                ],
                rowGroup: {
                    dataSrc: "Office",
                    "showOnNull": true
                }
            } ).rowGroup().enable();
        }
    }
</script>
<style></style>

Following is the result of the output

I want to create a web componet for this component. When I create the web component using following command

npm run build -- --target wc --name v-card src\App.vue

Grouping is not working. The result is as below

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

allan

Could you try changing:

<div class="group-datatable">

to be:

<div class="group-datatable" v-once>

You don't want both DataTables and Vue trying to control the same DOM elements. That way lies madness .

If that doesn't resolve it, can you link to a test page showing the issue please? Depanding on what transpiler and loader you are using, you may need to do:

import RowGroup from 'datatables.net-rowgroup-dt';

RowGroup();

Allan