How to group table rows and insert a divider row in between groups?

  • 3
  • Question
  • Updated 7 months ago
  • Answered
Hello, 

I am working on a page to display a simple table listing out new employees. I would like to group the employees by their start dates and add an empty/caption row to divide up the blocks of records to more easily scan the page. Please see the photo for what I am trying to replicate. Currently I am just sorting on the start date but I would like to know if there is an effective way to group the rows by start date and subsequently generate a row to divide the groups. 


If anyone can explain how to accomplish this that would be wonderful!

Thanks. 
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb

Posted 1 year ago

  • 3
Photo of Khamla Phimmachack

Khamla Phimmachack, Official Rep

  • 1,536 Points 1k badge 2x thumb
Hi Michael,

There may not be a declarative way in Skuid to create a break or empty row between groups. It might be possible using some custom JavaScript or CSS. If your goal is to more easily scan through employees based on what date they started, have you considered displaying all employees and then using a filter to select only employees that started on x date? If you're interested in exploring that route, check out our tutorial for creating this kind of filter https://docs.skuid.com/latest/en/skuid/filters/date-range.html.
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
Hi, Thanks for the reply Khamla. I am currently using the Date Range filter in the case that our users would find it useful. I will see if I can do this custom as described. 
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Michael,

One other option that may work for you is to setup an Aggregate model on your data to group by the Start Date.  You could then add a Drawer to display the records for that Start Date.  Check this post for a snippet/component that will open the drawers for you on page load->  https://community.skuid.com/skuid/topics/javascript-to-open-drawer-and-or-conditionally-render-row-a...

Thanks,

Bill
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
Hi Bill,

That could work out really nicely! I will give it a shot. 

-Michael
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Michael, were you able to accomplish this? 
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
More or less, yes. Used an aggregate model to group data by a certain date field, then had each row leverage a drawer to display data associated with that date (drawer data was a secondary non-agg model, utilize the context tab to indicate that each drawer should contain data matching that drawer). It is a bit ugly in execution but the data is grouped and displayed. Let me know if you need some more help. 
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
All drawers also open on page load using the following snippet:
(function(skuid){
	var $ = skuid.$;
	$(document.body).one('pageload',function(){
		skuid.$('#sk-32pRqx-807').find('table:first > tbody').children('.nx-item').not('.nx-item-has-drawer').find('.sk-icon-component-pack:visible').click();
	});
})(skuid);