How to hide topCalc row when exporting to Excel - javascript

In my webpage there is a Tabulator 4.9 table with a row of calculated values added to the top, resulting from the spec topCalc:"sum".
I have also added a button to export the table to Excel and this works fine. However, in the Excel file I do not want the summation row to be present.
I can of course remove that row in Excel, but I prefer to not export it at all from the Tabulator table. I have tried to remove the row using filters, but that has not been successful.
Is there an elegant way to hide a row of calculated values for the export to Excel?

Try using columnCalcs: false for the table's downloadConfig property. For example:
var table = new Tabulator("#example-table", {
downloadConfig:{
columnCalcs: false
}
})
http://tabulator.info/docs/4.9/download#new-tab

Related

Tabulator JS groupHeaderDownload how to create cells in Download

How can I create extra cells in my Excel export? I use groupHeaderDownload, this works but it only generates a string in the first column in the Excel sheet.
I am searching for a way to generate an extra cell, and an extra row.
I tried to pass arrays and an object but everything gets transformed to a single string.
Example:
groupHeaderDownload: function(value, count, data, group){
return [{ Nr:data[0].nr},{ Description:data[0].om}];
},
If you want to add extra rows of data to your download then i would suggest that you add them to your table using the addRow function before your then trigger the download function, you could then remove it after if you dont want it available generally:
var row = table.addRow({name:"Billy Bob", age:"12"}, true); //add new row to the top of the table
table.download("xlsx", "data.xlsx"); //download table
row.delete(); //remove row after download
If you want a column to only show up in a download then in the columns definition you should set the visible option to false and the download option to true, which will cause the column to only show up in downloads:
{title:"Example", field:"example", visible:false, download:true},

Tabulator - is there a way to print just selected rows

I'm using the Tabulator javascript table:
http://tabulator.info/docs/4.3/print
Is there a way to just print selected rows:
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printVisibleRows:false, // print all rows in the table
});
What i am looking for is an option like "printSelectedRows: true) or some sort of work-around i can use to accomplish this.
There is no such option. One work around I can think of is a filter that results in only the rows you want being visible and not using printVisibleRows:false. Then only those rows would print. This of course depends on the row selection having some common element. For ad-hoc selection work around's I can think of are:
1) Moveable rows:
http://tabulator.info/docs/4.3/move#rows
Move the rows you want to the visible part of the table.
2) Move between tables:
Move rows to another table for printing.
http://tabulator.info/docs/4.3/move#rows-table

Hidden columns of HTML table are also exporting

I have an HTML table for which I have a drop-down, also so that user can see whatever row he wants to see I have an export button. When user clicks on export button I am exporting the data to Excel.
While exporting I am not exporting the hidden row, while applying CSS property display:none I am adding a class there to all the hidden rows and removing them while exporting. But still when I export the data extra two columns are exporting, and I don't know why.
$("#save").on("click", function() {
var selectedType = [];
$.each($(".dropdown-menu input[type='checkbox']:checked"), function() {
selectedType.push($(this).val());
});
$.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() {
if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") {
$(this).parent().css("display", "none");
$(this).parent().addClass("hide-data"); //class i am adding to hidden rows
} else {
$(this).parent().css("display", "");
$(this).parent().removeClass("hide-data");
}
});
});
$("#export").click(function() { //export button on click
var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');
copyTable.insertAfter($("#dailySales"));
copyTable.find('.hide-data').remove(); //removing rows while exporting
copyTable.table2excel({
filename: "Daily Sales Report.xls"
});
copyTable.remove();
});
Link to Fiddle
When I am selecting credit from the drop-down it is exporting like this:
Two columns are extra after the table I have colored the red.
Note
For some reasons I cannot use Data-tables because data-tables is not exporting col-span, it aligns all the columns to left one by one, then data which looks very bad in Excel.
Edit
I just found the reason why it is exporting extra columns, the columns which I am fixing with data-tables are those columns, here I have fixed first two columns so they are exporting extra on excel
Edit
If there is any other approach I am open to that, I have tried Data-tables but it is not exporting columns with col-span, that's why I am using table2export.
Adding this line will do the job for you:
copyTable.find('.DTFC_LeftWrapper').remove(); //removing static columns while exporting
Here is the fiddle with the updated code

Inject a row after X number of rows in an HTML table

I display tables on a website with ±100 rows.
Is it possible to add a row after every 25 rows in order to display adcode?
Since new data are imported often from a csv file, I can't add these rows displaying the add at the same time.
This row will have to span across all columns. so I assume I can just add a very high number.
<tr><td colspan=100> DISPLAY ADD HERE </td></tr>
I'm using wordpress and ninja forms, though I don't think this will influence the way this is implemented. I just need to know is it possible with any plain HTMl table.
you can simply iterate through table rows using a loop and add the row in between. Below is a code snippet,
var i=0;
$('#table_name > tbody > tr').each(function() {
i++;
if (i%25==0) {
$(this).after("<tr><td colspan=100> DISPLAY ADD HERE </td></tr>")
}
});

Export to Excel is not working if table contains more than 500 rows

I referred this
page and implemented export to excel feature..
It is working fine if my table contains 500 rows. But it is not working if it has more than that. How to make it work for large amount of data.
Please advice..
Thanks in advance -
Chitra
If you are using Infragistics DataGrid, the Excel export default is related to page size, 500 rows. To Export all rows, need to disable Pager, then bind data to the grid again, then call the export function. Review the Row count from Add Watch to assure the count is correct.
[![Protected Sub WebImageButton1_Click(sender As Object, e As ButtonEventArgs) Handles WebImageButton1.Click
WebDataGrid1.Behaviors.Paging.Enabled = False
WebDataGrid1.DataBind()
WebExcelExporter1.Export(WebDataGrid1)
WebDataGrid1.Behaviors.Paging.Enabled = True
End Sub][1]][1]

Categories