Can't get the responsive plugin to work in React + Webpack

Can't get the responsive plugin to work in React + Webpack

auris2018auris2018 Posts: 11Questions: 3Answers: 0
edited May 2020 in Free community support

I am moving my site to Rect and have no issues with any aspects of datatables apart from the responsive plugin.

I initiate the datatable as follows:

const $ = require('jquery');
$.DataTable = require('datatables.net');
require("datatables.net-select");
require("datatables.net-responsive");

Datatables work fine and so does the select plugin. The only thing that isn't happening is the table is not responsive. I have responsive priorities set as follows (they work in the old site):

Any help would be appreciated.

let tableParams = {
    autoWidth: true,
    data: [],
    dom: 'Bfrtip',
    select: {
        style: 'single'
    },
    "columnDefs": [
        { targets: 0, visible: false, searchable: false},
        { targets: 1, responsivePriority: 1 },
        { targets: 2, responsivePriority: 1 },
    ],
    "columns": [
        { data: "id"},
        { data: "id2", title: "title 1"},
        { data: "id3", title: "title 2"},
        { data: "id4", title: "title 3"},
        { data: "id5", title: "title 4"},
        { data: "id6", title: "title 5"},
    ],
    processing: true,
    language: {
        processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
    },
    aaSorting: [[1, 'asc']]
};

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

Replies

  • kthorngrenkthorngren Posts: 21,171Questions: 26Answers: 4,922

    I don't see Responsive being enabled in the code snippets you posted. Here are the options to enable:
    https://datatables.net/extensions/responsive/init

    Kevin

  • auris2018auris2018 Posts: 11Questions: 3Answers: 0

    Yes, you are right. I added 'responsive: true' in the tableParams and it works fine now.

    In the previous site, I enabled it in HTML so, when I lifted the javascripts, this wasn't in there.

    Many thanks.

This discussion has been closed.