Okay, so what am I doing wrong? I'm using the code below from the site under "Quickstart":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
</script>
</body>
</html>
I'm seeing the column headings, but -- where there should be data -- there is nothing showing up!
This is my 3rd attempt with this program. I have never gotten it to work correctly. I'd use something else but the examples on the website make it appear I can do what is called for.
You need the polyfills to get it to work on IE 11.
There is more info in the docs: http://tabulator.info/docs/4.2/browsers#ie
Copy pasted your same code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>-->
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
</script>
</body>
</html>
Related
I'm trying to install the default example of Tabulator (http://tabulator.info/docs/4.0/quickstart).
I installed Tabulator in my NodeJS project.
My route definition looks like this in my index.js file:
app.get("/", (req, res) => {
var table = new tabulator("#example-table", {
height:205,
layout:"fitColumns", //fit columns to width of table (optional)
columns:[
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
res.render("index", { title: "Home"});
});
Then I added a div in my index.pug:
div.example-table
However, I got the following error:
ReferenceError: document is not defined
at Tabulator.initializeElement (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\tabulator-tables\dist\js\tabulator.js:9223:19)
at new Tabulator (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\tabulator-tables\dist\js\tabulator.js:8612:12)
at app.get (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\index.js:37:17)
at Layer.handle [as handle_request] (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:275:10)
I guess, that Tabulator should somehow be initialized on the client side. But I don't know how...
I solved my problem.
I joined the tabulator-tables css & js path to the app configuration in index.js:
app.use(express.static(path.join(__dirname, "node_modules/tabulator-tables/dist/css")));
app.use(express.static(path.join(__dirname, "node_modules/tabulator-tables/dist/js")));
Then, I imported the tabulator css and js files in my frontend:
link(rel="stylesheet" href="tabulator.min.css")
script(type='text/javascript' src="tabulator.min.js")
Finally, I copied the sample-script in my page:
div.example-table(id="example-table")
script.
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//load sample data into the table
table.setData(tabledata);
Thank you very much for your help!
That looks like you are trying to use Tabulator in the response on the controller.
Tabulator is designed to be run client side, not server side. you would need to return some HTML with a script tag that then built the table on a DOM node.
You are also instantiating tabulator with a lower case "T" it should be new Tabulator
I suggest what you need to do is create an HTML page to show the table, for example the source at http://tabulator.info/basic/4.8 would do, though you would also need to serve the source JS and CSS files for the demo to work, alternativly you could change the local file paths to the CDN Links for a quick demo.
You would then need to serve this page with ExpressJS, using the sendFile function and the path to your html file
// viewed at http://localhost:8080
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
To pass table data from node to script in a pug file do the following:
// node index.js
let data = [
{id : 1, name : 'Adam', zip : '11101'},
{id : 2, name : 'Bob', zip : '95134'}
];
res.render('table.pug', { table_data: data });
// table.pug
div.example-table(id="example-table")
script.
var table = new Tabulator("#example-table", {
columns:[
{title:"Name", field:"name"},
{title:"ZIP", field:"zip"}
]
});
//load sample data into the table
table.setData(!{JSON.stringify(table_data)});
What I did to get Tabulator up and running with nodejs and express.
At first install Tabulator Tables in your nodejs/express project by npm i tabulator-tables. Then proceed as follows:
The main Javascript file in my case is "app.js".
In "app.js": Use static files to serve them:
// Use static files
app.use(express.static(path.join(__dirname, "node_modules/tabulator-tables/dist/css")));
app.use(express.static(path.join(__dirname, "node_modules/tabulator-tables/dist/js")));
In the <head> section of the html document, in my case "index.html":
<head>
<!-- Tabulator Tables -->
<link rel="stylesheet" href="tabulator.min.css">
<script src="tabulator.min.js"></script>
</head>
In the body-section of the "index.html" place a div where the table should appear:
<div id="example-table"></div>
Also in "index.html" reference a scriptfile before the closing body-tag:
<!-- Document ready -->
<script src="index.js"></script>
</body>
Last but not least in the "index.js" file:
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],
});
//trigger an alert message when the row is clicked
table.on("rowClick", function(e, row){
alert("Row " + row.getData().id + " Clicked!!!!");
});
Then start node app.js and open your "index.html" in the browser. If the table appears and you get a message when you click on a row of it, then everything works fine.
Hope this helps.
I'm very new to developing and I am trying to get tabulator to work in a nodejs environment using expressjs. I've learned that I can't run the script on the client side because there is no require function available. I know there are ways around that but I figured I would try to run in on the server side. I've used express generator with --view=pug. I've added div(id=example-table) in the index.pug. I have installed tabulator tables using npm install tabulator-tables. I tried to use the following in app.js:
var Tabulator = require('tabulator-tables');
app.get('/', function() {
var table = new Tabulator("#example-table", {
height:205,
layout:"fitColumns", //fit columns to width of table (optional)
columns:[
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
table.setData(tabledata);
});
Does nothing. Site loads with the everything else in the layout.pug and index.pug and source file shows <div id=example-table></div>, so I know that part at least worked.
I just switched to Vue, got it working.
trying first super basic tabulator and getting stuck with console error "no element found matching selector". I've tried a couple different examples, can't figure out what I'm doing wrong. is this how naming is supposed to work?
<html>
<head><title>Test for tabulator</title>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script>
//define data
var tabledata = [
{id:1, name:"Oli Bob", location:"United Kingdom", gender:"male", rating:1, col:"red", dob:"14/04/1984"},
{id:2, name:"Mary May", location:"Germany", gender:"female", rating:2, col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", location:"France", gender:"female", rating:0, col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", location:"USA", gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", location:"Canada", gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Frank Harbours", location:"Russia", gender:"male", rating:4, col:"red", dob:"12/05/1966"},
{id:7, name:"Jamie Newhart", location:"India", gender:"male", rating:3, col:"green", dob:"14/05/1985"},
{id:8, name:"Gemma Jane", location:"China", gender:"female", rating:0, col:"red", dob:"22/05/1982"},
{id:9, name:"Emily Sykes", location:"South Korea", gender:"female", rating:1, col:"maroon", dob:"11/11/1970"},
{id:10, name:"James Newman", location:"Japan", gender:"male", rating:5, col:"red", dob:"22/03/1998"},
];
//define table
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
</script>
</head>
<body>
<h1>test tabulator </h1>
<div id="example-table"></div>
</body>
</html>
is there something obvious I'm missing? this is copied/pasted right from the samples.
Yes, because the element does not exist when you accessed it. Move your javascript after the div and it should work. Or use the page load event:
Bottom page:
<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
</script>
Page Load:
window.addEventListener("load", function() {
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
},false);
My table data is stored in a text file named test_array.txt
[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
How do I call a text file when I setData. I tried the below and the table structure is build, but the data does not load, but states ERROR in the table.
//load sample data into the table
table.setData("../textfiles/test_array.txt");
In my browser console, I get the following error message.
Ajax Load Error: SyntaxError: "JSON.parse: expected property name or '}' at line 2 column 2 of the JSON data"
Here is my entire script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Johnson County Pharmacy Association, Johnson County, Iowa" />
<meta name="keywords" content="Johnson County Iowa Pharmacy Association pharmacist technician" />
<link href="../css/main.css" rel="stylesheet" />
<link href="../css/tabulator.css" rel="stylesheet" />
<link href="../css/tabulator.css.map" rel="stylesheet" />
<script type="text/javascript" src="../js/tabulator.js"></script>
<title>JCPA</title>
</head>
<body>
<div id="tblwrap">
<h2>Meeting Information Editor</h2>
<div id="example-table"></div>
<script>
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//data:tableData, //set initial table data
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
//load sample data into the table
table.setData("../textfiles/test_array.txt");
</script>
</div>
</body>
</html>
I got it to work using double quotes on the keys
[
{"name":"Oli Bob", "age":"12", "col":"red", "dob":""},
{"name":"Mary May", "age":"1", "col":"blue", "dob":"14/05/1982"},
{"name":"Christine Lobowski", "age":"42", "col":"green", "dob":"22/05/1982"},
{"name":"Brendon Philips", "age":"125", "col":"orange", "dob":"01/08/1980"},
{"name":"Margret Marmajuke", "age":"16", "col":"yellow", "dob":"31/01/1999"}
]
You have an invalid trailing comma on line 6 of your code, the row with an id of 5 should not have a comma at the end, and you do not need a semi colon after the array, it is invalid JSON. It should be:
[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"}
]
Have you checked in your browser network developer tools what the response is? It may also be possible that your server is not returning the file you are expecting, checking in the network tools should let you confirm what is being returned
Never used Tabulator, just down loaded version 4. I read the QuickStart and documentation, but only get a blank screen when running the example script. My pathways are correct and I can run other javascript scripts, so not sure what is wrong. I really like the idea of this interface and will help me keep up a small pharmacy organization website, I support.
Here is my html and script
<script>
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//load sample data into the table
table.setData(tabledata);
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Tabulator</title>
<link href="css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
I would appreciate any help.
Where are you putting your script tags that contain the Tabulator constructor? they should be in the body and under the example-table div.
Are you getting any warning messages in your browser console?