How to set Dynamic height and width to a HTML table?

Question

I have an HTML table with JSON Data, I am using data-tables to fix header and columns of my table, but while fixing these I have to set some width and height

What I am trying to do is

• How can I set dynamic width and height according to screen size
• I am using bootstrap for responsive design so I want whichever screen table opens it should take that screen size and render according to that
• While doing this

fixedColumns: {
    leftColumns: 2
}

the first 2 columns are appearing as scroll also which is bad user interface like is there any browser dependency because on chrome it is rendering fine but on Mozilla, it is appearing like the image I have uploaded

 function format(number, decimals = 2, locale = 'en-in') { const fixed = parseInt(number).toFixed(decimals); const [int, dec] = fixed.split('.') const intFormatted = (+int).toLocaleString(locale) return intFormatted + (dec ? '.' + dec : ''); } var data = [{ "amount": 135116, "billdate": "2018-08-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 133350, "billdate": "2018-08-04", "counter": "South Indian-2-Flr", "outlet": "JAYANAGAR" }, { "amount": 89092, "billdate": "2018-08-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 61661, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 80568, "billdate": "2018-08-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 18425, "billdate": "2018-08-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 64091, "billdate": "2018-08-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 16234, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 6233, "billdate": "2018-08-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18243, "billdate": "2018-08-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 69946, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 18197, "billdate": "2018-09-02", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 8741, "billdate": "2018-09-02", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18820, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 78537, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 5060, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 49096, "billdate": "2018-09-03", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 58477, "billdate": "2018-09-03", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 49933, "billdate": "2018-09-03", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 9915, "billdate": "2018-09-03", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 51209, "billdate": "2018-09-03", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 2566, "billdate": "2018-09-03", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 19602, "billdate": "2018-09-04", "counter": "North Indian", "outlet": "JAYANAGAR" }, { "amount": 84490, "billdate": "2018-09-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 47952, "billdate": "2018-09-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 56191, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 56829, "billdate": "2018-09-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 4648, "billdate": "2018-09-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 26051, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 14206, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 4322, "billdate": "2018-09-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 14271, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 82248, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 751, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "KOLAR" } ] function formatData(data) { let toReturn = []; let dateWiseObj = {}; let maxUniqueForOutlets = {}; data.forEach(function(d) { if (!maxUniqueForOutlets[d["outlet"]]) { maxUniqueForOutlets[d["outlet"]] = []; } if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) { maxUniqueForOutlets[d["outlet"]].push(d["counter"]); } if (!dateWiseObj[d["billdate"]]) { dateWiseObj[d["billdate"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]]) { dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) { dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } } } }); return { dateWiseObj: dateWiseObj, maxUniqueForOutlets: maxUniqueForOutlets }; }; function addTable(dataObj) { let dateWiseObj = dataObj.dateWiseObj; let maxUniqueForOutlets = dataObj.maxUniqueForOutlets; let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Outlet"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Totals"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; // ol names th.classList.add("text-center"); th.colSpan = maxUniqueForOutlets[d].length + 1; headerRow.appendChild(th); }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Counter"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(k) { th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); maxUniqueForOutlets[k].forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; //counters name th.classList.add("text-center"); headerRow.appendChild(th); }); }); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); headerRow = document.createElement("tr"); let completeTotal = 0; let outletandCounterWiseCompleteTotal = {}; Object.keys(dateWiseObj).forEach(function(k) { let row = document.createElement("tr"); let td = document.createElement("td"); td.innerHTML = k; //billdate row.appendChild(td); grandTotal = 0; outletWiseTotal = {}; Object.keys(maxUniqueForOutlets).map(function(d) { if (!outletandCounterWiseCompleteTotal[d]) outletandCounterWiseCompleteTotal[d] = {}; outletWiseTotal[d] = 0; if (dateWiseObj[k][d]) { Object.keys(dateWiseObj[k][d]).forEach(function(i) { if (outletandCounterWiseCompleteTotal[d][i]) { outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } else { outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); }); } if (outletandCounterWiseCompleteTotal[d]["total"]) outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d]; else outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d]; grandTotal += outletWiseTotal[d]; }); td = document.createElement("td"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); //grandTotal full column row.appendChild(td); Object.keys(maxUniqueForOutlets).map(function(d) { td = document.createElement("td"); td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN'); td.classList.add("text-right"); //outlet total row.appendChild(td); if (dateWiseObj[k][d]) { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0"; td.classList.add("text-right"); //all total row.appendChild(td); }); } else { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = "0"; td.classList.add("text-right"); row.appendChild(td); }); } }); tbody.appendChild(row); completeTotal += grandTotal; //console.log(outletWiseTotal); }); th = document.createElement("th"); th.innerHTML = "Total"; headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = completeTotal.toLocaleString('en-IN'); th.classList.add("text-right"); //complete total of all headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } maxUniqueForOutlets[d].forEach(function(i) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } }); }); thead.appendChild(headerRow); table.appendChild(tbody); let divContainer = document.getElementById("tblOlcounterWise"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); $(table).DataTable({ //adding datatabl functionality "scrollX": true, "scrollY": "200px", "scrollCollapse": true, "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 2 } }); } var dataObj = formatData(data); addTable(dataObj);

 div.dataTables_wrapper { width: 500px; /*how to make this dynamic*/ margin: 0 auto; } table { border-collapse: collapse; } table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; font-family: Verdana; font-size: 9pt; padding: 5px 5px 5px 5px; background-color: rgba(29, 150, 178, 1); font-weight: normal; text-align: center; color: white; } table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/fh-3.1.4/datatables.min.js"></script> <div align="center" class="table table-responsive"> <table id="tblOlcounterWise"></table> </div>

