Heading row for tables

[WilliamStam]

ive been trying a few plugins to get my desired result. basicaly stackonly but with headings.

im using multiple thead and tbody tags for the table

<table class="table table-condensed records" id="content-table">
    <thead>
    <tr class="heading-row">
        <th colspan="5">Phone</th>
    </tr>
    <tr class="cols">
        <th>ID</th>
        <th>Heading </th>
        <th>Type</th>
        <th>Created</th>
        <th>Staff</th>
    </tr>
    </thead>
    <tbody>
    <tr class="record">
        <td>1</td>
        <td>Phoned them to bitch</td>
        <td>Phone</td>
        <td>2017-02-16 11:20:46</td>
        <td>William Stam</td>
    </tr>
    <tr class="record">
        <td>3</td>
        <td>following up on the bitch</td>
        <td>Phone</td>
        <td>2017-02-16 11:25:23</td>
        <td>William Stam</td>
    </tr>
    </tbody>
    <thead>
    <tr class="heading-row">
        <th colspan="5">Email</th>
    </tr>
    <tr class="cols">
        <th>ID</th>
        <th>Heading </th>
        <th>Type</th>
        <th>Created</th>
        <th>Staff</th>
    </tr>
    </thead>
    <tbody>
    <tr class="record">
        <td>2</td>
        <td>email went to spam</td>
        <td>Email</td>
        <td>2017-02-16 11:25:23</td>
        <td>Martin</td>
    </tr>
    </tbody>
</table>

editing the file tablesaw.stackonly.jquery.js

changed the line 95 odd

Table.prototype._getPrimaryHeaders = function() {
        return this.$table.find( "thead" ).children().filter( "tr" ).eq( 0 ).find( "th" );
    };

to

Table.prototype._getPrimaryHeaders = function() {
        return this.$table.find( "thead" ).children().filter( "tr.cols" ).eq( 0 ).find( "th" );
    };

(to correspond to my table's "column cells" but exclude the "heading" row.)

im guessing it should be added as an option to either the classes or attr parts. could do a PR for it but im only able to edit the jquery file :(

[zachleat]

Oh, interesting.

I added a getHeaderCells callback override to TablesawConfig to hopefully help you override this.

Try it out and let me know if this does enough for you. If not, please reopen the issue!

<script>
// make sure this goes before your tablesaw script
TablesawConfig = {
  getHeaderCells: function() {
    return this.$table.find( "do whatever you want just make sure you return some th elements" );
  }
};
</script>

[zachleat]

After looking into this closer, unfortunately the API for this will be changing since 3.0.1 has not yet been released. I’ll keep you updated.

[zachleat]

Also, I should say, per the HTML specification only (and tablesaw relies on this assumption), only one <thead> element is allowed on a table. Same goes for <tfoot>.

Alternately, multiple <tbody> elements are allowed.

[zachleat]

Alright when 3.0.1 is officially released, you’ll add the data-tablesaw-ignorerow attribute to your header-row rows. I think this will be an easier way to get where you want:

<tr class="heading-row" data-tablesaw-ignorerow>

[zachleat]

A few more features:

data-tablesaw-ignorerow:

• rows will stay in place while sorting.
• its visibility will not be toggled when columns are shown/hidden on column toggle mode
• its colspan will automatically be adjusted when columns are shown/hidden on column toggle mode
• if used on a thead row, it will be ignored when finding labels for stack mode

[WilliamStam]

awesome! sorry for not replying. things been a bit hectic.

i took a look at the code used for the plugin. before looking i thought there was some major voodoo at play. couldnt understand how on earth you managed to stack the table :P very clever.

i then also realized i have no need for a complete can-do-everything type plugin. i purely need to stack it. and my tables will almost always be the same (except for the amount of columns changing - users can select which field they want visible)

i think the changes you implemented would definitely improve the plugin tho. i created a mockup to see if it works and indeed it does! i might implement it into this project some time in the future tho (when my hack-it-together 15 line implementation self combusts and sets a few kittens on fire).

[simonwatt]

@zachleat I need this functionality (data-tablesaw-ignorerow) in a project I'm working on, so I installed 3.0.1-beta.21

In Toggle mode it seems to be working well. However, in Swipe mode it seems to cause lots of issues. For example as soon as I click on one of the swipe arrows (previous column and next column) the visible columns no longer take up the width of the table.

I need ability to have fixed columns (which I don't think I can get in Toggle mode) so it's not an option to switch everything to Toggle mode.

Is this data-tablesaw-ignorerow implemented in Swipe mode in 3.0.1? Or am I doing something wrong?

Thanks

[simonwatt]

The issue on swipe mode with data-tablesaw-ignorerow seems to be that the colspans aren't adjusted on the ignored row as the number of visible columns are changed.

[oliveiracdz]

Any workaround for the issue on swipe mode, @simonwatt ? https://github.com/filamentgroup/tablesaw/issues/274#issuecomment-297604918