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.

  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>
  1. Replace the following values with your own:
    ‘yourTableBlockId’
    yourAirtableFieldName

  2. Publish and test results!

  3. Comment and show how is working for you!

Here is my working sample:

1 Like

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.