my code is looking big but actually, it is not I have commented the line in my javascript code where data-tables functionality is added

Edit

whenever the no of rows increasing table is not properly scrolling vertically the fixed columns are fixed they are not scrolling vertically with all elements

[{"amount":49644,"billdate":"2018-09-01","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":194495,"billdate":"2018-09-01","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":80768,"billdate":"2018-09-01","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":60878,"billdate":"2018-09-01","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":81999,"billdate":"2018-09-01","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":8642,"billdate":"2018-09-01","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":53822,"billdate":"2018-09-01","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":15339,"billdate":"2018-09-01","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":7548,"billdate":"2018-09-01","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":15432,"billdate":"2018-09-01","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":107602,"billdate":"2018-09-01","counter":"Restaurant","outlet":"KOLAR"},{"amount":7711,"billdate":"2018-09-01","counter":"Trade POS","outlet":"KOLAR"},{"amount":39,"billdate":"2018-09-02","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":118647,"billdate":"2018-09-02","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":119871,"billdate":"2018-09-02","counter":"South Indian-2-Flr","outlet":"JAYANAGAR"},{"amount":109527,"billdate":"2018-09-02","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":64771,"billdate":"2018-09-02","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":78037,"billdate":"2018-09-02","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":20261,"billdate":"2018-09-02","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":69946,"billdate":"2018-09-02","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":18197,"billdate":"2018-09-02","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":8741,"billdate":"2018-09-02","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":18820,"billdate":"2018-09-02","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":78537,"billdate":"2018-09-02","counter":"Restaurant","outlet":"KOLAR"},{"amount":5060,"billdate":"2018-09-02","counter":"Trade POS","outlet":"KOLAR"},{"amount":49096,"billdate":"2018-09-03","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":58477,"billdate":"2018-09-03","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":49933,"billdate":"2018-09-03","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":9915,"billdate":"2018-09-03","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":51209,"billdate":"2018-09-03","counter":"Restaurant","outlet":"KOLAR"},{"amount":2566,"billdate":"2018-09-03","counter":"Trade POS","outlet":"KOLAR"},{"amount":19602,"billdate":"2018-09-04","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":84490,"billdate":"2018-09-04","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":47952,"billdate":"2018-09-04","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":56191,"billdate":"2018-09-04","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":56829,"billdate":"2018-09-04","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":4648,"billdate":"2018-09-04","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":26051,"billdate":"2018-09-04","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":14206,"billdate":"2018-09-04","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":4322,"billdate":"2018-09-04","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":14271,"billdate":"2018-09-04","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":82248,"billdate":"2018-09-04","counter":"Restaurant","outlet":"KOLAR"},{"amount":751,"billdate":"2018-09-04","counter":"Trade POS","outlet":"KOLAR"},{"amount":31224,"billdate":"2018-09-05","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":135675,"billdate":"2018-09-05","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":50704,"billdate":"2018-09-05","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":55118,"billdate":"2018-09-05","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":49738,"billdate":"2018-09-05","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":13374,"billdate":"2018-09-05","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":31923,"billdate":"2018-09-05","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":14532,"billdate":"2018-09-05","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":2792,"billdate":"2018-09-05","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":16930,"billdate":"2018-09-05","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":81019,"billdate":"2018-09-05","counter":"Restaurant","outlet":"KOLAR"},{"amount":4377,"billdate":"2018-09-05","counter":"Trade POS","outlet":"KOLAR"}]

