I have a tabulator. When loading, it will be dynamically populated with data from an ajax call.
I also have a custom add button add-new-task which adds new row to the table.
How to move the row which has been added now automatically and make any scroll disappear by expanding the table div as the data grows?
I would also be great if the focus shifts to the cell editor on the 'Task Name' column in that newly added row.
var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
layout:"fitColumns",
movableRows:true,
pagination: false,
columns:[
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
{title:"Task ID", field:"task_id", headerSort:false, editor:false, width:50, minWidth:50, resizable:false, visible:true, download:false},
{title:"Task Name", field:"task_name", headerSort:false, editor:"input"},
{title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input"},
{formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false},
],
});
// Action to be taken whenever the user clicks "Add Task"
$('#add-new-task').on('click', async function(e) {
workflowTasksTable.addRow({})
.then((row) => {
workflowTasksTable.scrollToRow(row.getPosition(),"center");
});
});
Thanks
I solved my issue. Hope this helps if anyone is looking for same.
Changing the layout from fitColumns to fitDataTable worked to adjust the table for new rows as the table grows without any scroll.
For focus to the first editable cell, rowAdded was helpful.
// Action to be triggered when a new row is added
workflowTasksTable.on("rowAdded", function(row){
setTimeout(function(){row.getCell("task_name").edit();},200);
});
Without timeout, rowAdded function doesn't work as the callback is triggered before the new row is rendered I suppose and therefore no cell components exist on the row.
Another solution to make the table adjust the height as the data grows is using fitData layout with width specifications and a div styling:
var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
index:"task_name",
layout:"fitData",
movableRows:true,
pagination: false,
columns:[
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
{title:"Task ID", field:"task_id", headerSort:false, editor:false, resizable:false, visible:false, download:false, htmlOutput:false},
{title:"Task Name", field:"task_name", headerSort:false, editor:"input", validator:["required", "unique"], width:350, minWidth:100},
{title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input", validator:["required", "unique", "maxLength:3"], width:206, minWidth:50},
{formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false, width:100},
],
validationMode:"manual"
});
<div id="inputWorkflowTasks" aria-describedby="workflowTasksHelp" style="min-height: 100px;overflow: hidden;"></div>
Related
I'm trying to setup an editable grid in Tabulator where I want to click on a cell to select it and then use arrow keys to move around the grid.
Then, if a key is pressed such as Enter, the value is able to be edited.
The current behaviour that I can't seem to disable is that as soon as you click on an editable cell it immediately opens the editor. Depending on the type of editor, the arrow keys might move to the adjacent cell or they might just interact with the editor (e.g. for a select editor, the up and down just moves up and down the list of options). If I hit Esc in the cell then editing stops as expected but the cell is not selected in any way so there is no way to move to an adjacent cell.
A very simple setup for the table is,
{
data: gridData,
layout: "fitColumns",
columns: [
{ title: 'Name', width: 100, field: 'name', editor: 'input', },
{ title: 'Age', width: 60, field: 'age', editor: 'number', },
{ title: 'Colour', width: 100, field: 'colour', editor: 'select', editorParams: {
values: ['red', 'green', 'blue']}
},
{ title: 'Progress', width: 80, field: 'progress', editor: 'number', },
],
pagination: "local",
paginationSize: 25,
paginationSizeSelector: true,
}
You can navigate inside your tabulator table with the following code:
keybindings:{"navUp" :"38","navDown" :"40","navLeft" :"37","navRight" :"39"},
Moreover you can asign double click inside column declaration in order to change your data.
{title:"Name", field:"name", cellDblClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
To prevent enter data with one click, just leave empty the corresponding callback.
Also take a look at this helpful documentation: Tabulator Key Bindings
and Tabulator Click events
I am trying to implement an downloadable table on my project, I have all the cdns required and the tabulator is already installed by node. I am programming in Laravel. This is my code so far:
<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
var tabledata = [
{id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
table.setData(tableData);
var table = new Tabulator("#example-table", {
data:tabledata,
height:"311px",
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", width:100, sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", width:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross"},
],
});
//trigger download of data.csv file
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
//trigger download of data.json file
$("#download-json").click(function(){
table.download("json", "data.json");
});
//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report", //add title to report
});
});
</script>
<script type="text/javascript">
</script>
</div>
Tabulator only manages the area inside the table, it will not create buttons outside of the table itself.
You need to add a button to the page yourself:
<button id="download-csv">Download CSV</button>
And then add a click binding to trigger the action on your table:
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
Firstly, love the product!
Secondly, is it possible to change the expand and collapse icons for tree module within Tabulator? It would really help with the consistency of my project if I were to instead use the block arrows (Alt 16 & Alt 30).
I've already manipulated the CSS to the remove the border, etc.
The data and columns are substituted within the software package I am compiling this within.
var table = new Tabulator("#example-table", {
height:400,
data: [ **TableData** ]
dataTree:true,
dataTreeStartExpanded:true,
dataTreeBranchElement: false,
dataTreeChildIndent: 9,
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !1,
layout:"fitColumns",
columns:[ **ColumnData** ],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("ID " + row.getData().id + " Selected");
},
});
I am pairing this with
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
You can use the dataTreeExpandElement and dataTreeCollapseElement setup options for this in your table constructor
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeCollapseElement:"<span>►</span>",
dataTreeExpandElement:"<span>▼</span>",
});
Full details on how to use this feature can be found in the Data Tree Documentation
Checking the source code for Tabulator, dataTreeCollapseElement and dataTreeExpandElement are either looking for a string or DOM element. Try specifying an empty element that won't show:
dataTreeCollapseElement: '<i/>',
dataTreeExpandElement: '<i/>',
I want to save the table to a text file after making changes. When I click the save button tbldata is empty and my text file is overwritten and blank.
I have tested the button with: var tbldata = JSON.stringify([{"id":1, "name":"Bob"}]) and it works.
I am assuming I am using table.getData incorrectly. Where and how in my button function should var tbldata = table.getdata be located?
I cannot find a specific example in the documentation
<button class="button" id="save-data" >Save Data</button>
<script>
//create Tabulator on DOM element
var table = new Tabulator("#meetinfo-table", {
height:200, // set height of table (in CSS or here)
selectable:true, //make rows selectable
layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//Sort data decending
initialSort:[
{column: "meetdate", dir:"desc"}],
//Define Table Columns
columns:[
{title:"Meeting Date", field:"meetdate", width:150, editor:"input"},
{title:"Topic", field:"topic", align:"left", editor:"input"},
{title:"Speaker", field:"speaker", editor:"input"},
{title:"Room", field:"room", editor:"input"},
{title:"CE", field:"ce", align:"left", editor:"input"},
{title:"RSVP Survey Code", field:"rsvpcode",editor: "input"},
{title:"RSVP Due Date", field:"rsvpduedate", editor:"input"},
],
});
//Saves entire table to JSON encoded string
var button = document.getElementById("save-data");
button.addEventListener("click", function(){
var tbldata = table.getdata;
var request= new XMLHttpRequest(); // new HttpRequest instance
request.open("POST", "process.php");
request.setRequestHeader("Content-type", "application/json");
//request.send(tbldata);
});
//loads data into the table
table.setData('meetinfo_array.txt');
</script>
There are two issues there, it is getData not getdata and you a not actually calling the function because you are missing the parenthesis after the function name. It should be:
var tbldata = table.getData();
I created a context menu in my chome extension as a checkbox, I am successfull to create the menu which will be visible only for editable field.
The problem is I need to display menu as checked, according to a data attribute in the textfield(focused element). With the following code, it is displaying checked in a global level(means if i checked the menu in one page/elemebt is will remains checked for other page/elements as well.)
How can I make it checked/unchecked according to the element's data attribute ?
var addinMenu = chrome.contextMenus.create({
"title": "My Addin Menu",
"contexts": ["editable"]
});
var disableOrEnable = chrome.contextMenus.create({
"type": "checkbox",
"title": "Disable",
"parentId": addinMenu,
"id": "myaddin_disable",
"checked": true,
"contexts": ["editable"],
"onclick": disableOrEnableMyAddin
});
Call chrome.contextMenus.update() when the menu properties should change, e.g.:
chrome.contextMenus.update(
disableOrEnable,
{ type: 'checkbox', checked: false });
It looks like you can catch the oncontextmenu event and make changes that are immediately reflected in the posted menu (but I see from Rob W's comment there may be a race condition with that). This works for me:
var contextMenu = chrome.contextMenus.create(
{
type: 'checkbox',
title: 'how now brown cow',
checked: false,
contexts: ['all']
});
var element = document.getElementById('hello');
element.addEventListener(
'mouseover',
function(e) {
element.setAttribute('underMouse', 'true');
});
element.addEventListener(
'mouseout',
function(e) {
element.setAttribute('underMouse', '');
});
window.oncontextmenu = function(e) {
chrome.contextMenus.update(
contextMenu,
{
type: 'checkbox',
checked: element.getAttribute('underMouse') == 'true'
});
}
If you're just interested in the currently focused textfield you could also just change your menu in focus and blur events. You may also want to check out the 'editable' option to the contexts menu property (not sure what that does but sounds like it might restrict the menu to text input elements).