I am trying to display the sharepoint list view data which is in Group by in a table.

Below is my code. I want to display the items in order for example All "Discovery" items should be displayed under one Row and all "Implementation"should be displayed under another column any help is greatly appreciated CODE:

(function () {
     * Initialize the variable that store the overrides objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

//  Assign functions or plain html strings to the templateset objects:
//  header, footer and item.
    overrideCtx.Templates.Header = '<div>';
    overrideCtx.Templates.Item = CustomItem;
    overrideCtx.Templates.Footer = '</div>';

//  This template is assigned to the CustomItem function.
    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 100;

//       Register the template overrides.



 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
function CustomItem(ctx) {
    // Build a listitem entry for every announcement in the list.
  var PromoPhase  = [ ];
  var field = ctx.CurrentItem.Promo_x0020_Phase;

      var TableCr='<table id='+field+'"test" border="1"><thead><th>'+field+'</thead><tbody><tr>'+
      '<td id='+field+'><button>'+ctx.CurrentItem.Title+'</button></td>'+
      return TableCr


Output enter image description here


Create an OOTB view with the grouping with expanded by default then apply the JSLink grouping template. There's an excellent example for single-level grouping and explained in details: https://github.com/SPCSR/DisplayTemplates/tree/master/JavaScript%20Display%20Templates%20(JSLink)/Grouping%20ListView%20Template

  • Aveenav , this gives me in a single way. I want it in Table format – santosh kondapalli Aug 11 '16 at 9:58

This may Help - How to change group rendering in JSLink

You will need to setup your table rows in a custom group function and then call it from Templates.Group.

Here is the relevant code copied from the link above:

overrideCtx.Templates.Group = CustomGroup

function CustomGroup(ctx, group, groupId, listItem, listSchema, level,  expand) {
  var html = '<div style="font-weight:bold">' + listItem[group] + ' :: </div>';
  return html;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.