Need to add up the values in a column in your table block and display the Sum at the bottom? Here is how

[acjnas]

Here is the situation: you need to show the sum of every value on your cells, from one column, as airtable does in a native way.

This approach will work by reading the information from the listed records on your softr table block, so everything happens in the front end.

Technical requirements: You need to have access to softr custom code block and airtable table source

Let’s start:

I assume you have a table block added to your softr page.

1. Grab the name or id of the table block, we will need it later.
2. Add a custom code block and place it at the bottom of your table block.
3. Go to your source table, and write down the exact name of the field you are mapping to the table to show the figures that will be added.
4. Copy and paste this code to your custom code block:

<div class="subtotal-container">
  <span>Ingresos liquidados:</span>
  <button class="subtotal_value">$0.00</button>
</div>



<style>
.subtotal-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align to the right */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.subtotal-container span {
  font-weight: bold;
  margin-right: 10px;
}

.subtotal-container button {
  background-color: #645d67;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

</style>



<script>
    
    // convert price number to string
    function commafy( num ) {
        var str = num.toString().split('.');
        if (str[0].length >= 5) {
            str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
        }
        if (str[1] && str[1].length >= 5) {
            str[1] = str[1].replace(/(\d{3})/g, '$1 ');
        }
        return str.join('.');
    }

    window.addEventListener('get-records-yourTableBlockId', (data)=>{
        let totalPrice = 0;
        
        if(data.detail){
            data.detail.forEach(item=>{
                let priceString = item.fields["yourAirtableFieldName"];
                let priceInt = parseFloat(priceString.substring(1).split(",").join(""));
                totalPrice += priceInt
            })
        }
        
        let totalString = commafy(totalPrice);
        
        document.querySelector(".subtotal_value").innerText = "$" + totalString;
    })
    
    </script>

5. Replace the following values with your own:
   ‘yourTableBlockId’
   yourAirtableFieldName

6. Publish and test results!

7. Comment and show how is working for you!

Here is my working sample:

[NTT_Hunter]

Thank you for your response. I am trying to group by Client Name so I can see all the invoices that are outstanding without using the filter/sort option.

[Paul_Harren]

Thanks for sharing this great post. Could you advise how the code would change/simplify if a column already has pure numeric values?

Thank you,
Paul

[acjnas]

Hey!

The code works with numbers. you pick a column and the sum of every listed record will be shown at the bottom of the table.

[Paul_Harren]

My column has decimal numbers, and because the code is expecting currencies it is not summing correctly.

[acjnas]

I see, can you please share the output to have a look?

[Paul_Harren]

It looks like only the “1s” place is being summed:

https://lavern8508.softr.app/table

My real scenario would have six decimal places for the numeric column, and the goal is for the sum to also show that many.

[acjnas]

alright, will check in more detail once I get to my desktop.

[AlexLFT]

Hi Acjnas,
Thanks a lot for this very useful code.
Do you have one to refresh this custom code when data is updated in the table?

[acjnas]

Yes,

you can use

<script>
window.addEventListener('update-record-success-yourTableBlockId', () => {
  dispatchWithDelay('reload-block-blockIdToReload', 1000); // 1 second delay
});
</script>

[AlexLFT]

Hey Acjnas,

Hope you’re well! I wanted to start off by saying a big thank you for all the help you’ve given me recently. It’s been incredibly helpful.

I’m reaching out because I’ve stumbled upon a little issue with the code and could use your insight. It seems to have a blind spot when it comes to recognizing changes in a cell. For instance, when I update the exchange rate, which should alter the payable amount, the custom code doesn’t seem to pick up on it.

It feels like whenever there’s an update in the table, the code doesn’t respond accordingly. Have you ever encountered something like this?

Any advice or suggestions would be really appreciated. I’m trying to figure this out and thought you might have some ideas.

Thanks again for all your help – it means a lot!

Any tricks or tips you have would be super appreciated. I’m a bit stumped here and could use some of your coding magic.

[acjnas]

Hey!

I have made a quick test and everything is working as it should

Check here:

[Paul_Harren]

Hello @acjnas ,

I’ve been able to get totals to work for my non-currency field!! A key tweak was I needed this:

parseFloat(priceString.substring(1)

to be this:

parseFloat(priceString.substring(0)

I’m so grateful of this code you shared. I’m now trying to create a second “button” that shows a second total in the same flexbox. Could you help me by showing what parts of the code need to be renamed to allow a second total of a different column?

Thank you,
Paul

[Danio]

Hello colleagues, I have this code and it works. But the question is how to modify it so that it does not count the values ​​​​in the field from the table, but provides a single value from the field in the list-details component:

<div class="subtotal-container">
  <span>Suma Ilości Przyjętej:</span>
  <button class="subtotal_value">0</button>
</div>

<style>
.subtotal-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align to the right */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.subtotal-container span {
  font-weight: bold;
  margin-right: 10px;
}

.subtotal-container button {
  background-color: #645d67;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

<script>
window.addEventListener('get-records-table2', (data) => {
    let totalSum = 0;
    
    if (data.detail) {
        data.detail.forEach(item => {
            let amountString = item.fields["Ilość Otrzymana"];
            let amountInt = parseFloat(amountString);
            if (!isNaN(amountInt)) {
                totalSum += amountInt;
            }
        });
    }
    
    document.querySelector(".subtotal_value").innerText = totalSum;
});
</script>


Thank for your answer

[Danio]

Need to add up the values in a column in your table block and display the Sum at the bottom? Here is how

Here is the situation: you need to show the sum of every value on your cells, from one column, as airtable does in a native way. This approach will work by reading the information from the listed records on your softr table block, so everything happens in the front end. Technical requirements: You need to have access to softr custom code block and airtable table source Let’s start: I assume you have a table block added to your softr page. Grab the name or id of the table block, we will nee…

Hi Colleagues, this is the same example like above but I need show one data from list details component

It looks easy, you just need to know how - someone will help
Thanks in advance

[Vera_the_cat]

THanks for the Code which I just tried.
It works Great except it is not sticking to a 2 decimal place monetory format and sometimes the retults looks like £1255.23 99 99999 99
I dont know Java at all well, any help would be much appreciated.

[PeterJNCK]

@acjnas

This approach will work by reading the information from the listed records on your softr table block, so everything happens in the front end.

Technical requirements: You need to have access to softr custom code block and airtable

Hello please any idea if/how this could works with Time duration field?
Thank you