Row and cell attributes not copied

[canihavesomecoffee]

Hello,

I've applied some additional data-attributes to the table rows & cells (which are being used for filtering & some other related functions), but unfortunately stacktable doesn't seem to copy them when generating the responsive tables.

Would it be possible to add this?

[origamifreak2]

@canihavesomecoffee I have the same issue. I'm adding a class that hides the cell, but since it doesn't pull over to the stacktable, the cell is no longer hidden when the stacktable is shown.

[jinch]

@canihavesomecoffee - did you ever work around this issue? I am facing the exact same issue and trying to work out the code.

[canihavesomecoffee]

@canihavesomecoffee - did you ever work around this issue? I am facing the exact same issue and trying to work out the code.

Yes, I kinda forked (locally) the code and patched the next lines of code:

https://github.com/johnpolacek/stacktable.js/blob/master/stacktable.js#L132-L139

In my version these lines read as follows:

var row = $(this).parent().clone();
row.empty();
row.attr('class', tr_class);
if ($topRow.find('td,th').eq(cellIndex).html()) {
    row.append('<td class="st-key">' + $topRow.find('td,th').eq(cellIndex).html() + '</td>');
} else {
    row.append('<td class="st-key"></td>');
}
var cell = $(this).clone();
cell[0].classList.add('st-val');
row.append(cell);
bodyMarkup += row[0].outerHTML;

So rather than constructing a new tr-element by hand and directly appending it to bodyMarkup, I clone a row (preserving any attributes), empty contents and then modify it to my likings.

[jinch]

Life saver - thanks @canihavesomecoffee - I will try this out!
Much appreciated!

I was taking this approach trying to pull in the attributes similar to the class / even tried filtering by class name but that wasn't great - was going in circles with no results.

`$table.find('tr').each(function(rowIndex) {

    // declaring headMarkup and bodyMarkup, to be used for separately head and body of single records
    headMarkup = '';
    bodyMarkup = '';
    tr_class = $(this).prop('class');
    tr_data = $(this).data();

    // for the first row, "headIndex" cell is the head of the table
    if (rowIndex === 0) {
      // the main heading goes into the markup variable
      markup += '<tr class="'+tr_class +'"><th class="st-head-row st-head-row-main" colspan="2">'+$(this).find('th,td').eq(headIndex).html()+'</th></tr>';
    }
    else {
      // for the other rows, put the "headIndex" cell as the head for that row
      // then iterate through the key/values
      $(this).find('td,th').each(function(cellIndex) {
        if (cellIndex === headIndex) {
          headMarkup = '<tr class="'+ tr_class +'"><th class="st-head-row" colspan="2">'+$(this).html()+'</th></tr>';
        } else {
          if ($(this).html() !== ''){
            bodyMarkup += '<tr class="' + tr_class +'" '+tr_data +'>';
            if ($topRow.find('td,th').eq(cellIndex).html()){
              bodyMarkup += '<td class="st-key">'+$topRow.find('td,th').eq(cellIndex).html()+'</td>';
            } else {
              bodyMarkup += '<td class="st-key"></td>';
            }
            bodyMarkup += '<td class="st-val '+$(this).prop('class')  +'">'+$(this).html()+'</td>';
            bodyMarkup += '</tr>';
          }
        }
      });

      markup += headMarkup + bodyMarkup;
    }
  });`

[jinch]

@canihavesomecoffee - this works great.

Is there a way to pull in the same attributes of a given row into the 'headMarkup'. When I filter my results the table head is removed as it does not share the same attributes.

Do you happen to have a code pen example of your working filter?

[canihavesomecoffee]

Probably doing something similar to what I did with the bodyMarkup replacement.

Sorry, I don't have any example live. The code is in use in a locally running website...

[jinch]

No worries and thank you for providing your solution. I can try to manipulate it to fit my needs.

I ended up throwing together a code pen. Its a bit sloppy but you can see the filter script I'm using at the very bottom of the JS:

https://codepen.io/jinch/pen/rNwWwQr

Your code seems to be working great at pulling in the attributes but in my case I also need to pull them into the <th> rows ~ to filter out all associations.

I will see if I can tweak your solution to fit / not sure there is a better approach to this. I'm kind of stuck trying to make it work with stackable.js at this point.

[jinch]

I got a slightly different approach working by pulling the attribute pairs into an array, then using in the markup (similar to how the class's are pulled in). Thanks again @canihavesomecoffee for your clone example but I couldn't get it to play nice with the headMarkup. With the array variable it was a little more inline with how the existing script is structured.

  var data = $(this).data(),
        tr_data = [];

   for(key in data) {
       tr_data.push("data-"+key + "=" + "'"+data[key]+"'");
    }

Below is my alternate attempt at pulling in attributes for use with a table filter if anyone is in need or interested.
Working CodePen: https://codepen.io/jinch/pen/JjJbzww?editors=0010