I am trying to modify the the YUI sortable dataTable example to add rows and columns dynamically after the dataTable is created. My code looks like this:
YUI().use("datatable-sort", function(Y) {
var cols = [
{key:"Company", label:"Click to Sort Column A", sortable:true},
{key:"Phone", label:"Not Sortable Column B"},
{key:"Contact", label:"Click to Sort Column C", sortable:true}
],
data = [
{Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
{Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
{Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
],
table = new Y.DataTable({
columns: cols,
data : data,
summary: "Contacts list",
caption: "Table with simple column sorting"
}).render("#sort");
// Add rows and columns here.
});
You can dynamically add rows into a YUI dataTable by calling the addRow() or addRows() method. If you are using the YUI sortable dataTable example, you could do it this way:
table.addRows(
[{Company:"New Company", Phone:"555-555-5555", Contact:"John Smith"},
{Company:"Old Company", Phone:"555-555-6666", Contact:"Rowdy Piper"}]);
Dynamically loading columns can be done similarly with addColumn():
table.addColumn({key:"NewColumn", label:"Column D"});
Note: you must include the datatable-mutable module in your code to utilize these methods.
Related
this one should be simple for tabulator experts (but not for me)...
i have a tabulator table. I've made one column, "edit" clickable as shown below. it works fine and returns the value of the cell i clicked. HOWEVER, that's not what i need. I need to get the value of ANOTHER cell in the same row (column "transactionID"). I know how you would do it in other languages, just use x and y values to move over 3 columns and get the value. but how is it done in tabulator? by the cloumn name? I can't find any example code on how to accomplish this.
This is the snippet from my tabulator init :
{title:"edit" , name:"edit", formatter:myformatter, cellClick:function(e, cell){alert("cell clicked - " + cell.getValue())}},
i just need to make it return value for "transactionID" instead of "edit"
and before anyone asks, no, i can't just make "transactionID" clickable. I need the clickable cell to be separate.
thanks for your help!
ok so since i got no answers to this question, i slogged thru and figured it out myself eventually. To save others time who run into this in the future, i am posting how i solved it. code with comments below :
// this goes in your tabulator column definitions. In my example, "edit" is a column
with an image button that on clicking, redirects to another page depending on what cell was clicked
{title:"" , name:"edit", formatter:openIcon, headerSort:false, cellClick:function(e, cell){
var re = cell.getRow(cell); // get the row of the cell that was clicked
var thenum = re.getData().id; // gets the value of column "id" in the same row
var theurl = "editTransaction.php?trans="+thenum; // creates my url
console.log(theurl); // perform whatever action you need to do. replace this.
}},
If you are using react-tabulator and you want to access some column data to perform a specific action ,here is the snippet for your help.
import { reactFormatter } from "react-tabulator";
// your React Component to use in a cell
function CustomFormatter(props: any) {
const rowData = props.cell._cell.row.data;
return <a onClick={() => alert(rowData.customField)}{cellData.customField }</a>;
}
const columns = [{ title: 'Custom', field: 'custom', align: 'center', formatter: reactFormatter(<CustomFormatter />) },
]
I want to display a table with data coming from different sql tables, like for a single table component, some columns of the table come from one sql query and other column from next query. Using join queries or sub queries will display wrong data. In table component there is only one option for selecting the data-source.
Is there any way to do this?
With Javascript, in the pre-Execution function of the table component, you can change the datasource, but not for single columns.
You can hide some columns in the table component if you want.
How to change the datasource with Javascript
I created a Simple Parameter: refresh_table, and it contains the datasource of the table: sql_Empty, to show an empty table.
I created some Select components and when you choose a value and then you click on the Button component (a search button), the search button changes the value in the simple parameter 'refresh_table' with a new datasource based on the value in the select component: sql_A, sql_B.
function a() {
var a = this.dashboard.getParameterValue('selectA');
var b = this.dashboard.getParameterValue('selectB');
if (a === 'ciao' && b === 'ciao') {
this.dashboard.fireChange('refresh_table', 'sql_A');
} else {
this.dashboard.fireChange('refresh_table', 'sql_B');
}
}
In the preExecution function of the table component, I wrote this function to change the datasource based on the parameter value of refresh_table.
function b() {
this.chartDefinition.dataSource = this.dashboard.getParameterValue('refresh_table');
}
I think you can do it with Pentaho Data Integration/Kettle/Spoon and then you can pass the results to the table component, but I don't know how.
I am using Tablulator v4.1. I am creating an interface for our pharmacy organization so a member can change the meeting information without doing any coding. One field is the meeting room location which is a select editor.
Is it possible to populate the values of editorParams with a path to an array stored in a different text file? Something like:
{title:"Room", field:"room", editor:"select", editorParams:{"/textfiles/roomvalues.txt"}},
I can then create another table to add/edit the possible room choices.
This code is what I currently use.
{title:"Room", field:"room", editor:"select", editorParams:{
values:{
"A":"Room A",
"B":"Room B",
"C":"Room C"}
}},
Thank you.
You can pass a function into the values property that can then return an array of values that you can load from elsewhere
{title:"Room", field:"room", editor:"select", editorParams:{
values:function(cell){
//lookup values from data source
return values;
}}},
I'm new to the tabulator and am having trouble getting it to display droplist data in the correct format.
I have defined the column details thus:
{
title: "Status",
field: "Status",
width: 150,
headerFilter: "input",
editor: "select",
editorParams: {
listFormatter: populateStatusList
}
},
As you can see, the listFormatter calls function populateStatusList. This function builds an array of strings from an already-populated structure and returns the array.tostring() from the function.
The tabulator droplist does show the strings but horizontally on one long line and not vertically as I'd expect (i.e. it doesn't actually drop).
Can anyone help me?
Kind regards
The listFormatter should only be used to layout list items passed into the editor, the values for each of the items in the list should be passed into the values property
{title:"Gentlemen", field:"names", editor:"select", editorParams:{
listFormatter:function(value, title){ //prefix all titles with the work "Mr"
return "Mr " + title;
},
values:{
"steve":"Steve Boberson",
"bob":"Bob Jimmerson",
"jim":"Jim Stevenson",
}
}}
In the example above the list formatter will create a list of the titles passed into the values property, prepending each with the string "Mr"
I am using YUI2 datatable.
consider the following scenario.
var myColumnDefs = [
{ key:"A", label:"A", sortable:true},
{ key:"C", label:"C", sortable:true}
];
// i want to add this column after A.
myColumnDefs.push({ key:'B',label:'B'});
this code will generate columns A,C,B but i want it to be A,B,C. how can i do it?
You can sort the columns definition before passing them to the yui datatable constructor:
myCOlumnDefs.sort(function(c1, c2){
return c1.key > c2.key ? 1 : -1;
});