CODEWITHSUNDEEP
tabulator
mcderllo
mcderllo

Reputation: 11

I'm trying to use Tabulator version 4.1.5

I'm using Tabulator version 4.1.5 and it is not rendering anything. Here is my code:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabulator 4 Test</title>
  <link href="tabulator-master-415/dist/css/tabulator.min.css" rel="stylesheet" />
  <script src="tabulator-master-415/dist/js/tabulator.min.js"></script>
  <script>
    var tableData = [
        {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
        {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    ]

    var table = new Tabulator("#example-table", {
        data:tableData, //set initial table data
        columns:[
            {title:"Name", field:"name"},
            {title:"Age", field:"age"},
            {title:"Gender", field:"gender"},
            {title:"Height", field:"height"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob"},
            {title:"Cheese Preference", field:"cheese"},
        ],
    });
  </script>
</head>

<body>
  <h1>This is a test</h1>
  <div id="example-table"></div>
</body>
</html>

The table doesn't render. What am I doing wrongly?

Upvotes: 1

Views: 1975

Answers (1)

Nyuton
Nyuton

Reputation: 306

Your table constructor runs before the <div> is created. So by the time your table constructor code executes, the target div does not exist yet.

Either move your <script> block that contains the constructor somewhere after the table <div> or wrap the constructor code into a window.onload function or similar jQuery alternative.

Upvotes: 5

Related Questions