I have a page where I have 18 tabulator tables in a single page. Ideally, only 2 visible at a time, but for this example I have them all visible due to trying to see if hidden tables was the issue… which it does not seem to be.
Anyway, the way this would be used is that users add materials or labor items to the tables, and when they set the quantity and cost per cells, I use the tabulator cellEdited event to multiply the values and it updates the total cell for that row. Users can add multiple rows of items with different total costs, and so each table has a columnCalc of SUM set to show the tables total amount below the total column in the table. I am creating this for a tile project estimator.
The issue shows up when I make a change to a table’s total column, it will show the column calculation on other tables that have not been used yet. If I change or make a change to the total column on a different table, it will modify the columnCalc to match the new value on all of the other tables.
Im not sure what I am doing wrong or if this is an issue with Tabulator.
Here is a live link to try. You can just add a value into a qty and cost per cell, then click to a new cell to update the total cell, then click the green add a row button. Notice how it shares the columnCalc SUM value with the other tables. It’s weird.
https://quakquakquak.com/estimator/table4b.html
I have all the code in the single page, so it was too much to put into this text box… but if you view the page source you can see the javascript I have used.
EDIT – Each table has a unique ID in the page and below I provided a block of code that is basically repeated (using different ID’s) for creating each 2 table set of Tabulators, and the add row button code.
var tableData = [
{id:1, item:"Select", description:"", qty:0, type:"", costper:0, total:0},
]
//room 1 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var room1MaterialsTable = new Tabulator("#room1MaterialsTable", {
data:tableData,
layout:"fitColumns",
selectableRows:true,
movableRows:true,
rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
columns:[
{title:"Id", field:"id", headerSort:false, visible:false},
{title:"Item", field:"item", headerSort:false, editor:"list", resizable:false, editorParams:{
defaultValue:"Select",
valuesURL:"./materials-list.php", //get value list from URL
}},
{title:"Description", widthGrow:3, field:"description", editor:"input", headerSort:false, resizable:false},
{title:"Qty", width:50, headerHozAlign:"center", field:"qty", editor:"number", hozAlign:"center", headerSort:false, editorEmptyValue:0, validator:"min:0", resizable:false, editorParams:{
selectContents:true}},
{title:"Type", field:"type", headerHozAlign:"center", editor:"input", hozAlign:"center", headerSort:false, resizable:false},
{title:"Cost Per", field:"costper", headerHozAlign:"right", editor:"number", hozAlign:"right", formatter:"money", headerSort:false, resizable:false, editorEmptyValue:0, validator:"min:0", editorParams:{
selectContents:true}},
{title:"Total", field:"total", headerHozAlign:"right", hozAlign:"right", formatter: "money",formatterParams: { decimal: ".", thousand: ",", symbol: "$"}, bottomCalc:"sum", bottomCalcFormatter:"money", headerSort:false, resizable:false},
],
});
var room1LaborTable = new Tabulator("#room1LaborTable", {
data:tableData,
layout:"fitColumns",
selectableRows:true,
movableRows:true,
rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
columns:[
{title:"Id", field:"id", headerSort:false, visible:false},
{title:"Item", field:"item", headerSort:false, editor:"list", resizable:false, editorParams:{
defaultValue:"Select",
valuesURL:"./labor-list.php", //get value list from URL
}},
{title:"Description", widthGrow:3, field:"description", editor:"input", headerSort:false, resizable:false},
{title:"Qty", width:50, headerHozAlign:"center", field:"qty", editor:"number", hozAlign:"center", headerSort:false, editorEmptyValue:0, resizable:false, validator:"min:0", editorParams:{
selectContents:true}},
{title:"Type", field:"type", headerHozAlign:"center", editor:"input", hozAlign:"center", headerSort:false},
{title:"Cost Per", field:"costper", headerHozAlign:"right", editor:"number", hozAlign:"right", formatter:"money", headerSort:false, resizable:false, editorEmptyValue:0, validator:"min:0", editorParams:{
selectContents:true}},
{title:"Total", field:"total", headerHozAlign:"right", hozAlign:"right", formatter:"money", bottomCalc:"sum", bottomCalcFormatter:"money", headerSort:false, resizable:false},
],
});
room1MaterialsTable.on("cellEdited", function(cell){
//cell - cell component
let fieldname = cell.getField();
if (fieldname === "costper" || fieldname === "qty"){
let qty = cell.getRow().getCell("qty").getValue();
let costper = cell.getRow().getCell("costper").getValue();
cell.getRow().update({"total":Number(qty * costper)});
}
});
room1LaborTable.on("cellEdited", function(cell){
//cell - cell component
let fieldname = cell.getField();
if (fieldname === "costper" || fieldname === "qty"){
let qty = cell.getRow().getCell("qty").getValue();
let costper = cell.getRow().getCell("costper").getValue();
cell.getRow().update({"total":Number(qty * costper)});
}
});
let r1mbtn = document.querySelector('#rm1addmatrow');
let r1lbtn = document.querySelector('#rm1addlabrow');
r1mbtn.addEventListener('click', ()=>{
var rowCount = room1MaterialsTable.getDataCount();
rowCount ++;
room1MaterialsTable.addRow({id:rowCount, item:"Select", description:"", qty:0, type:"", costper:0, total:0}, false);
})
r1lbtn.addEventListener('click', ()=>{
var rowCount = room1LaborTable.getDataCount();
rowCount ++;
room1LaborTable.addRow({id:rowCount, item:"Select", description:"", qty:0, type:"", costper:0, total:0}, false);
})
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Thanks in advance.