I have a tabulator table displaying a set of grouped columns.
I would like to have some of the groups hidden by default, so I add visible: false to the group definition
{ title: "A group", headerTooltip: "Data relevant to group", visible: false,
columns: [
{ title: "blah", field: "blah", },
],
},
But the column group is displayed when the table loads.
When I hide/unhide the column group from javascript I can see the visible flag toggle between true and false.
Any advice to make this work would be much appreciated.
(Currently I have to hide all of the columns in the group to make the group hidden).
Thanks
Mike
Related
I am writing a sequelize query, where I have included a table (B) inside another table (A). I want to set required property dynamically such that it will be true for the row in which a specific column from A is not null. Is there any correct way to do it?
I am writing something like this
{ model: model.B, required: sequelize.col("A.column_Name") !== null ? true : false, as: "B", },
I have a Tabulator table and i need to edit a cell with a lookup but with also a
multiselect.
if I use no lookup and "formatter": "textarea" it works but show the key (1, 2, 3) like expected, if a use "lookup" it show the values in the dropview but no results in the cell.
lookup with no multiselect works like expected also.
{title:"Centri Produzione",
field:"id_centro_produzione",
widthGrow:3,
editor:"select",
editorParams:{multiselect: true,
values: {"1:"pluto", "2":"topolino", "3":"minnie"},
formatter: "lookup",
formatterParams: {"1:"pluto", "2":"topolino", "3":"minnie"}
},
thanks
In the new tabulator v5.2, the editor "select" was changed to "list", I have this code that was working fine in v5.1 but stop working in the new version, I hope someone can help me figured out what do I need to change to make it work again with this new version of tabulator.
Ex: in my table there are two columns with select dropdown values, the second column is dependent on the first. So if I select "Sales" in the first column, in the same row on the second column it will only show a list of "services" that belongs to the "Sales" department and so on.
In the code linked below you can see that in the first column when I click in a row in the "Dept" column, a list of values shows up, and if I select the value "Sales" it change to option "1".
{title:"DEPT", field:"dept", width:90, hozAlign:"left", editor:"list", editorParams:{values: {1:"Sales",2:"Service",3:"Bodyshop",4:"Carwash"}}},
{title:"WORK Type", field:"service", editor:"list", editorParams:{values: serviceList}},
jsfiddle
You can use the built-in lookup formatter to do that:
columns:[
{title:"DEPT", field:"dept",
width:90, hozAlign:"left",
editor:"list",
editorParams:{
values: {1:"Sales",2:"Service",3:"Bodyshop",4:"Carwash"}
},
formatter:"lookup",
formatterParams:{
1:"Sales", 2:"Service", 3:"Bodyshop", 4:"Carwash"
}},
Passing the same object of editorParams into the formatterParams would do your job.
Working Demo: https://jsfiddle.net/Mahesh1312/rzbxvym7/5/
Hope it helps!
Tabulator works great for column-oriented tables; that is tables that have a fixed number of columns and an increasing number of rows.
However, in the accounting world, tables are horizontal with a fixed number of rows and an increasing number of columns. When building an accounting-style table, time is expressed horizontally. See example:
Is it possible for Tabulator to support accounting-style/horizontal tables? Perhaps it already does but I just don't know how to configure that.
You would just have to structure your data in a format that tabulator could understand.
So for each cost item you would create a row data object that would contain the data for that cost item, and then create a column for each of the quarterly results. we could use column groups to gain headers similar to your example
So your column definitions would look a bit like this:
var columns = [
{title:"Cost Item", field:"cost_item"},
{title:"Description", field:"desc"},
{title:"Budget", field:"budget", bottomCalc:"sum"},
//define your quarters
{title:"MAR18 - MAY18, columns:[
{title:"Q1", columns:[
{title:"HISTORIC", field:"q1", bottomCalc:"sum"},
]}
]},
{title:"JUN18 - AUG18, columns:[
{title:"Q2", columns:[
{title:"HISTORIC", field:"q2", bottomCalc:"sum"},
]}
]}
];
And your rows would look a bit like this:
var rows = [
{cost_item:"A1", desc:"Directly incurred: Staff", budget:1000000, q1:20000, q2:20000},
{cost_item:"A2", desc:"Directly incurred: Travel", budget:150000, q1:6000, q2:6000},
]
You can then set them on your table with:
var table = new Tabulator("#example-table",{
data:rows,
columns:columns,
});
I am deciding to use this wonderful Tabulator js library but I want to have a different value associated with each cell value that is displayed.
Like
<td value="1">Bob</td>
I see the below options for setting a drop down
columns:[
{title:"Name", field:"name", editor:"select", editorPramas: names
]
where names = { 1: 'Bob', 2: 'Jack'}
however this results in bob and Jack being displayed in the drop down and when Bob is selected it displays 1 in the cell value. However I want Jack and Bob to be in dropdown and when Bob is selected data cell gets value of 1 because I have columns values mapped to IDs which need to be stored in database.
This can be done by custom editorParams
columns:[
{title:"Name", field:"name", editor:"select", editorPramas: myCustom
]
var myCustom = function(cell) {
cell.getElement().setAttribute("value",2);
...
}
whereby one can get the cell element which is changed and accordingly change any attribute of it.
I believe this feature should be considered and generic in the next release.
I proposed a hack for the input editor but this should be done in a generic way with the new parameter elementProps
https://github.com/olifolkerd/tabulator/issues/1869