I have a tabulator grid with fitDataFill layout. Is it possible to set a maximum width for some columns?
The [width] property seems to set a fixed width (even if the automatic layout would assign a smaller width based on the actual data) and [minWidth] specifies the minimum width (also for interactive column resizing).
You can use CSS to set this if you want to stop a user resizing the column beyond a certain width. Tabulator adds a tabulator-field attribute to all cells and column elements, so if you wanted to limit the width of a column with a field name of "gender" you would need to use the following CSS:
.tabulator [tabulator-field="gender"]{
max-width:200px;
}
Late to the party, but just had the same question.
From the documentation (v4.9):
var table = new Tabulator("#example-table", {
columnMaxWidth:300, //maximum column width of 300px
columns:[
{title:"name", field:"name", maxWidth:false} //remove max width on this column
]
});
If you use autoColumns (which automatically adds columns from data field names) you need to use autoColumnsDefinitions (insted of columns).
var table = new Tabulator("#example-table", {
columnMaxWidth: 300, //maximum column width of 300px
autoColumns: true, //create columns from data field names,
autoColumnsDefinitions: [
{ field: "Foo", maxWidth: false }, //don't limit width of Foo column
{ field: "Bar", maxWidth: false }
],
});
read more
Related
I have a table in Tabulator where all fields are Editable.
I would like to be able to switch the edit function on and off for different fields after the table has loaded.
I can hide the column: table.hideColumn("r1");
but it would be great if I could disable the editing.
As a bonus i'd also like to reformat the disabled column (change the background colour)
var table = new Tabulator("#table", {
height:"90%",
layout:"fitData",
ajaxURL:"data.php",
placeholder:"Data Loading...",
history:true,
cellEdited:function(cell){console.log("cell changed: (" + cell.getOldValue() + ") [" + cell.getValue() + "] - field: " + cell.getField() + " - id: " + cell.getRow().getIndex());},
columns:[
{title:"id", field:"id", sorter:"number", visible:false},
{title:"1", field:"r1", sorter:"number", editor:"input"},
{title:"2", field:"r2", sorter:"number", editor:"input"},
{title:"3", field:"r3", sorter:"number", editor:"input"},
{title:"4", field:"r4", sorter:"number", editor:"input"},
],
});
Many Thanks
AMEND - Added fiddle
In order to change bg cell color and also its font color use:
cell.getElement().style.color= "#ffffff"; //CHANGE CELL WHITE FONT
cell.getElement().style.backgroundColor = "#e68a00"; //CHANGE CELL BG COLOR
inside tabulator's title declaration..
for disabling editing try an object array with states: Let's say we have 3 columns and want only column 3 to be edited...
var isDisabled=["","","input"];
so you can use:
{title:"1", field:"r1", sorter:"number", editor:isDisabled[0].toString()},
{title:"2", field:"r2", sorter:"number", editor:isDisabled[1].toString()},
{title:"3", field:"r3", sorter:"number", editor:isDisabled[2].toString()}
Now you are ready to access these states directly in your array to change tabulator's edit status on the runtime!
Hope that helps!
[UPDATE1]
I've found this approach on Tabulator's Documentation:
var editCheck = function(cell){
//cell - the cell component for the editable cell
//get row data
var data = cell.getRow().getData();
return data.age > 18; // only allow the name cell to be edited if the age is over 18
}
//in your column definition for the column
{title:"Name", field:"name", editor:"input", editable:editCheck}
You can add a differed approach on every column and you can set corresponding criteria. i Also noted that once tabulator loads its data there is no way of disabling/enabling cell editing. But with the above method you define edit-ability before loading data!
[UPDATE2]
Im using cell.getColumn().getField(); to access columns name for triggering IF statement
var editCheck = function(cell){
var data = cell.getRow().getData();
if (incomingValue === 0){
console.log("Enable All");
return data;
}
if (incomingValue === 2 && cell.getColumn().getField()==="r1"){
console.log("Disabled col1");
return data.r1!==incomingValue; //FOR ENABLING EDIT TO OTHER COLUMNS EXCEPT THIS ONE
}
//... Here all IFs for the rest columns
};
I have tabulator working with excel like tabs at the bottom that change the columns shown. It also highlights any row that has been edited and highlights each individual cell that has been edited. But when I switch tabs, the edited rows maintains their highlights, but if I switch back to the previous tab, the cells that were edited are no longer highlighted.
this.tabulator = new Tabulator(this.$refs['example-table'], {
data: [],
height: "500px",
index:"title",
placeholder: "No Data Set",
footerElement: $("#table-controls").get(0),
columns: this.gtabColumns,
cellEdited: function(cell) {
if((_.isNil(cell.getOldValue()) || _.isEmpty(cell.getOldValue()))
&& (_.isNil(cell.getValue()) || _.isEmpty(cell.getValue()))) {
return;
}
$(cell.getElement()).css("background-color", "#67f165");
$(cell.getRow().getElement()).css("background-color", "#d1fbd0");
},
});
This is happening because you are trying to directly manipulate the elements in the table from inside the cellEdited function.
Because Tabulator uses a virtual DOM it is not safe to try and manipulate any elements inside the table directly. You should only change the cell element in the formatter in the column definition or the rowFormatter for rows. anywhere else is unsafe.
In your case you would want a cell formatter like this:
var editedCellFormatter = function(cell){
if(cell.oldValue !== null){
cell.getElement().style.backgroundColor = "#67f165";
}
return cell.getValue();
}
Which you can then assign in the column definition:
{title:"Name", field:"name", formatter:editedCellFormatter}
I am using Tabulator and the default "fitData" function to size the cells. This works exactly as intended when I a) Have a default font size set and b) change the row font size using the rowFormatter:
rowFormatter:function(row){
var rowData = row.getData();
row.getElement().style.fontSize = config.body_font_size + "px";
The above works, however, when I want to change the font size of the column titles:
var curHeaders = document.getElementsByClassName("tabulator-col");
for (var i = 0; i < curHeaders.length; i++) {
curHeaders[i].style.fontSize = fontSize.toString() + "px";
}
This changes all the column font sizes, but does not resize the column width appropriately. Is there a different class where I should assigning the font? Is there a way to apply this in a similar way to the rowFormatter?
You shouldn't try and programatically alter elements inside Tabulator from outside the table. Because Tabulator uses a virtual DOM these changes can be overwritten at any point without notice.
If you need to format column header titles you should use a titleFormatter in the column definition for the column you want to change:
//define custom formatter
var customFormatter = function(cell, formatterParams, onRendered){
//set font size
cell.getElement().style.fontSize = fontSize.toString() + "px";
return cell.getValue();
}
//in the column definition for a column
{title:"Name", field:"name", titleFormatter:customFormatter },
Full documentation on how to use formatters can be found here: http://tabulator.info/docs/4.0/format
If you need to keep using your approach then you can call the table redraw function to force the table to be rebuilt:
table.redraw(true);
Is there a reason you need to change it at run time rather than just making the changes in CSS?
I am trying to understand Qooxdoo.
So, window, using "VBox" layout is working, toolbar too, but the table component
working wrong.
qx.Class.define("tiny.MainWindow",
{
extend : qx.ui.window.Window,
construct : function()
{
this.base(arguments, "tiny")
this.setContentPadding(0);
this.setWidth(400);
this.setHeight(300);
var layout = new qx.ui.layout.VBox();
this.setLayout(layout);
this.setShowMinimize(false);
this.setAllowClose(false);
this.setContentPadding(0);
this.open();
// toolbar and buttons is hidden
// because only table works wrong
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(["ID"]);
tableModel.setData([[0],[1],[2],[3]]);
var table = new qx.ui.table.Table(tableModel);
this.add(table, {row: 1, column: 0, colSpan: 10});
this.add(table, {flex: 1});
}
});
var tiny_window = new tiny.MainWindow();
tiny_window.open();
tiny_window.moveTo(100, 100);
I've got this output:
"The property 'row' is not supported by the VBox layout!"
Table is shown correctly, but vertical resizing isn't changing
table vertical size.
So, what layout types I must use with table component, toolbar?
P.S.: I am already tried "Dock" layout. Here, error is similar: "The property 'row' is not supported by the Dock layout!: The value 'row' must have any of the values defined in the array 'flex,edge,height,width'". Maybe I need other way to define the table size?
just drop the line
this.add(table, {row: 1, column: 0, colSpan: 10});
it is only valid for a grid layout
The optimal layout in your case with only one item in the window would probably be
qx.ui.layout.Grow()
I have a YUI datatable and I am putting the following data in the table:
{key:"name", label:"name", editor: nameChoiceEditor},
{key:"group", label:"group", editor: groupChoiceEditor},
{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},
...
Here the name column's width is set to the maximum length of characters entered for that name, and the same with group. colony's column width is set to 210 irrespective of the length of the data.
My problem is when the name column, having multiple words like "odaiah chitukuri", is showing in two lines like so:
odaiah
chitukuri
But when it is one word like "odaiahchitukuri" it is showing in a single line, meaning the column is adjusting to fit the word.
I should have the different words in sigle line. How to do that?
Have the 'breaking' spaces replace with non-breaking spaces.
Try the following:
Change:
{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},
To:
{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor
formatter: function (el, oRecord, oColumn, oData) {
el.innerHTML = oData.replace(/ /g, ' ');
}
},
I'm not sure if your looking for a solution that will always keep the words on a single line.. but generally speaking the datatable does a good job of spacing out the columns correctly based on the content inside. In certain cases though I've definitely had to set the width of a column manually. Here is an example for a column with class appicon:
.yui-skin-sam .yui-dt tbody td.appicon {
width: 40px;
}
Bare in mind once the number of words in the column stretches past it's defined size, it will always move to the next line.
In datatable column define :
will be width:100
not width:"100px"
or width:"100"
or width:"100em"
Use width: 100
like that then its working fine for me