How can we set dynamic header name. is is being passed from JSON. Also I want to know how can we hide multiple columns for eg you have an example of hiding a single column but i want to hide multiple columns and i want a same multiple columns to be shown on button click.
These feature or questions are related to comparison table we are tying to develop using tabulator where i want to compare multiple specific columns and I want to hide the columns which i don't want to see and show it again if i want
Tabulator has an option for auto column name generation based on the property names of the row data.
You can enable this by setting the autoColumns option to true:
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
Have a look at the Autocolumns Example to see it in action.
To hide multiple columns you need to call the hideColumn or showColumn function multiple times If you would prefer that the table is only redrawn once during this time, then you can use the blockRedraw function to prevent redrawing of the table until your updates are complete:
table.blockRedraw(); //block table redrawing
table.hideColumn("name") //hide the "name" column
table.hideColumn("age") //hide the "age" column
table.restoreRedraw(); //restore table redrawing
In order to hide a column you have to add visible:false as argument inside table's declaration.
example:
columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]
In order to hide/show multiple columns first must identify which column to be hidden/un hidden
A simple approach is to make an object array of Boolean states, such as:
var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});
then table's initialization will be like:
columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]
Now you are ready to fetch your Jason Data and change the visibility according your needs.
The above procedure works independently also. Any time you can access multiple array values, change their status and re-update tabulator to hide/show columns.
You can apply the same method with column name also changing the title:
Note that once column is initialized inside table, it cannot be changed. The only way to alter Heading (data also) is to remove existing column and replace it with another.
To make this happen use:
table.deleteColumn("Column Name Here");
table.addColumn({title:"Name", field:"name"});
Hope that helps!
Related
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! :)
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},
I'm using the #Mottie branch of tablesorter.js
I have 5-10 small tables on a page and would like to use an external filter to filter all of them at once, but only on one column. The docs mention:
// filters to exclude, per column
filter_excludeFilter : {},
It requires zero-based indexing to select columns for exclusion; however, the column # I am selecting varies from table to table. I was hoping to just target a column by header class, because I can apply a class to it. Relevant code:
HTML: <input type="search" class="search" placeholder="filter..." /></div>
js:
var $table = $(".tablesorter").tablesorter({
widgets: ["filter"],
widgetOptions: {
filter_external: '.search',
filter_defaultFilter: { '.salesinitials': '~{q}', },
filter_functions: { '.salesinitials': true },
filter_columnFilters: false
}
});
$("th > div.tablesorter-header-inner:contains('Sales Initials')")
.parent().addClass("salesinitials");
Is there some other way to target just one column for filtering on?
The filter_excludeFilter option does allow you to use a jQuery selector in place of a column index.
But, I think the solution you need is to bind all the tables to one filter input using the filter bindSearch function:
var $filter = $('.single-filter-input');
$('.all-tables').each(function(table) {
// table - table DOM element (or jQuery object) of table.
// $el - jQuery object of one or more input (search) elements to bind.
// false - boolean flag to force a new search.
$.tablesorter.filter.bindSearch(table, $filter, false);
});
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.
I've got a Google Charts Table that displays a couple of columns and rows. Say for instance we have 4 columns(A,B,C,D respectively). How would I be able to still load column C's values, but just hide the column so that it's not getting displayed?
Thanks in advance!
Instead of drawing the DataTable, you have to create an in-between DataView object where you filter the original data. Something like this:
//dataResponse is your Datatable with A,B,C,D columns
var view = new google.visualization.DataView(dataResponse);
view.setColumns([0,1,3]); //here you set the columns you want to display
//Visualization Go draw!
visualizationPlot.draw(view, options);
The hideColumns method is maybe better instead of setColumns, choose yourself!
Cheers
Here's an alternative using a ChartWrapper instead of a chart.
var opts = {
"containerId": "chart_div",
"dataTable": datatable,
"chartType": "Table",
"options": {"title": "Now you see the columns, now you don't!"}
}
var chartwrapper = new google.visualization.ChartWrapper(opts);
// set the columns to show
chartwrapper.setView({'columns': [0, 1, 4, 5]});
chartwrapper.draw();
If you use a ChartWrapper, you can easily add a function to change the hidden columns, or show all the columns. To show all the columns, pass null as the value of 'columns'. For instance, using jQuery,
$('button').click(function() {
// use your preferred method to get an array of column indexes or null
var columns = eval($(this).val());
chartwrapper.setView({'columns': columns});
chartwrapper.draw();
});
In your html,
<button value="[0, 1, 3]" >Hide columns</button>
<button value="null">Expand All</button>
(Note: eval used for conciseness. Use what suits your code. It's beside the point.)
var view = new google.visualization.DataView(dataTable); //datatable contains col and rows
view.setColumns([0,1,3,4]); //only show these column
chart.draw(view, options); //pass the view to draw chat
You can do this with CSS.
"#table_div" is the div my table is wrapped in. I use this because there a multiple tables on the same page.
#table_div .google-visualization-table table.google-visualization-table-table
td:nth-child(1),th:nth-child(1){
display:none;
}
I also have an event handler on the chart's rows, and can still pick up the data from the hidden column.
If you want to use particular column value in control wrapper but don't want to show that column in Google Charts then do following things.
1) Add all column to your google charts data table.
2) Add following things to options of your chartWrapper.
// Set chart options
optionsUser = {
"series": {
0: {
color: "white",
visibleInLegend: false
}
}
};
3) In above code series, 0 means the first line in your line chart. So It will set the color to white and also hide column name in Legends.
4) This way is not the proper way to hide columns, Using DataView is recommended. Whenever you want to use data in the data table for adding controls to your chart but don't want to show that column in the chart this is the way.