Support » Plugin: Inline Google Spreadsheet Viewer » Trying to adjust number of spreadsheet columns that appear in table

  • Resolved beparnas

    (@beparnas)


    Hi there,

    I’ve spent a while going through the faq, the datatable reference, and this forum, and I still cannot figure out how to accomplish this. I’m not a webdev, so hopefully I don’t sound too clueless.

    I have a gdoc with 7 columns, and I want to only show the first 5. But I don’t want to entirely hide the last two (like was discussed Here, instead I want them to appear when the plus button is pressed. I’m sure that there’s a way in dataTables to do this, but I’m not sure if there is a shortcode command for it? right now I have the default shortcode running, and depending on the column positions in the spreadsheet I can sometimes get it to work, but that doesn’t feel like the right way to do it.

    Any help is appreciated. Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Meitar

    (@meitar)

    I think you’re looking for the Responsive extension’s breakpoints options. This is a bit of a tricky thing without experience in Web development, but not impossible to do. There’s no shortcode attribute to do this; you’ll need either to add your own JavaScript or write a JSON object into the plugin’s Settings page.

    Ok, yeah that seems like it would work. I would think that I could put in a width for “Desktop” that is less than infinity, say a value that forces the other columns to appear in the next rows, yeah? something like this:

    $.fn.dataTable.Responsive.breakpoints = [
        { name: 'desktop',  width: <some#> },
        { name: 'tablet-l', width: 1024 },
        { name: 'tablet-p', width: 768 },
        { name: 'mobile-l', width: 480 },
        { name: 'mobile-p', width: 320 }
    ]
    $('#???IDK what goes here').DataTable( {
        responsive: true
    } );

    I’m not sure how to add this to the plugin however, the default settings show this:

    {
        "dom": "B<'clear'>lfrtip",
        "buttons": [
    
        ]
    }

    would I just add it below the buttons tag? I’m not familiar with any of the syntax here :/ .

    Plugin Author Meitar

    (@meitar)

    Replace ???IDK what goes here with the HTML ID of the table to which you want to apply the given settings in the excerpted JavaScript. You’ll need to inspect your web page itself to see what the table’s ID is. Have a read through your browser’s developer tools to learn more about inspecting page elements (Firefox, Chrome docs).

    would I just add it below the buttons tag? I’m not familiar with any of the syntax here :/ .

    The syntax here is JSON.

    Ok, so I spent some more time reading through the reference on dataTables, and this example is the closest I can find to what I intend to do, basically apply the none names for the last two columns in my data. I assume this should be done in the JSON initialization object, something like:

    {
        "responsive": true,
        "columns": [
                { "data": "Category",className: "min-phone-l" },
                { "data": "Item",className: "All" },
                { "data": "Preview",className: "All" },
                { "data": "In Stock? ",className: "desktop" },
                { "data": "Price per item/unit",className: "min-phone-l" },
                { "data": "Description", className: "none" },
                { "data": "Quantity In stock",className: "none" }
            ]
    }

    However the data object here is just from the example, I would need to use whatever is containing the data from the spreadsheet, correct? When I try to apply this to the plugin, it resets to the defaults. But does this look right otherwise?

    for reference, this is the data source.

    • This reply was modified 3 years, 11 months ago by beparnas.
    • This reply was modified 3 years, 11 months ago by beparnas.
    • This reply was modified 3 years, 11 months ago by beparnas.
    Plugin Author Meitar

    (@meitar)

    You need to quote your className key names.

    Bad:

    { "data": "Quantity In stock",className: "none" }

    Good:

    { "data": "Quantity In stock","className": "none" }

    Try JSONLint.com

    I have a question oriented the other way around: I’m trying to import a table with three columns but the third defaults to only being available under the plus button. What do I need to add to make all three rows available in a row without the plus button needing to be used?

    Plugin Author Meitar

    (@meitar)

    What do I need to add to make all three rows available in a row without the plus button needing to be used?

    class="no-responsive"

    I had tried that earlier but must have had something mistyped, it works perfectly now! Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Trying to adjust number of spreadsheet columns that appear in table’ is closed to new replies.