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

acjnas · October 30, 2023, 9:05pm

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 need it later.
Add a custom code block and place it at the bottom of your table block.
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.
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>

Replace the following values with your own:
‘yourTableBlockId’
yourAirtableFieldName
Publish and test results!
Comment and show how is working for you!

Here is my working sample:

NTT_Hunter · December 1, 2023, 9:25am

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 · December 19, 2023, 4:43am

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 · December 19, 2023, 2:51pm

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 · December 19, 2023, 3:30pm

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

acjnas · December 19, 2023, 3:54pm

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

Paul_Harren · December 19, 2023, 5:03pm

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 · December 19, 2023, 8:21pm

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

AlexLFT · December 27, 2023, 11:46pm

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 · December 28, 2023, 3:15pm

Yes,

you can use

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

AlexLFT · December 28, 2023, 6:31pm

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 · December 28, 2023, 9:16pm

Hey!

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

Check here:

file

Paul_Harren · January 9, 2024, 12:23am

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 · July 19, 2024, 4:45pm

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 · July 20, 2024, 1:43pm

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 · October 8, 2024, 12:15pm

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 · January 11, 2025, 12:17pm

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

ryanunc1 · May 3, 2025, 8:17am

This did not work for me, but it’s quite possibly user error. I have tried several different values for ‘yourTableBlockId’ and ‘yourAirtableFieldName’ & have not had any luck. Is anybody else to help me find these?