Resolved in my test project. There were additional .js dependencies that were required by this component.
Styles tabluator_bootstrap5.min.css
JavaScript tabulator.js, tabulator_core.min.js, tabulator.min.js
Add a JavaScript file, add the code to populate a JSON data element, create and configure the Tabulator component based on examples from tabulator.info and call the function: table.setData(tableData); (tableData being the JSON array of data details)
Sample JS file
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},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
]
var table = new Tabulator("#example-table", {
height:"311px",
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age", align:"right", sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height", align:"center", sorter:"number"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
],
});
table.setData(tableData);
I would attach some screenshots but this forum disallows unless it is a link to a public website which I do not have.
Thanks again!
Ben