Show Total(s) for all records instead of by page

[bradenal]

I would agree, a total per page and a grand total at the end of the table would be amazing.

[Chem]

Hey @Henry, I’m looking through this post now, and I would love to see this as a native option, but maybe, for the time being, you can combine the card component with the table and use the following method to synchronize your filter tabs.

Syncronize filter tabs between components

Here’s some code that can help. You basically put in all the IDs of the components. Then when you if you click on the nth filter tab, it will click on the nth filter tab of the other components. Demo can be seen here: [sync tabs] Code: var componentToSync = ['component_6', 'component_18']; // add a comma seperated list of component ids here. jQuery('body').not('.not-assigned').on('click', '.filter-tabs > .nav.nav-tabs > li > a', function() { if (jQuery(this).hasClass('justCl…

[Henry]

Thanks, Chem!

[Chem]

@Henry @bradenal @SuiteUpstairs @Tom @tim.young

Check this out Page and Table Summary - Video Tutorial

It takes some low code, but you can set this up if needed. I hope this helps!

Here’s the live page if you want to see it in action https://tutorials.tadabase.io/page-table-total/demo

Expand me to view the code

Template HTML:

{{#each records}}
<tr id="grand-total-custom-component" class="table-row-summery row-summery-first">
    <td class="table-row-summery row-summery-first">
        <af-data-table-field><span>Table Total</span></af-data-table-field>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td class="td-filter-option table-total">
        <af-data-table-field ><span>{{toFixed total_table 2}}</span></af-data-table-field>
    </td>
    <td class="td-filter-option true-total hide">
        <af-data-table-field ><span>{{toFixed total_true 2}}</span></af-data-table-field>
    </td>
    <td class="td-filter-option false-total hide">
        <af-data-table-field ><span>{{toFixed total_false 2}}</span></af-data-table-field>
    </td>
</tr>
{{/each}}

Template JavaScript:

$('.my-table tbody').append($('#grand-total-custom-component'));

Page Builder JavaScript:

$('body').not('.not-assigned').on('click', '.filter-tabs > .nav.nav-tabs > li > a', function() {
    $('.td-filter-option').addClass('hide');
    var filterTabVal = $(this).html();
    if(filterTabVal === "True"){
        $('.true-total').removeClass('hide');
    } else if(filterTabVal === "False"){
        $('.false-total').removeClass('hide');
    } else {
        $('.table-total').removeClass('hide');
    }
}).addClass('not-assigned');

[Henry]

Hi @Chem,

That looks slick! I’ll definitely give that a try!

Thanks

Henry

[al.hodgson]

Please can you give an update on when this be natively added? It seems a crucial function for a numeric table.