Answer 1

Your first error Vivek was using Bootstrap for responsive.

Your second thinking that responsive is some kind of magic trick that a plugin such as FixedColumns will solve for any case.

Responsive is a design matter so it has to be solved before you even decide which technology are you going to use for your project. There should be a design of how your data table should look like in every device format.

However, I'm going to tell you how to fix the Firefox bug. You just have to add this code to you CSS:

.DTFC_LeftBodyLiner {
  overflow-y: initial!important;
  width: auto!important;
}

UPDATE: After our conversation on the chat I understood your other issue with the scroll. The solution was a combination of removing bootstrap responsive table:

<div align="center" class="table table-responsive">

and modifying the width of div.dataTables_wrapper to 100% and adding this little css:

.table.DTFC_Cloned {
  background-color: #fff;
}

also changing #tblOlcounterWise <table> tag by a <div> tag, as there was a syntax error when embedding <div> tags directly inside the <table> .

 function format(number, decimals = 2, locale = 'en-in') { const fixed = parseInt(number).toFixed(decimals); const [int, dec] = fixed.split('.') const intFormatted = (+int).toLocaleString(locale) return intFormatted + (dec ? '.' + dec : ''); } var data = [{ "amount": 135116, "billdate": "2018-08-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 133350, "billdate": "2018-08-04", "counter": "South Indian-2-Flr", "outlet": "JAYANAGAR" }, { "amount": 89092, "billdate": "2018-08-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 61661, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 80568, "billdate": "2018-08-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 18425, "billdate": "2018-08-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 64091, "billdate": "2018-08-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 16234, "billdate": "2018-08-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 6233, "billdate": "2018-08-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18243, "billdate": "2018-08-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 69946, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 18197, "billdate": "2018-09-02", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 8741, "billdate": "2018-09-02", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 18820, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 78537, "billdate": "2018-09-02", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 5060, "billdate": "2018-09-02", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 49096, "billdate": "2018-09-03", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 58477, "billdate": "2018-09-03", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 49933, "billdate": "2018-09-03", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 9915, "billdate": "2018-09-03", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 51209, "billdate": "2018-09-03", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 2566, "billdate": "2018-09-03", "counter": "Trade POS", "outlet": "KOLAR" }, { "amount": 19602, "billdate": "2018-09-04", "counter": "North Indian", "outlet": "JAYANAGAR" }, { "amount": 84490, "billdate": "2018-09-04", "counter": "South Indian-1-Flr", "outlet": "JAYANAGAR" }, { "amount": 47952, "billdate": "2018-09-04", "counter": "Take-away counter 1", "outlet": "JAYANAGAR" }, { "amount": 56191, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "JAYANAGAR" }, { "amount": 56829, "billdate": "2018-09-04", "counter": "Trade Pos1", "outlet": "JAYANAGAR" }, { "amount": 4648, "billdate": "2018-09-04", "counter": "Trade Pos 2", "outlet": "JAYANAGAR" }, { "amount": 26051, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "MALLESHWARAM" }, { "amount": 14206, "billdate": "2018-09-04", "counter": "Coffee Counter", "outlet": "MALLESHWARAM" }, { "amount": 4322, "billdate": "2018-09-04", "counter": "Takeaway", "outlet": "MALLESHWARAM" }, { "amount": 14271, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "MALLESHWARAM" }, { "amount": 82248, "billdate": "2018-09-04", "counter": "Restaurant", "outlet": "KOLAR" }, { "amount": 751, "billdate": "2018-09-04", "counter": "Trade POS", "outlet": "KOLAR" } ] function formatData(data) { let toReturn = []; let dateWiseObj = {}; let maxUniqueForOutlets = {}; data.forEach(function(d) { if (!maxUniqueForOutlets[d["outlet"]]) { maxUniqueForOutlets[d["outlet"]] = []; } if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) { maxUniqueForOutlets[d["outlet"]].push(d["counter"]); } if (!dateWiseObj[d["billdate"]]) { dateWiseObj[d["billdate"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]]) { dateWiseObj[d["billdate"]][d["outlet"]] = {}; dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } else { if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) { dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d; } } } }); return { dateWiseObj: dateWiseObj, maxUniqueForOutlets: maxUniqueForOutlets }; }; function addTable(dataObj) { let dateWiseObj = dataObj.dateWiseObj; let maxUniqueForOutlets = dataObj.maxUniqueForOutlets; let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Outlet"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Totals"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; // ol names th.classList.add("text-center"); th.colSpan = maxUniqueForOutlets[d].length + 1; headerRow.appendChild(th); }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Counter"; th.classList.add("text-center"); headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(k) { th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); maxUniqueForOutlets[k].forEach(function(d) { th = document.createElement("th"); th.innerHTML = d; //counters name th.classList.add("text-center"); headerRow.appendChild(th); }); }); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); headerRow = document.createElement("tr"); let completeTotal = 0; let outletandCounterWiseCompleteTotal = {}; Object.keys(dateWiseObj).forEach(function(k) { let row = document.createElement("tr"); let td = document.createElement("td"); td.innerHTML = k; //billdate row.appendChild(td); grandTotal = 0; outletWiseTotal = {}; Object.keys(maxUniqueForOutlets).map(function(d) { if (!outletandCounterWiseCompleteTotal[d]) outletandCounterWiseCompleteTotal[d] = {}; outletWiseTotal[d] = 0; if (dateWiseObj[k][d]) { Object.keys(dateWiseObj[k][d]).forEach(function(i) { if (outletandCounterWiseCompleteTotal[d][i]) { outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } else { outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0"); } outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0"); }); } if (outletandCounterWiseCompleteTotal[d]["total"]) outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d]; else outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d]; grandTotal += outletWiseTotal[d]; }); td = document.createElement("td"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); //grandTotal full column row.appendChild(td); Object.keys(maxUniqueForOutlets).map(function(d) { td = document.createElement("td"); td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN'); td.classList.add("text-right"); //outlet total row.appendChild(td); if (dateWiseObj[k][d]) { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0"; td.classList.add("text-right"); //all total row.appendChild(td); }); } else { maxUniqueForOutlets[d].forEach(function(i) { td = document.createElement("td"); td.innerHTML = "0"; td.classList.add("text-right"); row.appendChild(td); }); } }); tbody.appendChild(row); completeTotal += grandTotal; //console.log(outletWiseTotal); }); th = document.createElement("th"); th.innerHTML = "Total"; headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = completeTotal.toLocaleString('en-IN'); th.classList.add("text-right"); //complete total of all headerRow.appendChild(th); Object.keys(maxUniqueForOutlets).forEach(function(d) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } maxUniqueForOutlets[d].forEach(function(i) { if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) { th = document.createElement("th"); th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN'); th.classList.add("text-right"); headerRow.appendChild(th); } else { th = document.createElement("th"); th.innerHTML = 0; headerRow.appendChild(th); } }); }); thead.appendChild(headerRow); table.appendChild(tbody); let divContainer = document.getElementById("tblOlcounterWise"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); var $winHeight = $(document).height(); var $bodyHeight = $winHeight - 90; $(table).DataTable({ //adding datatabl functionality "scrollX": true, "scrollY": $bodyHeight + "px", "scrollCollapse": true, "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 2 } }); } var dataObj = formatData(data); addTable(dataObj);

 div.dataTables_wrapper { width: 100%; /*how to make this dynamic*/ margin: 0 auto; } table { border-collapse: collapse; } table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; font-family: Verdana; font-size: 9pt; padding: 5px 5px 5px 5px; background-color: rgba(29, 150, 178, 1); font-weight: normal; text-align: center; color: white; } table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; color: black; } .DTFC_LeftBodyLiner { overflow-y: initial!important; width: auto!important; } .table.DTFC_Cloned { background-color: #fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/fh-3.1.4/datatables.min.js"></script> <!--div align="center" class="table table-responsive"--> <div id="tblOlcounterWise"></div> <!--/div-->