Datatable rowGroups not working on vue web components.

Datatable rowGroups not working on vue web components.

Sahan WeerakoonSahan Weerakoon Posts: 1Questions: 1Answers: 0
edited March 2022 in General

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

    <div class="group-datatable">
        <table id="example" class="display" ref="example" style="width:100%">
                    <th>Start date</th>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Garrett Winters</td>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Airi Satou</td>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
    import $ from 'jquery';
    import '';

    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();

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


  • allanallan Posts: 61,669Questions: 1Answers: 10,096 Site admin

    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 '';


Sign In or Register to comment.