Set Grouping Column "colspan" to More Than "1"

Feature Requests
1

I have a table, where records are grouped together by a particular column, using the built in "Group common records based on this field's value" option.

The field however, is automatically set "td style colspan = '1'", which can squish the field down tremendously.



Seeing as though no other information appears in that row, could we please get that "colspan" to match the total number of columns in the table, instead of just defaulting to one. (The next column over defaults to the total amount of columns minus one, so this has to be possible.)

(Looks much better.)

I don't believe that you can override "colspan" with CSS. So, if this could be added, it would be great. If there is a workaround that I am missing, I would be happy to use that as well.

Thanks.

2

FYI solved this problem with CSS

 

#view_380 .kn-table-totals td:nth-child(12) {color: #672121; overflow: visible; white-space: nowrap; max-width: 100px; direction: rtl;}
#view_380 .kn-table-totals td:last-child {color: #672121; font-weight: 600;}

3

so i have used this many times, but trying to use the same logic on the kn-table-totals give me problems and does not work.

The first grouping works but the second does not....any help would be amazing.

$(document).on('knack-view-render.view_380', function(event, view, data) {
  $("#view_380 .kn-group-level-1 td:first-child") .attr('colspan', 13);
  $("#view_380 .kn-group-level-1 td:nth-child(2)").css('display','none');
 

  $("#view_380 .kn-table-totals td:nth-child(12)").attr("colspan",12);
  $("#view_380 .kn-table-totals td:nth-child(n+1):nth-child(-n+11)").css('display','none');
});

 

I have tested using the same selectors in CSS and works fine.  Just seems there is something special about the totals.

4

this was very helpful for me as well.  Thank you!

5

Thanks Tblizzard!

6

jquery will do this. change level to 1, 2, 3 depending on how many groupings you have. Change colspan as needed.

 

$(document).on('knack-view-render.any', function(event, view, data) {
  $(".kn-group-level-1 td").attr('colspan', 4);
});