# Add Record Count to table groups

**URL:** <https://forums.knack.com/t/add-record-count-to-table-groups/7728>\
**Category:** Show & Tell\
**Created:** [February 7, 2016, 5:03am UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728 "2016-02-07T05:03:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [February 7, 2016, 5:03am UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/1 "2016-02-07T05:03:58Z")

</div>

**1. Create your table with groups** as per [http://helpdesk.knackhq.com/support/solutions/articles/5000443486-tables#columns](http://helpdesk.knackhq.com/support/solutions/articles/5000443486-tables#columns)

**2. Add Javascrip** t and change XXX to your view:

```
//Call the function when your table renders
$(document).on('knack-view-render.view_XXX', function (event, view , data) {
  addGroupRecordCount(view);
})

// Adds the record count to the group text  
var addGroupRecordCount = function (view) {  
$(’#’ + view.key + " .kn-table-group").each(function () {  
var StartRow = this.rowIndex;  
var TableRows = $(this).parent().children();  
var RowCount = 0;

```
TableRows.each(function( index ) {
  if(this.rowIndex &gt; StartRow) {
    var RowClass = $(this).attr('class');
    
    if(typeof RowClass === 'undefined' || RowClass == 'even') {
      RowCount = RowCount + 1;
    } else {
      return false;
    }
  }
});

var RowText = $(this).text() + '(' + RowCount + ')';

$(this).find('td').each(function () {
  if($(this).text().length &gt; 1){$(this).html(RowText)}
});

```

});  
}
```

---

<div class="post-metadata">

**Author:** ![Guilhermeb42087](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@Guilhermeb42087](https://forums.knack.com/u/Guilhermeb42087)\
**Post date:** [January 10, 2020, 2:11am UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/2 "2020-01-10T02:11:37Z")

</div>

How can I add to the code a custom style to row count number? tks!

---

<div class="post-metadata">

**Author:** ![BRUNOCERQU60563](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/brunocerqu60563/32/162_2.png) [@BRUNOCERQU60563](https://forums.knack.com/u/BRUNOCERQU60563)\
**Post date:** [February 14, 2019, 1:43pm UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/3 "2019-02-14T13:43:16Z")

</div>

Thanx Brad!

Nice one.

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [February 11, 2016, 10:36pm UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/4 "2016-02-11T22:36:30Z")

</div>

Josh - it would be possible but with some problems:

1. The filters load items on the fly, so you'd have to code an Ajax call to count the items that fit the filter criteria on view render, adding significant load time to the page. Then add the number to the filter text (the easier part).
2. Or, create a view on the same page that contains Count fields for each filter, read those numbers and add them to the filter text. That means adding fields to objects and making sure they calculate the same records as the view filters do all the time.

My code above simply counts the rows between groups without having to read from the underlying database so the overhead is low and the load time hardly changes.

---

<div class="post-metadata">

**Author:** ![JoshCamero54273](https://avatars.discourse-cdn.com/v4/letter/j/eb8c5e/32.png) [@JoshCamero54273](https://forums.knack.com/u/JoshCamero54273)\
**Post date:** [February 11, 2016, 4:41pm UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/5 "2016-02-11T16:41:57Z")

</div>

Brad, instead of doing this with table groups, would you know how to do this with table Filter Menus?

---

<div class="post-metadata">

**Author:** ![Chrislee65694](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@Chrislee65694](https://forums.knack.com/u/Chrislee65694)\
**Post date:** [February 9, 2016, 3:11pm UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/6 "2016-02-09T15:11:12Z")

</div>

Thanx Brad!

---

<div class="post-metadata">

**Author:** ![FanieVerma44252](https://avatars.discourse-cdn.com/v4/letter/f/a698b9/32.png) [@FanieVerma44252](https://forums.knack.com/u/FanieVerma44252)\
**Post date:** [March 3, 2022, 3:17am UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/7 "2022-03-03T03:17:15Z")

</div>

> [@BradStevens](#):
>
> //Call the function when your table renders $(document).on(‘knack-view-render.view\_XXX’, function (event, view , data) { addGroupRecordCount(view); })
> 
> // Adds the record count to the group text  
> var addGroupRecordCount = function (view) {  
> $(’#’ + view.key + " .kn-table-group").each(function () {  
> var StartRow = this.rowIndex;  
> var TableRows = $(this).parent().children();  
> var RowCount = 0;
> 
> ```auto
> TableRows.each(function( index ) {
> if(this.rowIndex &gt; StartRow) {
> var RowClass = $(this).attr('class');
>     
> if(typeof RowClass === 'undefined' || RowClass == 'even') {
> RowCount = RowCount + 1;
> } else {
> return false;
> }
> }
> });
> 
> var RowText = $(this).text() + '(' + RowCount + ')';
> 
> $(this).find('td').each(function () {
> if($(this).text().length &gt; 1){$(this).html(RowText)}
> });
> 
> ```
> 
> });  
> }

Hi Brad,

Will you please visit this code again? I would like to implement this solution, but the code doesn’t seem to work anymore.

Do you think this can be used with the group collapse script?

---

<div class="post-metadata">

**Author:** ![LeighBerre96926](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/leighberre96926/32/4896_2.png) [@LeighBerre96926](https://forums.knack.com/u/LeighBerre96926)\
**Post date:** [August 31, 2026, 1:31am UTC](https://forums.knack.com/t/add-record-count-to-table-groups/7728/8 "2026-08-31T01:31:15Z")

</div>

I realise this is a bit old, but here is some updated code (change to your view) that works, and also works with KTLs \_cg collapse groups.

```auto
$(document).on('knack-view-render.view_1145', function (event, view, data) {
  addGroupRecordCount(view);
});
// Adds the record count to the group text
var addGroupRecordCount = function (view) {
  $('#' + view.key + " .kn-table-group").each(function () {
    var StartRow = this.rowIndex;
    var TableRows = $(this).parent().children();
    var RowCount = 0;
    TableRows.each(function (index) {
      if (this.rowIndex > StartRow) {
        var RowClass = $(this).attr('class');
        if (typeof RowClass === 'undefined' || RowClass == 'even') {
          RowCount = RowCount + 1;
        } else {
          return false;
        }
      }
    });
    $(this).find('td').each(function () {
      var $td = $(this);
      if ($td.text().trim().length > 1) {
        // remove any count we added on a previous render so it doesn't stack
        $td.find('.grp-record-count').remove();
        $td.append('<span class="grp-record-count"> (' + RowCount + ')</span>');
      }
    });
  });
};

```