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
Related
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
(This post has been updated for clarity and more of my findings.)
I'm currently using the tablesorter functions toggle and tablesorter-childRow to make a table that has a child row that can be hidden and expanded by clicking 'toggle' on the primary row like this example. However, the child row contains a nested table where the first row also contains a toggle function that can hide or expand all the remaining rows of that nested table. Here is my table in action.
Currently, the toggle functions all work fine in the sense that they are able to hide and expand the rows that I want to. However, if I click on the primary row's toggle function (the row with Category I), the function expands the entire nested table. I would like the toggle function on the primary role to only expand the first row of the nested table only (the row with Category II).
For my script, I used the default script found on the cssChildRow configuration here. What I tried to do is to give the rows that I want expanded its own html class (in the fiddle they are marked with <td class="show">). Then I edited the to script function to .find('.show') instead of the default .find('td'), but this did not work. Does anyone have a solution?
Thanks for everyone's help! 😊
<script>
$(function() {
$('.tablesorter-childRow td').hide();
$(".tablesorter")
.tablesorter({
cssChildRow: "tablesorter-childRow"
})
$('.tablesorter').delegate('.toggle', 'click', function() {
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('.show').toggle();
return false;
});
});
</script>
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
In the reference here, I have the datatable with excel export customization to print with cell colors. It works fine when the paging: false, . With paging,export excel with cell color is incomplete. How to make it work with paging ?
Solved by this using var colour = $(table.cell(':eq('+count+')',2).node()).css('background-color'); instead of
var colour = $('tbody tr:eq('+parseInt(count)+') td:eq(2)').css('background-color');
reference here
upon building the excel, I noticed that you used to color cells in excel file by checking the css attribute color that if it's color is red you will color it in excel red also.
It works all well with your paging:false because all the cells that needs color has already been colored since all of it is displayed in one page while if your paging:true, the cells that has color in excel are only those cells that has been displayed in front page and has already been filled with color, and those that needs color that was not displayed or in other page number does not have color in excel, because it was not displayed in front and is not being colored.
so my solution for that is that to have the same condition from rowCallback inside the customized function in creating excel. please see below:
$('row c[r^="C"]', sheet).each( function (data, info) {
console.log(info.textContent);
if (skippedHeader) {
var txt = info.textContent;
if (txt === 'London') {
$(this).attr( 's', '35' );
}
else if (txt === 'New York') {
$(this).attr( 's', '40' );
}
count++;
}
else {
skippedHeader = true;
}
});
you may also check the link: http://live.datatables.net/jijumeji/105/edit
You have to use manual render for excel and pdf export.
I think, automatic render useless.
https://editor.datatables.net/examples/extensions/exportButtons
How can I add another(two) child(ren) to a responsive datatable.
If the table is too narrow and I click the + button this does nothing
Any thoughts on this?
function format ( d ) {
return '<div class="player"></div>';
}
https://jsfiddle.net/v1xnj3u4/
This seems to work though it doesn't create another row as such but just adds to the created row the div you specified:
"responsive": {
"details": {
"renderer": function ( api, rowIdx ) {
// Select hidden columns for the given row
var data = api.cells(rowIdx, ':hidden').eq(0).map(function(cell){
var header = $(api.column(cell.column).header());
return $("<tr></tr>").append($("<td></td>",{
"text": header.text()+':'
})).append($("<td></td>",{
"text": api.cell( cell ).data()
})).prop('outerHTML');
}).toArray().join('');
return data ?
$('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"class":"player"}).prop('outerHTML') :
false;
}
}
},
Working example on JSFiddle, thanks for the challenge, I enjoyed learning about that ;-)
You can make (+) icon stay all the time if you make one of the columns hidden, you can create a dummy column for that purpose and use one of the Responsive plugin special classes none as 'className: 'none' for that dummy column.
In the example below I used last column for that purpose because in the row details it will also be displayed last.
Then when enumerating the columns in custom renderer you can display what you want for that column if that special column header matches some predetermined value (I used 'Extra 10' which is the header of the last column).
See this JSFiddle for demonstration.
PS: I used excellent answer and example by #annoyingmouse as a base for this answer so my vote goes to him as well.