jsoma / tabletop

Tabletop.js gives spreadsheets legs
MIT License
3.77k stars 444 forks source link

README confusion... also, "/d/e"? #157

Closed kylebakerio closed 5 years ago

kylebakerio commented 6 years ago

README glosses over an important option. When publishing, you are given the ability to publish as webpage, csv, tsv, etc. Which should we select?

Based on seeing "/pubhtml" on the end of the example URL, I assumed webpage was the only option as one point and this lib is based on that, so went with that. Should it be updated to handle a newer format, though? Or am I missing something entirely?

Next: I'm only getting a link with "/d/e" in it. Refreshing isn't solving that. It feels pretty crazy to see a comment in the instructions just say "that's bad--just try refreshing", with no explanation of what's going on, or no knowledge that refreshing will help eventually, or ever, or what in the world is going on.

It seems like there are other ways besides that URL that would be less ambiguous, like using an ID copied from the URL itself. I haven't gotten that far yet, but... maybe that'd be a better strategy for the readme demo, to avoid this /d/e weirdness?

I guess my point is, this readme intro isn't given me a strong lead as a new user here.

Thanks for the library, though, I'm glad it exists. Seems like lots of great work.

Cheers.

kylebakerio commented 6 years ago

had looked here, but looking a second time it looks like there are some solutions--using the share (instead of publish) url, and grabbing the id from the viewing url and copying onto a url of a specific format.

I've used the second option--seems to work when putting it into the address bar, so that's promising.

That gets me a successful ping to google, and I see in the network that it's finding the right spreadsheet because the response has the correct author field (the person who shared the document with me), but it's empty--the callback just logs an empty array, unfortunately. :/

will post when I resolve.

kylebakerio commented 6 years ago

next problem was due to inconsistent internet--I had read the bit that you cannot have blank rows. the spreadsheet I had had blank rows beneath the first row. I had tried fixing that by adding 'ignore' to the blank rows in one column, but that save hadn't propogagted to google sheets because of a glitch on the page it seems.

What is interesting is that even that first row didn't show up in that case. Weird.

erikawashere commented 6 years ago

I'm having the same problem. I used the sharing link and its just not working. Anyone else figure this out?

kylebakerio commented 6 years ago

yeah, I did figure it out. Do you still need help?

I ended up using this method:

loadGSheet = () => {
    Tabletop.init({
        key: '1dsdqf0vmAv_389X9anXP7_XN78Xv9EbN3p9yNxU-1kw',
        simpleSheet: true,
        callback: (data, tabletop) => m.redraw(), // console.log("finished loadGSheet", data) 
        postProcess: row => rowHandlers[row.type](row),
    });
}

Notice the 'key'? that's just an id taken out of the url. That's all you have to pass in. iirc, I guess the documentation is a little fallen behind.

Here's the original share link:

https://docs.google.com/spreadsheets/d/1dsdqf0vmAv_389X9anXP7_XN78Xv9EbN3p9yNxU-1kw/edit?usp=sharing

(so that you can see how I pulled the id from it)

erikawashere commented 6 years ago

Thanks for your help, but this didn't work either for some reason.

I'm sorry to be a bother, but is something out of order or do I need to remove something? Is that why its not running?

// pull data from google spreadsheet $(document).ready(function() { var spreadsheet_url = " https://docs.google.com/spreadsheets/d/1Oe_C2GkBJKnD5lm0TwOtP3oXasjtEnMiqxt2ScH13pc/edit?usp=sharing " Tabletop.init({ key: spreadsheet_url, callback: writeTableWith, simpleSheet: true, debug: true }); })

function writeTableWith (data) { console.log("Read in", data)

loadGSheet = () => { Tabletop.init({ key: '1Oe_C2GkBJKnD5lm0TwOtP3oXasjtEnMiqxt2ScH13pc', simpleSheet: true, callback: (data, tabletop) => m.redraw(), // console.log("finished loadGSheet", data) postProcess: row => rowHandlersrow.type, }); }

function writeTableWith (data) { console.log("Read in", data) }

// create table headers function createTableColumns(){

/* swap out the properties of mDataProp & sTitle to reflect
the names of columns or keys you want to display.
Remember, tabletop.js strips out spaces from column titles, which
is what happens with the More Info column header */

var tableColumns =   [

{"mDataProp": "citation", "sTitle": "Citation", "sClass": "center"}, {"mDataProp": "generaldescription", "sTitle": "General Description", "sClass": "center"}, {"mDataProp": "applicability", "sTitle": "Applicability", "sClass": "center"} ]; return tableColumns; }

// create the table container and object function writeTableWith(dataSource){

jqueryNoConflict("#demo").html("<table cellpadding='0' cellspacing='0'

border='0' class='display table table-bordered table-striped' id='data-table-container'>");

var oTable = jqueryNoConflict("#data-table-container").dataTable({
    "sPaginationType": "bootstrap",
    "iDisplayLength": 25,
    "aaData": dataSource,
    "aoColumns": createTableColumns(),
    "fnRowCallback": function(nRow, aData, iDisplayIndex) {
        console.log(aData);
        $("td:eq(2)", nRow).html("<a href='http://" + aData.website +

"'>Website"); return nRow; }, "oLanguage": { "sLengthMenu": "MENU records per page" } });

};

//define two custom functions (asc and desc) for string sorting jQuery.fn.dataTableExt.oSort["string-case-asc"] = function(x,y) { return ((x < y) ? -1 : ((x > y) ? 0 : 0)); };

jQuery.fn.dataTableExt.oSort["string-case-desc"] = function(x,y) { return ((x < y) ? 1 : ((x > y) ? -1 : 0)); };

On Sun, May 20, 2018 at 3:17 PM, Kyle Baker notifications@github.com wrote:

yeah, I did figure it out. Do you still need help?

I ended up using this method:

loadGSheet = () => { Tabletop.init({ key: '1dsdqf0vmAv_389X9anXP7_XN78Xv9EbN3p9yNxU-1kw', simpleSheet: true, callback: (data, tabletop) => m.redraw(), // console.log("finished loadGSheet", data) postProcess: row => rowHandlersrow.type, }); }

Notice the 'key'? that's just an id taken out of the url. That's all you have to pass in. iirc, I guess the documentation is a little fallen behind.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jsoma/tabletop/issues/157#issuecomment-390504596, or mute the thread https://github.com/notifications/unsubscribe-auth/All0JuprjDjKJDHRpxqZh-aBJkHets20ks5t0cEsgaJpZM4Tesf9 .

kylebakerio commented 6 years ago

Can't help you man. Not going to read and work on your code for you... Not sure why you have three init statements, but it's asking too much to expect me to decipher that. You need to provide small, tightly organized code samples if you want help, not just a wall of code.

Also, please use markdown properly to display code in a readable format.

erikawashere commented 6 years ago

ah, got it. Sorry, I was in a rush and think I accidentally highlighted everything and sent it out. But I see the issue now, so thanks!

On Mon, May 21, 2018 at 2:17 PM, Kyle Baker notifications@github.com wrote:

Can't help you man. Not going to read and work on your code for you... Not sure why you have three init statements, but it's asking too much to expect me to decipher that. You need to provide small, tightly organized code samples if you want help, not just a wall of code.

Also, please use markdown properly to display code in a readable format.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jsoma/tabletop/issues/157#issuecomment-390738041, or mute the thread https://github.com/notifications/unsubscribe-auth/All0JjJF3yghi6w219z9kdCdGkNXsFGHks5t0wS3gaJpZM4Tesf9 .

j2l commented 5 years ago

@kylebakerio thanks! You saved my day.