Using table-stack, the labels dont appear. What am I missing?

[jaketoolson]

I'm using the jquery plugin, with the accompanying css and js files, and when the window size is narrowed, the headings are not labels on the left. Is there some sort of markup I'm missing?

Using latest js (tablesaw - v3.0.0-beta.4 - 2016-10-12)

[markvaneijk]

I think you forgot to include the tablesaw-init.js :)

[charlesastwood]

I am seeing this too, did you manage to sort it? (tablesaw - v3.0.0-beta.4, jquery plugin)

[posixpascal]

I'm having the same issues (tablesaw-init is included). Manually triggering enhance.tablesaw doesn't work either.

[adrianpuescu]

My mistake was that I was adding the tablesaw classes and data-tablesaw-mode to a parent container, instead of the table. Check if you didn't do the same mistake first.

[posixpascal]

I'm using jQuery to set the tablesaw classes like this:

$("table:not(.no-tablesaw)").each(function(){
            $(this)
            .addClass('tablesaw tablesaw-stack')
            .data("tablesaw-mode", "stack");
});

Then I trigger the ?enhance.tablesaw` event on the table (triggering it on document.body) didnt' work as well.

Just as I'm typing it... You do mean data-tablesaw-mode instead of data-mode right?

It works and collapses the columns but skips the label part... not sure why. I didn't got it working yesterday right away and stopped tinkering with it. Maybe it has to do something with my dynamic page, I'll check later if it works on a plain site with nothing else but tablesaw.

[adrianpuescu]

Yeah, 'data-tablesaw-mode' (updated my comment). In your particular case, I think you'll have to replace .data("tablesaw-mode", "stack") with .attr("data-tablesaw-mode", "stack");

[posixpascal]

Thanks mate. It worked, I'm not exactly sure why? I thought there is no difference between attr and data (except that jQuery tries to JSON.parse the data value on retrieval).

So my current code looks like this:

$("table:not(.no-tablesaw)").each(function(){
            var currentTable = $(this);
            currentTable.addClass('tablesaw tablesaw-stack');
            currentTable.attr("data-tablesaw-mode", "stack");
            $(document.body).trigger( "enhance.tablesaw" );
});

My HTML:

<link rel="stylesheet" href="/site/templates/bower_components/filament-tablesaw/dist/stackonly/tablesaw.stackonly.css">
<script src="/site/templates/bower_components/filament-tablesaw/dist/stackonly/tablesaw.stackonly.js"></script>

That's it. :) Big thanks man.

[zachleat]

Yes—thank you @adrianpuescu!

@posixpascal: filament-tablesaw/dist/stackonly/tablesaw.stackonly.js is the shoestring version, which does not alias data to DOM attributes. Switching to filament-tablesaw/dist/stackonly/tablesaw.stackonly.jquery.js would’ve probably worked too. If you are already including jQuery on your page, I’d recommend making that change anyway, it’ll save you a few KB.

[jaketoolson]

@zachleat was there any solution generally speaking? @adrianpuescu of course I was including the JS.