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:
