Grouping rows in Table

Navin Agarwal

March 14, 2018 at 4:23 am #5041

Hi,

I have requirement where I want to show the rows in a table grouped by a column. For e.g

Task Status  Task Name    Allocated To  Task Due Date
Pending
Task1                 User1                   31/03/2018
Task2                User2                   01/04/2018
Task3                User3                   02/04/2018
Suspended
Task4                User4                   04/04/2018
Task5                User5                   05/04/2018
Task6                User6                   06/04/2018
Completed
Task7                 User7                   08/04/2018
Task8                User8                   09/04/2018
Task9                User9                   10/04/2018

The rows with task data are selectable & columns are sortable. I don’t see any options in SPARK UI table to achieve this. Would you be able to please advise what is the best approach to implement this using SPARK UI ?

Thanks

 

SPARK Support

March 14, 2018 at 3:47 pm #5045

Hi Navin,

My suggestion would be to use three separate Table controls and filter the data set to display the records containing only the desired status.

However, if you need to display the records grouped by task status in the same Table you can manipulate the data set outside of the Table to reorder the list.  Or, you can set the Task Status column to render as Custom and create a custom sort function in the On Cell Render event.

Regards,

Stephen P.

Navin Agarwal

March 16, 2018 at 5:57 am #5046

Hi Stephen,

I won’t be able to use separate tables as the requirement is not limited  to three task category. I used that as an example in my question to explain the requirement. In real use case it’s a dynamic field like customer ID and the numbers of rows could be many.

I have tried re-ordering outside but with additional features like filter, sorting by any columns, selecting rows, visibility etc, it gets very complicated. I won’t be able use much of out-of-box table control in this approach. But if there is no other option then I might have to try that.

Regarding custom cell, are you able to share bit more about this approach or point me to any example ?

Thanks for your suggestion.

 

SPARK Support

March 16, 2018 at 9:21 am #5048

Hi Navin,

The only documentation regarding custom cell is on the Table article and JS Doc:

https://salientprocess.zendesk.com/hc/en-us/articles/206521927-Table

http://support.salientprocess.com/docs/enterprise/Table.html

The Table article uses the example of setting the sort value for complex types in the On Custom Cell event:

• On Custom Cell When there is a new cell (In order for this event to work, the developer needs to create a custom render.  This can also be used to set cell.setSortValue(cell.value) for complex types)

The JS Doc demonstrates creating a custom HTML element for the cell:

var div = document.createElement("div"); div.innerHTML = cell.row.data[cell.varName]; return div;

My suggestion would be to set a Column to Render as Custom and put a debugger statement in the On Custom Cell event.  Then explore the available properties of the “cell” context variable in the console.  Note that you can either return an HTML element as in the JS Doc example, or return “S” for Seamless Coach View, “H” for Simple HTML or “V” for Coach View.

Regards,

Stephen P.